如何在Three.js中將相機補間

Question

如何在tween.js的幫助下，通過查看Three.js中的對象將攝影機補間到最高位置。 補間到正確位置的相機效果很好。

請使用以下代碼筆： http ://codepen.io/anon/pen/ObQxjV?editors=1111

圖片說明

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