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

hmans/three-elements

main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
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 hendrik@mans.de. 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="https://jspm.dev/three-elements"></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-dodecahedron-buffer-geometry></three-dodecahedron-buffer-geometry>
      <three-mesh-standard-material color="red"></three-mesh-standard-material>
    </three-mesh>
  </three-scene>
</three-game>

DOCUMENTATION

COMMUNITY

CONTRIBUTING

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.

THANKS

  • 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.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •