Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active March 21, 2025 23:09
Show Gist options
  • Save HarryStevens/f9a31f69cf7645c34e473c1250b2ab30 to your computer and use it in GitHub Desktop.
Save HarryStevens/f9a31f69cf7645c34e473c1250b2ab30 to your computer and use it in GitHub Desktop.
Download ZIP
Camera Tween
Raw
.block
license: gpl-3.0
Raw
README.md

An example of using tween.js to smoothly interpolate the camera's position. Here's a list of available easing functions.

Raw
index.html
<html>
<head>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="stats"></div>
<div id="scene"></div>
<script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/libs/stats.min.js"></script>
<script src="https://unpkg.com/[email protected]/src/Tween.js"></script>
<script>
const stats = (_ => {
const stats = new Stats();
stats.domElement.style.position = "absolute";
stats.domElement.style.left = "0px";
stats.domElement.style.top = "0px";
document.getElementById("stats").appendChild(stats.domElement);
return stats;
})();
const scene = new THREE.Scene();
const positions = [
[10, 15, 20],
[-30, 30, -15]
];
let currPosition = 0;
const camera = (_ => {
const camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 0.1, 1000);
camera.position.set(...positions[currPosition]);
camera.lookAt(scene.position);
return camera;
})();
const renderer = (_ => {
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#eee");
renderer.setPixelRatio(devicePixelRatio);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = 2;
document.getElementById("scene").appendChild(renderer.domElement);
return renderer;
})();
const plane = (_ => {
const geom = new THREE.PlaneBufferGeometry(60, 60);
const matl = new THREE.MeshLambertMaterial({ color: "#fff"});
const plane = new THREE.Mesh(geom, matl);
plane.rotation.x = -0.5 * Math.PI;
plane.receiveShadow = true;
scene.add(plane);
return plane;
})();
const box = (_ => {
const geom = new THREE.BoxBufferGeometry(4, 4, 4);
const matl = new THREE.MeshLambertMaterial({ color: "steelblue" });
const box = new THREE.Mesh(geom, matl);
box.position.y = 2;
box.castShadow = true;
scene.add(box);
return box;
})();
const ambient = (_ => {
const light = new THREE.AmbientLight("#555");
scene.add(light);
return light;
})();
const spot = (_ => {
const light = new THREE.SpotLight("#fff");
light.position.set(-20, 20, 20);
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
light.angle = Math.PI / 8;
light.castShadow = true;
scene.add(light);
return light;
})();
function animate(){
requestAnimationFrame(animate);
stats.update();
TWEEN.update();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
animate();
function resize(){
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeight);
}
resize();
onresize = resize;
function interval(){
currPosition = currPosition === 0 ? 1 : 0;
tweenCamera(camera, positions[currPosition], 3000);
}
interval();
setInterval(interval, 4000);
function tweenCamera(camera, position, duration) {
new TWEEN.Tween(camera.position).to({
x: position[0],
y: position[1],
z: position[2]
}, duration)
.easing(TWEEN.Easing.Quadratic.InOut)
.start();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment