如何在 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

您需要为 "tween to the top" 设置不同的 destPos：

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

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

How to tween camera to the top in three.js

javascript

animation

three.js

tween.js