Having just started out, I've managed to create a scene, renderer, camera, and two objects in THREE.JS. Now I'm trying to figure out how to move one object to another object. I've tried a few things but haven't had much success. Any guidance on how to achieve this would be greatly appreciated. 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>