three.jsのカメラを一番上にトゥルーする方法

Question

tween.jsの助けを借りてthree.jsのオブジェクトを見て、カメラを一番上の位置にトゥイーンする方法。正しい位置にカメラのトゥイーンが完全に動作します。

このcodepenを使用してください：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); \t 
 
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); \t 
 
} 
 

 
//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();  
 
}); 
 

 

 

 

 
\t

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