tostada

Interactive Demo Example

This is an example of the split-screen demo system. As you scroll through this content, the 3D scene on the right updates to match the current section.

The scene detection works with:

  • data-scene attributes on any element
  • Heading elements with id attributes (like <h2 id="basic">)
  • Anchor tags with name attributes (like <a name="basic">)

Step 1: Basic Cube

We start with a simple rotating cube. This demonstrates the basic setup of a Threlte scene with orbit controls.

import { T, useTask } from '@threlte/core';

let mesh;

useTask((delta) => {
  if (mesh) {
    mesh.rotation.x += delta * 0.5;
    mesh.rotation.y += delta * 0.3;
  }
});

The useTask hook runs every frame, allowing us to animate the cube's rotation smoothly.

Step 2: Adding Color and Movement

Now we've changed the color to magenta and added a bouncing animation using a sine wave.

useTask((delta) => {
  t += delta;
  if (mesh) {
    mesh.rotation.x += delta * 0.5;
    mesh.rotation.y += delta * 0.3;
    mesh.position.y = Math.sin(t * 2) * 0.5;
  }
});

We also added a colored point light to create more interesting lighting effects.

Key Concepts

  • Delta time — Ensures consistent animation speed across different frame rates
  • Sine waves — Create smooth, periodic motion
  • Point lights — Colored lights that emit from a specific position

Step 3: Multiple Shapes

Finally, we have multiple shapes with different materials and animations. Each shape demonstrates a different geometry type:

  • Box — Rotating cube in gold
  • Sphere — Bouncing metallic sphere in teal
  • Torus — Spinning ring in magenta

Scene Composition

Building complex scenes is just a matter of composing multiple meshes together. Each mesh can have its own geometry, material, and animation logic.

<T.Mesh position={[-2, 0, 0]}>
  <T.BoxGeometry args={[1, 1, 1]} />
  <T.MeshStandardMaterial color="#f5a623" />
</T.Mesh>

<T.Mesh position={[0, 1, 0]}>
  <T.SphereGeometry args={[0.6, 32, 32]} />
  <T.MeshStandardMaterial
    color="#00d4aa"
    metalness={0.7}
    roughness={0.2}
  />
</T.Mesh>

Try it yourself

Click and drag in the scene to rotate the camera. Use scroll wheel to zoom in and out. The orbit controls are enabled for all these demos.

Loading scene...