Skip to content
This repository has been archived by the owner. It is now read-only.


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

New Maintainer Wanted!

I am no longer working on this library (since I am also no longer using it, unfortunately.) If you're interested in taking over, please contact me at Thanks!

Version Version CI Downloads Bundle Size Discord

 __   __    πŸ—»     πŸ—»   β›°
|  |_|  |--.----.-----.-----.          πŸ¦…                                      🌞
|   _|     |   _|  -__|  -__|
|____|__|__|__| |_____|_____|  πŸ—»  🌲🌳      __  🌲  🌳                πŸ¦…
    .-----.|  |.-----.--------.-----.-----.|  |_.-----.
    |  -__||  ||  -__|        |  -__|     ||   _|__ --|
    |_____||__||_____|__|__|__|_____|__|__||____|_____|   🌳🌲 🏑 🌲   🌲🌳  πŸ„   🌲 🌲🌳     🌳

three-elements provides Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. πŸŽ‰

WARNING: It is early days for this library, so please proceed with caution!

  • Directly exposes all Three.js classes as HTML elements (eg. <three-mesh> for THREE.Mesh!)
  • Elements are fully reactive; if their attributes change, this is immediately reflected in the Three.js scene.
  • Optimized rendering: Frames are only rendered when something has changed in the scene, or if your code explicitly requests it.
  • Input event handling: Your 3D scene automatically handles pointer events (clicks, hover, etc). Just hook into the same HTML DOM events you would use in any other web application (onclick et al.)
  • Use it with any framework that emits or modifies HTML DOM, or no framework at all!
  • Works with any version of Three.js, including your own fork if you have one.
  • Built-in templating support lets you reuse objects or entire scenes across your project without the need for any JavaScript component framework.
<!-- Load three-elements -->
<script type="module" src=""></script>

<!-- Create a Three.js game with a default camera. -->
<three-game autorender>
  <three-scene background-color="#444">
    <!-- Lights on! -->
    <three-ambient-light intensity="0.2"></three-ambient-light>
    <three-directional-light intensity="0.8" position="10, 10, 50"></three-directional-light>

    <!-- Spinning dodecahedron! -->
    <three-mesh tick="object.rotation.z += dt">
      <three-mesh-standard-material color="red"></three-mesh-standard-material>




Please get in touch before submitting Pull Requests (ideally, before even implementing them.) At this stage in its development, three-elements still is heavily in flux. If there is something you would like to contribute, please open an issue and describe your suggestion.

If you want to do some hacking, just run yarn dev, which will compile the package in watch mode and spawn a server on localhost:5000 that serves the contents of the examples/ directory.


  • Three.js for being the 3D library for the web.
  • A-Frame for introducing Web Components-powered easy to use 3D and VR.
  • react-three-fiber for its smart approach of mirroring THREE.* classes 1:1 instead of building a library of custom components.


Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. πŸŽ‰








No packages published

Contributors 4