3D Functions

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setPixelRatio(pixelRatio)
renderer.setSize(width, height, false)
const scene = new THREE.Scene()
scene.background = new THREE.Color("#15151c")
const camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 100)
camera.position.set(0, 0, 18)
scene.add(new THREE.HemisphereLight("white", "#334", 1.5))
const sun = new THREE.DirectionalLight("white", 2)
sun.position.set(3, 5, 6)
scene.add(sun)

// a star outline, for ExtrudeGeometry
const star = new THREE.Shape()
for (let i = 0; i < 10; i++) {
  const r = i % 2 === 0 ? 0.7 : 0.3
  const a = i * Math.PI / 5 + Math.PI / 2
  if (i === 0) star.moveTo(r * Math.cos(a), r * Math.sin(a))
  else star.lineTo(r * Math.cos(a), r * Math.sin(a))
}
star.closePath()

// a vase outline, for LatheGeometry
const vase = []
for (let i = 0; i < 11; i++) {
  vase.push(new THREE.Vector2(0.25 + 0.3 * Math.sin(i / 2.5), i * 0.14 - 0.7))
}

// a wiggly path, for TubeGeometry
const path = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-0.7, -0.5, 0), new THREE.Vector3(-0.3, 0.6, 0.3),
  new THREE.Vector3(0.3, -0.6, -0.3), new THREE.Vector3(0.7, 0.5, 0),
])

const shapes = [
  new THREE.BoxGeometry(1.1, 1.1, 1.1),
  new THREE.SphereGeometry(0.7, 32, 16),
  new THREE.PlaneGeometry(1.3, 1.3),
  new THREE.CircleGeometry(0.7, 32),
  new THREE.RingGeometry(0.35, 0.7, 32),
  new THREE.CylinderGeometry(0.5, 0.5, 1.3, 32),
  new THREE.ConeGeometry(0.6, 1.3, 32),
  new THREE.CapsuleGeometry(0.4, 0.6, 8, 16),
  new THREE.TorusGeometry(0.5, 0.2, 16, 48),
  new THREE.TorusKnotGeometry(0.45, 0.14, 100, 16),
  new THREE.TetrahedronGeometry(0.8),
  new THREE.OctahedronGeometry(0.75),
  new THREE.DodecahedronGeometry(0.7),
  new THREE.IcosahedronGeometry(0.7),
  new THREE.LatheGeometry(vase, 32),
  new THREE.ExtrudeGeometry(star, { depth: 0.3, bevelEnabled: false }),
  new THREE.TubeGeometry(path, 64, 0.12, 8, false),
]
const meshes = []
for (let i = 0; i < shapes.length; i++) {
  const mesh = new THREE.Mesh(shapes[i], new THREE.MeshStandardMaterial({
    color: `hsl(${i * 21}, 70%, 60%)`, roughness: 0.5, side: THREE.DoubleSide,
  }))
  mesh.position.set((i % 6 - 2.5) * 2.1, 2.3 - Math.floor(i / 6) * 2.3, 0)
  scene.add(mesh)
  meshes.push(mesh)
}

// EdgesGeometry and WireframeGeometry draw lines, not surfaces
const box = new THREE.BoxGeometry(1.1, 1.1, 1.1)
const edges = new THREE.LineSegments(new THREE.EdgesGeometry(box), new THREE.LineBasicMaterial({ color: "white" }))
edges.position.set(2.5 * 2.1, -2.3, 0)
scene.add(edges)
meshes.push(edges)

let t = 0

function update(dt) {
  t += dt
}

function draw() {
  camera.aspect = width / height
  camera.updateProjectionMatrix()
  renderer.setSize(width, height, false)

  for (const m of meshes) {
    m.rotation.x = 0.5
    m.rotation.y = 0.6 + 0.4 * Math.sin(t)     // rock gently, so flat shapes stay in view
  }
  renderer.render(scene, camera)
}

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setPixelRatio(pixelRatio)
renderer.setSize(width, height, false)
const scene = new THREE.Scene()
scene.background = new THREE.Color("#20232b")
const camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 100)
camera.position.set(0, 0, 14)
scene.add(new THREE.AmbientLight("white", 0.3))
const sun = new THREE.DirectionalLight("white", 2.5)
sun.position.set(-3, 4, 5)
scene.add(sun)

