Three.js Quick Start

Project structure

The template is set up like a small, readable app. In the Codevre browser code editor, open:

• /index.html — import map + loads /src/main.js
• /src/main.js — scene wiring + render loop + resize handler
• /src/scene.js — scene background color
• /src/camera.js — camera position and perspective settings
• /src/renderer.js — WebGLRenderer configuration
• /src/cube.js — geometry + material
• /src/lights.js — lighting setup

Step 1 — Confirm the import map

In /index.html, the import map maps three and three/addons/. That means your browser IDE can resolve imports like OrbitControls without any extra setup.

<script type="importmap">
{
  "imports": {
    "three": "https://esm.sh/three@0.182.0",
    "three/examples/": "https://esm.sh/three@0.182.0/examples/",
    "three/addons/": "https://esm.sh/three@0.182.0/addons/"
  }
}
</script>

<script type="module" src="./src/main.js"></script>

Step 2 — Understand /src/main.js

main.js is the entry point. It creates a scene, camera, renderer, controls, adds a cube + lights, and starts the animation loop. This is the core structure you’ll reuse for most projects while coding online.

import { createScene } from './scene.js';
import { createCamera } from './camera.js';
import { createRenderer } from './renderer.js';
import { createCube } from './cube.js';
import { createLights } from './lights.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = createScene();
const camera = createCamera();
const renderer = createRenderer();

const controls = new OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);

const cube = createCube();
scene.add(cube);

const { ambientLight, directionalLight } = createLights();
scene.add(ambientLight, directionalLight);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Quick edits (make it yours)

Change the background

Open /src/scene.js and set a mood. Background choice makes a surprisingly big difference, especially for generative art coding.

import * as THREE from 'three';

export function createScene() {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color('#0b1020');
  return scene;
}

Upgrade the cube material

In /src/cube.js, tweak material properties for a more “designed” look. Small adjustments to roughness and metalness can go a long way in a three js browser editor.

import * as THREE from 'three';

export function createCube() {
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshStandardMaterial({
    color: '#6d7bff',
    roughness: 0.35,
    metalness: 0.2
  });
  return new THREE.Mesh(geometry, material);
}

Make the motion more “generative”

Use time-based animation instead of constant increments. It’s an easy switch that makes motion feel more intentional and alive—perfect for creative coding.

import * as THREE from 'three';

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);

  const t = clock.getElapsedTime();
  cube.rotation.x = t * 0.6;
  cube.rotation.y = Math.sin(t) * 0.9;

  renderer.render(scene, camera);
}

Next steps

From here, try instancing, custom geometry, or shaders to push your generative art coding. This workflow stays fast in a browser editor when your files stay modular.