如何在three.js中将相机补间到顶部

Question

如何在 tween.js 的帮助下通过查看three.js 中的对象将相机补间到顶部位置。补间到正确位置的相机完美运行。

请使用此密码笔：http://codepen.io/anon/pen/ObQxjV?editors=1111

image to clarify

var camera, renderer, controls;

//scene
scene = new THREE.Scene();

//camera
camera = new THREE.OrthographicCamera(640 / -2, 640 / 2, 480 / 2, 480 / -2, -5000, 10000000);
camera.position.set(500, 500, 500);      
scene.add(camera);

//renderer
renderer = new THREE.WebGLRenderer({ precision: "highp", antialias: true, preserveDrawingBuffer: false });
renderer.setSize(640, 480);
renderer.setClearColor(0xc2c2c2);
$("#canvas").append(renderer.domElement);

//controls
controls = new THREE.OrbitControls(camera, renderer.domElement, renderer, scene);	
controls.target = new THREE.Vector3(250, 0, 0)

//axis 
var axis =  new THREE.AxisHelper( 30000 );
scene.add(axis);

//geometry
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );
cube.position.set(250, 0, 0);
scene.add( cube );

animate();

function animate() {
  camera.updateProjectionMatrix();
  controls.update();
  TWEEN.update();
  requestAnimationFrame(animate);
  render();
}

function render(){
  renderer.render(scene, camera);	
}

//working tween to the right
$("#workingTweenToTheRight").click(function () {
    var destPos = new THREE.Vector3(500, 0, 0);
    var destLookAt = new THREE.Vector3(250, 0, 0);

    var currentCamPos = {
      x: camera.position.x,
      y: camera.position.y,
      z: camera.position.z
    };

    var destCamPos = {
      x: destPos.x,
      y: destPos.y,
      z: destPos.z
    };
    var tween = new TWEEN.Tween(currentCamPos)
    .to(destCamPos, 600)
    .onUpdate(function () {
      camera.position.set(this.x, this.y, this.z);
      camera.lookAt(destLookAt);
      controls.target = destLookAt;
    })
    .start();
});

//not working tween to top
$("#notWorkingTweenToTheTop").click(function () {
    var destPos = new THREE.Vector3(0, 500, 0);
    var destLookAt = new THREE.Vector3(250, 0, 0);

    var currentCamPos = {
      x: camera.position.x,
      y: camera.position.y,
      z: camera.position.z
    };

    var destCamPos = {
      x: destPos.x,
      y: destPos.y,
      z: destPos.z
    };
    var tween = new TWEEN.Tween(currentCamPos)
    .to(destCamPos, 600)
    .onUpdate(function () {
      camera.position.set(this.x, this.y, this.z);
      camera.lookAt(destLookAt);
      controls.target = destLookAt;
    })
    .start();      
});




	

body { margin: 0; }
#canvas {float: left; width: 640px; height: 380px; border: 1px solid #d3d3d3 }
.button { border: 1px solid black; cursor: pointer; width: 230px; height: 20px;}
.button:hover{background: blue; color: white;}

<script src="http://sole.github.io/tween.js/build/tween.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<div id="canvas">
<div id="workingTweenToTheRight" class="button" >working tween to the right</div>
<div id="notWorkingTweenToTheTop" class="button" >not working tween to the top</div>
</div>

Answer 1

您需要为“补间到顶部”设置不同的destPos：

var destPos = new THREE.Vector3().addVectors(cylinder.position, new THREE.Vector3(0, 500, 0));