javascript - How to move an object to the other stable object in THREE.JS? -
i new , have created scene,renderer,camera,and 2 objects , want move 1 object other object how can achieve in three.js ? heres stuff have tried kindly me in thanks
<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>
you can use library tween.js (you can find in three.js\examples\js\libs) , do
new tween.tween( object1.position, // old position .to( object2.position, 3000 ) // new position, duration .delay( 2000 ) .start();
Comments
Post a Comment