Three.js examples

setBackground("#081225");
setCamera([4, 3, 6]);

const geometry = new THREE.BoxGeometry(1.6, 1.6, 1.6);
const material = new THREE.MeshStandardMaterial({
  color: "#38bdf8",
  metalness: 0.25,
  roughness: 0.35,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const edges = new THREE.LineSegments(
  new THREE.EdgesGeometry(geometry),
  new THREE.LineBasicMaterial({ color: "#e2e8f0" })
);
scene.add(edges);

onFrame(({ elapsedTime }) => {
  cube.rotation.x = elapsedTime * 0.7;
  cube.rotation.y = elapsedTime * 1.1;
  edges.rotation.copy(cube.rotation);
});

setBackground("#020617");
setCamera([0, 14, 24], [0, 2, 0]);

const sun = new THREE.Mesh(
  new THREE.SphereGeometry(2.2, 48, 48),
  new THREE.MeshStandardMaterial({
    color: "#facc15",
    emissive: "#f59e0b",
    emissiveIntensity: 1.4,
  })
);

const orbitPivot = new THREE.Group();
const planet = new THREE.Mesh(
  new THREE.SphereGeometry(0.85, 32, 32),
  new THREE.MeshStandardMaterial({
    color: "#38bdf8",
    metalness: 0.1,
    roughness: 0.75,
  })
);
planet.position.x = 7;

const moonPivot = new THREE.Group();
moonPivot.position.x = 7;
const moon = new THREE.Mesh(
  new THREE.SphereGeometry(0.28, 24, 24),
  new THREE.MeshStandardMaterial({ color: "#e2e8f0" })
);
moon.position.x = 1.6;

const orbitRing = new THREE.LineLoop(
  new THREE.BufferGeometry().setFromPoints(
    Array.from({ length: 100 }, (_, index) => {
      const angle = (index / 100) * Math.PI * 2;
      return new THREE.Vector3(Math.cos(angle) * 7, 0, Math.sin(angle) * 7);
    })
  ),
  new THREE.LineBasicMaterial({ color: "#334155" })
);

moonPivot.add(moon);
orbitPivot.add(planet);
orbitPivot.add(moonPivot);
scene.add(sun, orbitPivot, orbitRing);

onFrame(({ elapsedTime }) => {
  orbitPivot.rotation.y = elapsedTime * 0.45;
  planet.rotation.y = elapsedTime * 1.8;
  moonPivot.rotation.y = elapsedTime * 2.5;
});

setBackground("#02030f");
setCamera([0, 0, 18]);

const particleCount = 1800;
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);

for (let i = 0; i < particleCount; i += 1) {
  const stride = i * 3;
  const radius = 5 + Math.random() * 8;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);

  positions[stride] = radius * Math.sin(phi) * Math.cos(theta);
  positions[stride + 1] = radius * Math.cos(phi);
  positions[stride + 2] = radius * Math.sin(phi) * Math.sin(theta);

  const color = new THREE.Color().setHSL(0.55 + Math.random() * 0.18, 0.85, 0.6);
  colors[stride] = color.r;
  colors[stride + 1] = color.g;
  colors[stride + 2] = color.b;
}

const geometry = new THREE.BufferGeometry();
geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

const material = new THREE.PointsMaterial({
  size: 0.12,
  vertexColors: true,
  transparent: true,
  opacity: 0.9,
});

const points = new THREE.Points(geometry, material);
scene.add(points);

onFrame(({ elapsedTime }) => {
  points.rotation.y = elapsedTime * 0.08;
  points.rotation.x = Math.sin(elapsedTime * 0.2) * 0.25;
});

setBackground("#111827");
setCamera([0, 5, 12], [0, 1.2, 0]);

const shapes = [
  new THREE.SphereGeometry(0.8, 48, 48),
  new THREE.TorusKnotGeometry(0.55, 0.2, 128, 24),
  new THREE.IcosahedronGeometry(0.95, 0),
];

const materials = [
  new THREE.MeshStandardMaterial({
    color: "#f97316",
    roughness: 0.15,
    metalness: 0.85,
  }),
  new THREE.MeshStandardMaterial({
    color: "#22c55e",
    roughness: 0.9,
    metalness: 0.05,
  }),
  new THREE.MeshNormalMaterial(),
];

const meshes = shapes.map((geometry, index) => {
  const mesh = new THREE.Mesh(geometry, materials[index]);
  mesh.position.set((index - 1) * 3, 1.2, 0);
  scene.add(mesh);
  return mesh;
});

const floor = new THREE.Mesh(
  new THREE.PlaneGeometry(18, 18),
  new THREE.ShadowMaterial({ opacity: 0.18 })
);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -0.4;
scene.add(floor);

onFrame(({ elapsedTime }) => {
  meshes.forEach((mesh, index) => {
    mesh.rotation.x = elapsedTime * (0.45 + index * 0.1);
    mesh.rotation.y = elapsedTime * (0.7 + index * 0.18);
  });
});