我正在尝试更改 Three.js 场景中某些对象的几何形状。我有一段几乎可以工作的代码,其中鼠标单击触发了更改,但遇到了以下问题:(渲染的)形状仅在第一次鼠标单击时更改,即使几何图形也发生了变化通过以下每次点击都成功修改。使用 Three.js 库的 v66 或 v68(如果相关)。
I read Three.js:完全改变对象的几何形状 https://stackoverflow.com/questions/19977074 and 更新网格内的几何图形不会执行任何操作 https://stackoverflow.com/questions/15384078但到目前为止还无法让我的代码工作。
我的代码的相关部分:
var count = 0, item, geometry;
var geoms = [new THREE.SphereGeometry(2), new THREE.BoxGeometry(3, 3, 3)];
function init() {
geometry = geoms[count];
item = new THREE.Mesh(geometry, material);
scene.add(item);
}
// Mouse click listener.
function handleClick(event) {
count = 1 - count;
geometry = geoms[count];
item.geometry = geometry;
/* With that next line, on the first click, the sphere
* becomes a cube (as intended), but further clicks don't
* change the view anymore, even though item.geometry is
* modified.
*/
item.geometry.buffersNeedUpdate = true;
/* If I try next line instead, I got the following error:
* "TypeError: l.geometryGroupsList is undefined"
* from three.js.
*/
// item.geometry.verticesNeedUpdate = true;
}
Here http://jsfiddle.net/hzmj74gb/是一个(非)工作示例的jsfiddle。屏幕上有一个球体,点击一下它就会变成一个立方体。进一步点击应该在球体和立方体之间切换,但屏幕上没有任何变化。
我不知道为什么会发生这种情况。一旦使用了几何对象,就无法更新网格的几何形状。
.clone()
在这种情况下有效。
item.geometry.dispose();
item.geometry = geometry.clone();
dispose()
先前的几何对象以防止内存泄漏。
会有更好的解决方案。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)