THREE.js：更新RingGeometry顶点

Question

我想动态更新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>

我错过了什么吗？

Answer 1

好吧，经过几个小时的摆弄，我发现了问题！

使用新版本的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>