如何将对象移动到THREE.JS中的另一个稳定对象？

Question

我是新手，创造了场景，渲染器，相机和两个物体， 我想要的是将一个对象移动到另一个对象我怎样才能在THREE.JS中实现它？ 继承了我所尝试过的所有东西，请帮助我 感谢

＆＃13;

＆＃13;

<script src="js/three.min.js"></script> 
<script src="js/tween.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script> 
    var scene = new THREE.Scene(),
        camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000),
        renderer = new THREE.WebGLRenderer(),
        controls = new THREE.OrbitControls(camera),
        tween = new TWEEN.Tween({cube.position})
		 .to({cube1.position},3000)
		 .delay(2000)
		 .start();	 
			 
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement); 
     
    var cube = new THREE.Mesh(
        new THREE.CubeGeometry(2,2,2),
        new THREE.MeshBasicMaterial({wireframe: true, color: 0x000000}
    ));
    cube.position.x=3;
    cube.position.y=1;
    cube.position.z=2;
    //cube.geometry.dynamic = True;
    //cube.translateZ( 10 );
    scene.add(cube); 

    camera.position.z = 10;

    var dullMaterial = new THREE.MeshBasicMaterial( { color: 0xCCFF00 	, ambient: 0x333333 } );
     
    var loader = new THREE.JSONLoader();
    loader.load('models/monkey.js', function (geometry, materials) {
        cube1 = new THREE.Mesh( geometry, dullMaterial );
        scene.add(cube1);
    });

    var render = function () { 
        requestAnimationFrame(render); 
        controls.update();
        TWEEN.update();

        cube1.rotation.x += 0.01; 
        cube1.rotation.y += 0.01;
        //cube.translate(0.1);
        renderer.render(scene, camera); 
    }; 
    render(); 
</script> 

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用另一个库tween.js（您可以在three.js \ examples \ js \ libs中找到它）并执行

new TWEEN.Tween( object1.position, // old position
    .to( object2.position, 3000 ) // new position, duration
    .delay( 2000 )
    .start();