I'm trying to figure out how to move one object to the position of another object. I found some suggestions online to use the TWEEN library, but I'm having trouble integrating it into my code. Any help would be greatly appreciated :)
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/tween.min.js"></script>
<script>
var scene,camera,renderer;
init();
animate();
function init()
{
// Setting up the scene and defining its size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Creating a renderer and adding it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Creating a camera, positioning it away from the model, and adding it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.z = 10;
scene.add(camera);
// Adding an event listener for resizing the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Setting the background color of the scene.
renderer.setClearColorHex(0x333F47, 1);
// Creating a light, positioning it, and adding it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
// Loading the mesh models and adding them to the scene.
var loader = new THREE.JSONLoader();
loader.load( "models/cubic.js", function(geometry){
var material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.y= 2.5;
});
var loader1 = new THREE.JSONLoader();
loader1.load( "models/monkey.js", function(geometry){
var material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.x=2.5;
});
// Adding OrbitControls for panning around with the mouse.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
function animate()
{
requestAnimationFrame(animate);
renderer.render(scene,camera);
controls.update();
tween.update();
}
</script><!DOCTYPE html>
<html>
<head>
<title>my First web with Three js</title>
<style>
body {margin:0;}
canvas{width:100%;height:100%}
</style>
</head>
<body>
</body>
</html>