Is it possible to tween the camera to a top position with a focus on an object in three.js using tween.js? The camera tweens to the right spot perfectly.
Please refer to this codepen: http://codepen.io/anon/pen/ObQxjV?editors=1111
Click here for image reference
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>