Skip to content
This repository has been archived by the owner on Apr 4, 2022. It is now read-only.
/ three-elements Public archive

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

License

Notifications You must be signed in to change notification settings

hmans/three-elements

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

  •  
  •  
  •  
  •