简体   繁体   中英

How to change mesh's position in function animate() in three.js?

I have a simple mesh in three.js (implemented into 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);

I'd like to change this mesh's position in function animate();

I've tried several things, but None of the below example was working:

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);

The result is a black screen every time.

The strange thing is that I can change camera and light positions in the same area of code:

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

However the position.set of a mesh fails. Is it possible to change a mesh's position in function animate()?

I've tried:

"sphere.position.x = 20;"

the result is a black window.

Below you can see the detailed console log:

The log's comment for the line above "sphere.position.x = 20;":

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

Other details of the log for this issue:

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

Your sphere variable that references the mesh is not in the scope of the animate() function. Make it a global variable by removing the var :

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

Then in animate() calling sphere.position.set(20, 20, 20); should do it,

or if you want to animate the movement: sphere.position.x += 1;


Disclaimer: keep in mind global variables should be avoided because they are evil >:)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM