放大和缩小场景中的特定点 THREE.js 和 TWEEN.js

问题描述

我试图从外部一直缩放到这个立方体内部（我使用 tween.js 来做到这一点），缩放距离很好，但是正如您在代码片段中看到的那样，相机没有实际上放大到立方体，立方体只会飞过相机，然后如果你点击窗口上的任何地方，它（立方体）就会弹回原位。这些不需要的事件仅在添加轨道控制后才会发生。我真的无法将我的大脑包裹在这个周围。任何帮助将非常感激。 （只需全屏运行代码片段）

let camera,renderer,scene,controls,cube;

function init(){
  
  // scene renderer and camera
  const canvas = document.getElementById("canvas");
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(10,2,20,200);
  renderer = new THREE.Webglrenderer({ canvas,antialias: true});
  camera.position.set(0,170);
  
  controls = new THREE.OrbitControls(camera,renderer.domElement);
  controls.enablePan = false;
  controls.enableZoom = false;

  // cube geometry
  const geometry = new THREE.BoxGeometry( 10,10,10 );
  const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  cube = new THREE.Mesh( geometry,material );
  cube.position.set( 0,0);
  scene.add( cube );
  
  // edges geometry
  var edgeGeometry = new THREE.EdgesGeometry( cube.geometry ); // or WireframeGeometry
  var edgeMaterial = new THREE.LineBasicMaterial( { color: 0xffffff,linewidth: 2 } );
  edges = new THREE.Linesegments( edgeGeometry,edgeMaterial );
  cube.add( edges );

  renderer.render(scene,camera);
  
  animate();
};

function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
    cube.rotation.y += 0.0003;
    cube.rotation.x += 0.0003;
    TWEEN.update();
}

init();

var scrollEvent = 0;
window.addEventListener('wheel',function(event)
{
 if ((event.deltaY < 0) && scrollEvent >= 1)
 {
  var xTarget = 0;
        var yTarget= 0;
        var zTarget= 170;
        var tweenDuration=0;

        function panCam(xTarget,yTarget,zTarget,tweenDuration){

          TWEEN.removeAll();

          var camNewPosition= { x : xTarget,y : yTarget,z : zTarget};
          var targetNewPos = {x : xTarget,z : 0};

          var camTween = new TWEEN.Tween(camera.position).to(camNewPosition,tweenDuration).easing(TWEEN.Easing.Quadratic.InOut)
           .onComplete(function() {
               camera.position.copy(camNewPosition);
            })
          .start();
          var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos,tweenDuration).easing(TWEEN.Easing.Quadratic.InOut)
            .onComplete(function() {
                controls.target.copy(targetNewPos);
            })
          .start();
    }
    panCam(0,170,1000); 
    scrollEvent = 0;
 }
 else if (event.deltaY > 0 && scrollEvent == 0)
 {
    scrollEvent += 1;

    var xTarget = 0;
        var yTarget= 0;
        var zTarget= 20;
        var tweenDuration=0;

        function panCam(xTarget,tweenDuration).easing(TWEEN.Easing.Quadratic.InOut)
            .onComplete(function() {
                controls.target.copy(targetNewPos);
            })
          .start();     
    }
    panCam(0,1000); 
 }});

body{
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #f1f1f1;
}

.scene,canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://sole.github.io/tween.js/build/tween.min.js"></script>

<canvas id="canvas"></canvas>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）