const materials = [
  new THREE.MeshBasicMaterial({ color: "tomato" }),
  new THREE.MeshLambertMaterial({ color: "tomato" }),
  new THREE.MeshPhongMaterial({ color: "tomato", shininess: 100 }),
  new THREE.MeshStandardMaterial({ color: "tomato", roughness: 0.3 }),
  new THREE.MeshStandardMaterial({ color: "gold", roughness: 0.3, metalness: 0.6 }),
  new THREE.MeshPhysicalMaterial({ color: "tomato", roughness: 0.4, clearcoat: 1 }),
  new THREE.MeshToonMaterial({ color: "tomato" }),
  new THREE.MeshNormalMaterial(),
  new THREE.MeshStandardMaterial({ color: "tomato", wireframe: true }),
  new THREE.MeshStandardMaterial({ color: "tomato", flatShading: true }),
  new THREE.MeshStandardMaterial({ color: "#311", emissive: "orange", emissiveIntensity: 0.8 }),
  new THREE.MeshStandardMaterial({ color: "deepskyblue", transparent: true, opacity: 0.4 }),
]
const balls = []
for (let i = 0; i < materials.length; i++) {
  const ball = new THREE.Mesh(new THREE.SphereGeometry(0.8, 32, 16), materials[i])
  ball.position.set((i % 4 - 1.5) * 2.1, 2.3 - Math.floor(i / 4) * 2.3, 0)
  scene.add(ball)
  balls.push(ball)
}

function draw() {
  camera.aspect = width / height
  camera.updateProjectionMatrix()
  renderer.setSize(width, height, false)

  for (const b of balls) b.rotation.y += 0.01
  renderer.render(scene, camera)
}

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setPixelRatio(pixelRatio)
renderer.setSize(width, height, false)
renderer.shadowMap.enabled = true
renderer.setScissorTest(true)       // lets us draw into one part of the canvas at a time
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100)
camera.position.set(4, 4, 6)
camera.lookAt(0, 0.6, 0)

function makeScene(light) {
  const scene = new THREE.Scene()
  scene.background = new THREE.Color("#0c0c10")
  const floor = new THREE.Mesh(new THREE.PlaneGeometry(8, 8), new THREE.MeshStandardMaterial({ color: "#999" }))
  floor.rotation.x = -Math.PI / 2
  floor.receiveShadow = true
  scene.add(floor)
  const ball = new THREE.Mesh(new THREE.SphereGeometry(0.8, 32, 16), new THREE.MeshStandardMaterial({ color: "tomato", roughness: 0.4 }))
  ball.position.set(-0.9, 0.8, 0)
  const box = new THREE.Mesh(new THREE.BoxGeometry(1.2, 1.2, 1.2), new THREE.MeshStandardMaterial({ color: "mediumseagreen" }))
  box.position.set(1, 0.6, 0.3)
  for (const thing of [ball, box]) {
    thing.castShadow = true
    scene.add(thing)
  }
  scene.add(light)
  return scene
}

const sun = new THREE.DirectionalLight("white", 3)
sun.position.set(4, 6, 3)
sun.castShadow = true
const bulb = new THREE.PointLight("orange", 30, 0)
bulb.position.set(0, 2.2, 1.5)
bulb.castShadow = true
const spot = new THREE.SpotLight("white", 60, 0, 0.45, 0.4)
spot.position.set(-3, 5, 2)
spot.castShadow = true
const panel = new THREE.RectAreaLight("white", 6, 3, 1.5)
panel.position.set(0, 3, 2.5)
panel.lookAt(0, 0, 0)

const views = [
  makeScene(new THREE.AmbientLight("white", 1)),
  makeScene(new THREE.HemisphereLight("skyblue", "saddlebrown", 2.5)),
  makeScene(sun),
  makeScene(bulb),
  makeScene(spot),
  makeScene(panel),
]

function draw() {
  renderer.setSize(width, height, false)
  const w = width / 3, h = height / 2
  camera.aspect = w / h
  camera.updateProjectionMatrix()
  for (let i = 0; i < views.length; i++) {
    const x = (i % 3) * w
    const y = (1 - Math.floor(i / 3)) * h      // y counts up from the bottom here
    renderer.setViewport(x, y, w, h)
    renderer.setScissor(x, y, w, h)
    renderer.render(views[i], camera)
  }
}

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setPixelRatio(pixelRatio)
renderer.setSize(width, height, false)
const scene = new THREE.Scene()
scene.background = new THREE.Color("#101018")
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100)
camera.position.set(0, 5, 11)
camera.lookAt(0, 0, 0)
scene.add(new THREE.HemisphereLight("white", "#223", 2))

