javascript - 如何在 three.js 中更改网格在函数 animate() 中的位置？

Question

我在 three.js 中有一个简单的网格(在 three.js-master\examples\webgl_loader_collada_keyframe.html 中实现):

function init() {
...
...
    var sphereGeometry = new THREE.SphereGeometry( 50, 32, 16 ); 
    var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x8888ff} ); 
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.set(10, 10, 10);
    scene.add(sphere);

我想在函数 animate() 中更改此网格的位置；

我已经尝试了几件事，但下面的例子都没有用:

1.:

sphere.position.set = new THREE.Vector3(20, 20, 20);

2.:

 sphere.position.set(20, 20, 20);

3.:

sphere.position.x += 1;

4.:

sphere.translateX(50);

结果每次都是黑屏。

奇怪的是我可以在同一代码区域更改相机和灯光位置:

                pointLight.position.set(10, 20, 03);
                camera.position.set(12, 44, 13);
                camera.lookAt(new THREE.Vector3(33, 45, 54));

但是，网格的 position.set 失败了。是否可以在函数 animate() 中更改网格的位置？

我试过:

"sphere.position.x = 20;"

结果是一个黑色的窗口。

您可以在下面看到详细的控制台日志:

日志对“sphere.position.x = 20;”上方行的注释:

"Uncaught TypeError: Cannot set property 'x' of undefined"

此问题日志的其他详细信息:

"animate @ index_final.html:260
(anonymous function) @ index_final.html:98
parse @ ColladaLoader.js:225
request.onreadystatechange @ ColladaLoader.js:113"

Answer 1

引用网格的 sphere 变量不在 animate() 函数的范围内。通过删除 var 使其成为全局变量:

sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

然后在 animate() 中调用 sphere.position.set(20, 20, 20); 应该这样做，

或者如果你想为运动设置动画:sphere.position.x += 1;

---

免责声明:请记住，应避免使用全局变量，因为它们邪恶>:)