THREE.js：更新RingGeometry顶点
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了THREE.js：更新RingGeometry顶点相关的知识，希望对你有一定的参考价值。
我想动态更新Ring Geometry顶点。我所做的是创建另一个Ring Geometry，并用新的顶点替换第一个顶点。
问题是它在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>我错过了什么吗？
答案
好吧，经过几个小时的摆弄，我发现了问题！
使用新版本的THREE.js需要标志“elementsNeedUpdate = true;”。
在版本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.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>以上是关于THREE.js：更新RingGeometry顶点的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Autodesk Forge 中动态更新 THREE.js PointCloud 覆盖