three.js

Try it in 3 steps

1. 1

   Create an npm project

   Use Node.js ^20.19.0 or 22.12.0 and newer with npm, then initialize an empty working directory.

   mkdir three-demo && cd three-demo && npm init -yCopy
2. 2

   Install three.js and Vite

   Pin the dependencies to three 0.186.1 and Vite 8.3.2.

   npm install --save three@0.186.1 && npm install --save-dev vite@8.3.2Copy
3. 3

   Display a rotating cube

   Open the printed local URL to see the cube, then press Ctrl+C when finished.

   printf '%s\n' '<!doctype html><html lang="en"><head><meta charset="utf-8"><title>three.js demo</title><style>body{margin:0}</style></head><body><script type="module" src="/main.js"></script></body></html>' > index.html && printf '%s\n' 'import * as THREE from "three";' 'const scene=new THREE.Scene();' 'const camera=new THREE.PerspectiveCamera(70,innerWidth/innerHeight,0.01,10); camera.position.z=1;' 'const mesh=new THREE.Mesh(new THREE.BoxGeometry(0.2,0.2,0.2),new THREE.MeshNormalMaterial()); scene.add(mesh);' 'const renderer=new THREE.WebGLRenderer({antialias:true}); renderer.setSize(innerWidth,innerHeight); document.body.appendChild(renderer.domElement);' 'renderer.setAnimationLoop((time)=>{mesh.rotation.x=time/2000; mesh.rotation.y=time/1000; renderer.render(scene,camera);});' > main.js && npx vite --host 127.0.0.1Copy

Built with

• JavaScript
• WebGPU

Categories and tags

GitHub data

Share a guide or use case for this OSS in Markdown. Articles are published after administrator approval.

Explore next

• OpenPencil8,736 Stars

  1 shared tag(s) · 1 shared category(s)

  Edit .fig and .pen directly while exposing the same design document to AI, CLI, MCP, and WebMCP automation

  TypeScript
• Grida2,655 Stars

  1 shared tag(s) · 1 shared category(s)

  Connect Canvas, SVG, Figma, and headless rendering in an open design stack

  TypeScript
• Phaser40,400 Stars

  3 shared tag(s) · 1 shared category(s) · Same language

  build HTML5 2D games around a WebGL-first renderer with scenes, physics, filters, and GPU layers

  JavaScript
• KAPLAY1,809 Stars

  3 shared tag(s) · 1 shared category(s)

  Build 2D games with composable APIs and a browser-based playground

  TypeScript
• GDevelop27,109 Stars

  2 shared tag(s) · 2 shared category(s) · Same language

  Create and export 2D, 3D, and multiplayer games with event-based no-code logic plus extensions and JavaScript

  JavaScript
• Babylon.js26,126 Stars

  2 shared tag(s) · 2 shared category(s)

  render interactive 3D scenes, games, and XR experiences in browsers through TypeScript or JavaScript with WebGL and WebGPU

  TypeScript