CODEWITHSUNDEEP
javascriptthree.js
Abdul Basit
Abdul Basit

Reputation: 125

how to move an Object to other object position in THREE.JS?

What i want is to move an object to the position of another object. what i get from the internet is use TWEEN library but the problem is that i am not being able to add tween in my code help would be 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()
{
	// Create the scene and set the scene size.
      scene = new THREE.Scene();
      var WIDTH = window.innerWidth,
          HEIGHT = window.innerHeight;

      // Create a renderer and add it to the DOM.
      renderer = new THREE.WebGLRenderer({antialias:true});
      renderer.setSize(WIDTH, HEIGHT);
      document.body.appendChild(renderer.domElement);

      // Create a camera, zoom it out from the model a bit, and add it to the scene.
      camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
       camera.position.z = 10;
      scene.add(camera);
      
      // Create an event listener that resizes 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();
      });

      // Set the background color of the scene.
      renderer.setClearColorHex(0x333F47, 1);

      // Create a light, set its position, and add it to the scene.
      var light = new THREE.PointLight(0xffffff);
      light.position.set(-100,200,100);
      scene.add(light);

      // Load in the mesh and add it 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;
      }); 
      // Add OrbitControls so that we can pan 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>

Upvotes: 1

Views: 1580

Answers (1)

2pha
2pha

Reputation: 10155

I think your problem is in your animate function you call tween.update().
It should be TWEEN.update().

HERE is an example (using your delay and start). Click the button and the box will move to the sphere position.

Upvotes: 1

Related Questions