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

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

我认为你的问题出在你调用的动画函数中 tween.update()。
应该是TWEEN.update()。

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

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

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

javascript

three.js