For a challenge I was supposed to animate the camera moving but instead resized the box to get the same effect. Works here but if there were other elements things could get screwey.
<!DOCTYPE html>
<html>
<head>
<title>Intro to WebGL with three.js</title>
</head>
<body>
<div id="webgl-container"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
var demo = (function(){
"use strict";
var scene=new THREE.Scene(),
light= new THREE.AmbientLight(0xffffff),
renderer,
camera,
renderer = new THREE.WebGLRenderer(),
box,
ground,
controls=null;
function initScene(){
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById("webgl-container").appendChild(renderer.domElement);
scene.add(light);
camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.set( 30, -15, 200 );
// camera.lookAt(new THREE.Vector3(30,20,-30));
scene.add(camera);
box = new THREE.Mesh(
new THREE.BoxGeometry(
20,
20,
20),
new THREE.MeshBasicMaterial({color: 0x2aa5f}));
// camera.position.z=200;
scene.add(box);
requestAnimationFrame(render);
// console.log(typeof(camera.postion));
};
// setTimeout(zoomin,1000)
var cou = 0;
var on = true;
function zoomin(){
if ( on){
//camera.position = new THREE.Vector3(20,0 ,200-cou);
box.scale.z += .02;
box.scale.x +=.1;
box.scale.y +=.1;
countIt();
// console.log(cou)
//render;
}
else{
descale();
}
}
function countIt(){
cou+=.1;
if(cou>3){
on = false;
}
// box.scale.set(cou+.5,cou+2,cou+2);
}
function countOut(){
cou -=.01;
descale();
}
function rotateIt(){
box.rotation.x +=.01;
box.rotation.y += .04;
}
function descale(){
//box.scale.set(cou/.1,cou/.1,cou/.02);
if(cou>0){
console.log(cou)
//console.log(box.scale.x);
box.scale.z -= .02;
box.scale.x -=.1;
box.scale.y -=.1
cou-=.1;
}
else{
on=true;
}
}
function render() {
renderer.render(scene, camera);
zoomin();
rotateIt();
requestAnimationFrame(render);
};
window.onload = initScene;
})();
/*
var demo = (function(){
"use strict";
var scene=new THREE.Scene(),
light= new THREE.AmbientLight(0xffffff),
renderer,
camera,
renderer = new THREE.WebGLRenderer(),
box,
ground,
controls=null;
function initScene(){
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById("webgl-container").appendChild(renderer.domElement);
scene.add(light);
camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.set( 30, -15, 200 );
// camera.lookAt(new THREE.Vector3(30,20,-30));
scene.add(camera);
box = new THREE.Mesh(
new THREE.BoxGeometry(
20,
20,
20),
new THREE.MeshBasicMaterial({color: 0x2aa5f}));
// camera.position.z=200;
scene.add(box);
requestAnimationFrame(render);
// console.log(typeof(camera.postion));
};
// setTimeout(zoomin,1000)
var cou = 0;
var on = true;
function zoomin(){
if ( on){
//camera.position = new THREE.Vector3(20,0 ,200-cou);
box.scale.set(cou+.1,cou+.1,cou+.02);
countIt();
// console.log(cou)
//render;
}
else{
descale();
}
}
function countIt(){
cou+=.1;
if(cou>3){
on = false;
}
// box.scale.set(cou+.5,cou+2,cou+2);
}
function countOut(){
cou -=.01;
descale();
}
function rotateIt(){
box.rotation.x +=.01;
box.rotation.y += .04;
}
function descale(){
//box.scale.set(cou/.1,cou/.1,cou/.02);
if(cou>0){
console.log(cou)
//console.log(box.scale.x);
box.scale.z -= .02;
box.scale.x -=.1;
box.scale.y -=.1
cou-=.1;
}
else{
on=true;
}
}
function render() {
renderer.render(scene, camera);
zoomin();
rotateIt();
requestAnimationFrame(render);
};
window.onload = initScene;
})();
*/