Three.js icosahedron

← back to next-sketch
Same scene as the README's <ThreeSketch /> snippet, driven by a vanilla port of useThreeSketch.
View the equivalent next-sketch (React) code
import { ThreeSketch } from 'next-sketch/three';
import * as THREE from 'three';

export default function Icosahedron() {
  return (
    <ThreeSketch
      style={{ width: '100%', height: 400 }}
      setup={({ scene }) => {
        scene.add(new THREE.AmbientLight(0xffffff, 0.6));
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(3, 4, 5);
        scene.add(light);

        const mesh = new THREE.Mesh(
          new THREE.IcosahedronGeometry(1.5, 1),
          new THREE.MeshStandardMaterial({ color: '#6366f1' }),
        );
        scene.add(mesh);
      }}
      draw={({ scene, dt }) => {
        const mesh = scene.children[2];
        mesh.rotation.y += dt;
        mesh.rotation.x += dt * 0.4;
      }}
    />
  );
}