Pulsing Sphere - Threejs-animation Typing CST Test
Loading…
Pulsing Sphere — Threejs-animation Code
Sphere pulses by changing scale periodically.
# threejs/demo/PulsingSphere.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/three@0.150.1/build/three.min.js"></script>
</head>
<body>
<script>
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const geometry = new THREE.SphereGeometry(1, 32, 32)
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff })
const sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)
camera.position.z = 5
let t = 0
function animate() {
requestAnimationFrame(animate)
t += 0.05
sphere.scale.set(1 + Math.sin(t), 1 + Math.sin(t), 1 + Math.sin(t))
renderer.render(scene, camera)
}
animate()
</script>
</body>
</html>Threejs-animation Language Guide
Three.js Animation System is a powerful, flexible framework for keyframe-based animations of 3D objects, cameras, materials, and morph targets. It uses AnimationMixer, AnimationClips, and KeyframeTracks to animate properties over time with smooth interpolation and precise timeline control.
Primary Use Cases
- ▸Object and camera animations
- ▸GLTF character and skeletal animations
- ▸Morph target and facial animations
- ▸Scene transitions and cinematic sequences
- ▸3D product demos and interactive experiences
Notable Features
- ▸AnimationMixer for global control
- ▸AnimationClip for reusable timelines
- ▸KeyframeTrack system
- ▸Interpolation modes (linear, cubic, quaternion)
- ▸Blendable and cross-fade animations
Origin & Creator
Three.js Animation System was introduced and evolved by the Three.js open-source community led by Ricardo Cabello (mrdoob). It matured significantly between 2014-2020 with GLTF-centric animation workflows.
Industrial Note
Three.js Animation is heavily used in web-based product configurators, architectural walkthroughs, scientific simulations, cinematic scenes, NFT 3D viewers, interactive landing pages, and real-time motion graphics.