Question

我想要的是将一个物体移动到另一个物体的位置。我从互联网上得到的是使用TWEEN库，但问题是我无法在我的代码中添加补间帮助将不胜感激：）

<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>

Answer 1

我认为您的问题出在您调用input的动画功能中它应该是tween.update()。

HERE就是一个例子（使用你的延迟和开始）。单击按钮，该框将移动到球体位置。

如何将对象移动到THREE.JS中的其他对象位置？

1 个答案: