THREE.js：更新 RingGeometry 顶点

Question

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

我是不是漏掉了什么？

Answer 1

嗯，折腾了几个小时，找到问题了！

对于 THREE.js 的新版本，它需要标志 "elementsNeedUpdate = true;"。

正在 fiddle 使用 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 顶点

THREE.js: updating RingGeometry vertices

javascript

three.js

geometry

ring