hero

three-elements

Web Components for Three.js! 🎉

Read the Guide →

<three-game autorender>
  <three-scene background-color="#eee">
    <!-- Spinning dodecahedron -->
    <three-mesh
      scale="4"
      cast-shadow
      tick="object.rotation.x = object.rotation.y += 0.01;
            object.scale.setScalar(4 + Math.cos(Date.now() / 700) * 0.6)"
    >
      <three-dodecahedron-buffer-geometry></three-dodecahedron-buffer-geometry>
      <three-mesh-standard-material
        color="hotpink"
        metalness="0.5"
        roughness="0.5"
      ></three-mesh-standard-material>
    </three-mesh>

    <!-- A floor. We like shadows. Shadows good! -->
    <three-mesh rotation.x="-90deg" position.y="-7" receive-shadow>
      <three-plane-buffer-geometry
        args="1000, 1000, 32"
      ></three-plane-buffer-geometry>
      <three-mesh-standard-material color="#888"></three-mesh-standard-material>
    </three-mesh>

    <!-- Orbit controls, because they're cool! -->
    <three-orbit-controls></three-orbit-controls>

    <!-- Lights -->
    <three-ambient-light intensity="0.3"></three-ambient-light>
    <three-directional-light
      intensity="0.8"
      position="40, 40, 20"
      cast-shadow
    ></three-directional-light>
  </three-scene>
</three-game>