Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hmans/three-elements

Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉
https://github.com/hmans/three-elements

3d-scene custom-elements dom html-elements threejs web-components webgl

Last synced: 1 day ago
JSON representation

Web Components-powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉

Host: GitHub
URL: https://github.com/hmans/three-elements
Owner: hmans
License: mit
Archived: true
Created: 2021-01-07T18:45:00.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-04-04T06:39:02.000Z (over 2 years ago)
Last Synced: 2024-09-24T22:16:32.965Z (2 days ago)
Topics: 3d-scene, custom-elements, dom, html-elements, threejs, web-components, webgl
Language: TypeScript
Homepage: https://three-elements.hmans.co
Size: 5.46 MB
Stars: 397
Watchers: 10
Forks: 14
Open Issues: 19
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md

Awesome Lists containing this project

awesome-list - three-elements - powered custom HTML elements for building Three.js-powered games and interactive experiences. 🎉 | hmans | 361 | (TypeScript)

README

        ## 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 [email protected]. Thanks!

----

----

----

[![Version](https://img.shields.io/npm/v/three-elements)](https://www.npmjs.com/package/three-elements)

[![Version](https://img.shields.io/npm/v/three-elements/next?color=red)](https://www.npmjs.com/package/three-elements/v/next)

[![CI](https://github.com/hmans/three-elements/workflows/CI/badge.svg)](https://github.com/hmans/three-elements/actions?query=workflow%3ACI)

[![Downloads](https://img.shields.io/npm/dt/three-elements.svg)](https://www.npmjs.com/package/three-elements)

[![Bundle Size](https://img.shields.io/bundlephobia/min/three-elements?label=bundle%20size)](https://bundlephobia.com/result?p=three-elements)

[![Discord](https://img.shields.io/discord/766340976125542430?color=hotpink&label=discord)](https://discord.gg/ybuUjFM)

```

 __   __    🗻     🗻   ⛰

|  |_|  |--.----.-----.-----.          🦅                                      🌞

|   _|     |   _|  -__|  -__|

|____|__|__|__| |_____|_____|  🗻  🌲🌳      __  🌲  🌳                🦅

    .-----.|  |.-----.--------.-----.-----.|  |_.-----.

    |  -__||  ||  -__|        |  -__|     ||   _|__ --|

    |_____||__||_____|__|__|__|_____|__|__||____|_____|   🌳🌲 🏡 🌲   🌲🌳  🐄   🌲 🌲🌳     🌳

```

### **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. `` 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.

```html

  

    

    

    

    

    

      

      

    

  

```

## DOCUMENTATION

- [**Documentation**](https://three-elements.hmans.co) & [**Guide**](https://three-elements.hmans.co/guide/)

- [API Reference](https://api.three-elements.hmans.co/)

- [Changelog](./CHANGELOG.md)

- [Announcement blog post](https://hmans.co/posts/2021-01-18-three-elements/)

## COMMUNITY

- [Discord] for chat & help

- [Twitter](https://twitter.com/hmans) for news

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

[react-three-fiber]: https://github.com/pmndrs/react-three-fiber

[trinity]: https://github.com/hmans/trinity

[a-frame]: https://aframe.io/

[three.js]: https://threejs.org/

[custom elements]: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

[discord]: https://discord.gg/ybuUjFM