THREE.js:更新RingGeometry顶点
THREE.js:更新RingGeometry顶点
提问于 2017-12-19 03:46:04
我想动态更新RingGeometry的顶点。我所做的是创建另一个RingGeometry，并用新的顶点替换第一个的顶点。
问题是它在THREE.JS的6.7版本上工作得很好，但在最新的版本(8.9)上它停止了工作。
带有版本6.7的代码片段：
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
renderer = new THREE.WebGLRenderer;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
counter = 0;
increase = Math.PI / 100;
render = function() {
requestAnimationFrame(render);
angle = Math.PI * (Math.sin(counter) + 1) / 2; // avoid negatives
counter += increase;
ring = new THREE.RingGeometry(4, 5, 40, 1, 0, angle);
mesh.geometry.vertices = ring.vertices;
mesh.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
};
geometry = new THREE.RingGeometry(4, 5, 40, 1, 0, Math.PI * (Math.sin(counter)+1) / 2);
material = new THREE.MeshBasicMaterial({color: 0xffff00});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.z = 10;
renderer.render(scene, camera);
render();<script src="https://threejs-socketio-basic.herokuapp.com/three67.js"></script>
版本8.9的代码片段：
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
renderer = new THREE.WebGLRenderer;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
counter = 0;
increase = Math.PI / 100;
render = function() {
requestAnimationFrame(render);
angle = Math.PI * (Math.sin(counter) + 1) / 2; // avoid negatives
counter += increase;
ring = new THREE.RingGeometry(4, 5, 40, 1, 0, angle);
mesh.geometry.vertices = ring.vertices;
mesh.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
};
geometry = new THREE.RingGeometry(4, 5, 40, 1, 0, Math.PI * (Math.sin(counter)+1) / 2);
material = new THREE.MeshBasicMaterial({color: 0xffff00});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.z = 10;
renderer.render(scene, camera);
render();<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
我是不是遗漏了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-19 17:08:57
嗯，经过几个小时的摆弄，我找到了问题所在！
在新版本的THREE.js中，它需要"elementsNeedUpdate = true;“标志。
版本8.9上的Working fiddle：
scene = new THREE.Scene;
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
renderer = new THREE.WebGLRenderer;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
counter = 0;
increase = Math.PI / 100;
render = function() {
requestAnimationFrame(render);
angle = Math.PI * (Math.sin(counter) + 1.01) / 2; // avoid negatives
counter += increase;
ring = new THREE.RingGeometry(4, 5, 40, 1, 0, angle);
mesh.geometry.vertices = ring.vertices;
mesh.geometry.verticesNeedUpdate = true;
mesh.geometry.elementsNeedUpdate = true;
renderer.render(scene, camera);
};
geometry = new THREE.RingGeometry(4, 5, 40, 1, 0, Math.PI * (Math.sin(counter)+1) / 2);
material = new THREE.MeshBasicMaterial({color: 0xffff00});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.z = 10;
renderer.render(scene, camera);
render();<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47879749
复制相关文章
相似问题
有没有Android工具可以找到正在运行的应用的布局名称？
检查远程进程是否正在运行(linux)
Android检查应用程序中正在运行的服务
有没有工具可以检查正在运行的进程中的.NET对象？
Android穿戴检查手机应用程序是否正在运行
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
