Three.js Games: Play the Best WebGL Games & Build Your Own

1import * as THREE from 'three'
2
3const clock = new THREE.Clock()
4const renderer = new THREE.WebGLRenderer({ antialias: true })
5renderer.setSize(innerWidth, innerHeight)
6document.body.appendChild(renderer.domElement)
7
8const scene = new THREE.Scene()
9const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 1000)
10camera.position.set(0, 5, 10)
11
12const player = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({ color: 0x4f46e5 }))
13scene.add(player)
14scene.add(new THREE.DirectionalLight(0xffffff, 2).translateZ(5))
15
16function update(delta) {
17  // input, physics step, collision, AI: your game logic lives here
18  player.rotation.y += delta
19}
20
21renderer.setAnimationLoop(() => {
22  update(clock.getDelta())
23  renderer.render(scene, camera)
24})

1import * as THREE from 'three/webgpu'
2import { instancedArray, instanceIndex, deltaTime, Fn, uniform } from 'three/tsl'
3
4// A WebGPU compute shader updating thousands of enemy positions per frame:
5// the kind of GPU-driven simulation that's impractical in plain WebGL.
6const enemyCount = 10000
7const positionBuffer = instancedArray(enemyCount, 'vec3')
8const speed = uniform(2.0)
9
10const updateEnemies = Fn(() => {
11  const pos = positionBuffer.element(instanceIndex)
12  pos.z.subAssign(speed.mul(deltaTime))
13})().compute(enemyCount)
14
15renderer.computeAsync(updateEnemies)