Three.js: Interactive 3D

Build interactive 3D scenes and animations with JavaScript's easiest Web3D library.

<script src="/three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 3, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(600, 300);
document.getElementById('threejs-canvas').appendChild(renderer.domElement);

// Geometry and Material
const geometry = new THREE.TorusGeometry(0.8, 0.2, 16, 100);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff, wireframe: true });
const torus = new THREE.Mesh(geometry, material);
scene.add(torus);

// Lighting
const light = new THREE.PointLight(0xffffff, 1.5);
light.position.set(5, 5, 5);
scene.add(light);

camera.position.z = 3;

function animate() {
    requestAnimationFrame(animate);
    torus.rotation.x += 0.01;
    torus.rotation.y += 0.02;
    renderer.render(scene, camera);
}
animate();
</script>