// 400 cubes in one InstancedMesh
const count = 400
const cubes = new THREE.InstancedMesh(new THREE.BoxGeometry(0.25, 0.25, 0.25), new THREE.MeshStandardMaterial(), count)
const place = new THREE.Matrix4()
for (let i = 0; i < count; i++) {
  const a = i * 0.25
  const r = 1 + i * 0.01
  place.setPosition(r * Math.cos(a), i * 0.008 - 1.6, r * Math.sin(a))
  cubes.setMatrixAt(i, place)
  cubes.setColorAt(i, new THREE.Color(`hsl(${i % 360}, 80%, 60%)`))
}
cubes.instanceMatrix.needsUpdate = true
scene.add(cubes)

// a circle as a LineLoop, and a dashed line
const circle = []
for (let i = 0; i < 20; i++) {
  const a = i / 20 * Math.PI * 2
  circle.push(new THREE.Vector3(4 * Math.cos(a), -1.7, 4 * Math.sin(a)))
}
scene.add(new THREE.LineLoop(new THREE.BufferGeometry().setFromPoints(circle), new THREE.LineBasicMaterial({ color: "white" })))
const dashed = new THREE.Line(
  new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, -1.7, 0), new THREE.Vector3(0, 2.5, 0)]),
  new THREE.LineDashedMaterial({ color: "gold", dashSize: 0.2, gapSize: 0.1 }),
)
dashed.computeLineDistances()
scene.add(dashed)

// a label: a THREE.Sprite with a picture drawn on a 2D canvas
const label = document.createElement("canvas")
label.width = 256
label.height = 64
const pen = label.getContext("2d")
pen.fillStyle = "white"
pen.font = "bold 40px sans-serif"
pen.textAlign = "center"
pen.fillText("400 cubes", 128, 46)
const sign = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(label) }))
sign.scale.set(2, 0.5, 1)
sign.position.y = 2.8
scene.add(sign)

function draw() {
  camera.aspect = width / height
  camera.updateProjectionMatrix()
  renderer.setSize(width, height, false)

  cubes.rotation.y += 0.005
  renderer.render(scene, camera)
}

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setPixelRatio(pixelRatio)
renderer.setSize(width, height, false)
const scene = new THREE.Scene()
scene.background = new THREE.Color("#1a1a22")
scene.fog = new THREE.Fog("#1a1a22", 6, 18)
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 100)
camera.position.set(0, 2.5, 5)
camera.lookAt(0, 0.5, 0)
scene.add(new THREE.HemisphereLight("white", "#334", 2.5))

// draw a checkerboard on a small 2D canvas...
const board = document.createElement("canvas")
board.width = 64
board.height = 64
const pen = board.getContext("2d")
for (let row = 0; row < 8; row++) {
  for (let col = 0; col < 8; col++) {
    pen.fillStyle = (row + col) % 2 === 0 ? "#eee" : "#447"
    pen.fillRect(col * 8, row * 8, 8, 8)
  }
}

// ...and use it as a repeating floor texture
const floorTexture = new THREE.CanvasTexture(board)
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping
floorTexture.repeat.set(6, 6)
floorTexture.magFilter = THREE.NearestFilter
const floor = new THREE.Mesh(new THREE.PlaneGeometry(30, 30), new THREE.MeshStandardMaterial({ map: floorTexture }))
floor.rotation.x = -Math.PI / 2
scene.add(floor)

// a die: one canvas per face
const faces = []
for (let n = 1; n <= 6; n++) {
  const face = document.createElement("canvas")
  face.width = 128
  face.height = 128
  const p = face.getContext("2d")
  p.fillStyle = "white"
  p.fillRect(0, 0, 128, 128)
  p.fillStyle = "crimson"
  p.font = "bold 90px sans-serif"
  p.textAlign = "center"
  p.textBaseline = "middle"
  p.fillText(String(n), 64, 70)
  faces.push(new THREE.MeshStandardMaterial({ map: new THREE.CanvasTexture(face) }))
}
const die = new THREE.Mesh(new THREE.BoxGeometry(1.2, 1.2, 1.2), faces)
die.position.y = 0.9
scene.add(die)

function draw() {
  camera.aspect = width / height
  camera.updateProjectionMatrix()
  renderer.setSize(width, height, false)

  die.rotation.x += 0.007
  die.rotation.y += 0.01
  renderer.render(scene, camera)
}