Comments (7)
Would it make sense to enable this by defining new custom elements? Like <three-svg-game>
?
from three-elements.
I think so, but I like your suggestion of having modified elements for <three-game>
rather than child elements that merely modify its behavior. I suppose this would depend on how we deal with custom cameras, etc.
from three-elements.
I'm tinkering with a few ideas for this. The one that feels best so far revolves around providing the various bits and pieces that are currently hardcoded into the monolithic <three-game>
element as separate elements that can be combined as the user needs them, with <three-game>
being reduced to just a "starter configuration" of these.
For example, we'd have <three-ticker>
, <three-webgl-renderer>
, <three-css-renderer>
, etc., and you'd either use them directly (if you need the configurability), or through a <three-game>
, <three-css-game>
etc. template.
One of the downsides of this idea is the potential for namespace collisions. If we introduce a <three-ticker>
element, and a future version of Three.js itself exposes a THREE.Ticker
, we'll have a collision that needs to be resolved somehow.
At the same time, we've been discussing (on Discord) to establish a separate "extras" package that, similar to react-drei for react-three-fiber, provides elements that implement specific functionality (using code from Three.js' examples
), like GLTF loading, Orbit Controls and so on. It's possible that there is a synergy between this and the things discussed above.
from three-elements.
I'm tackling this now. The goal is to allow the user to create instances of these renderers by using their corresponsing <three-*>
tags, eg. <three-css-3d-renderer>
, and having them automatically hook up with the <three-game>
element. (There is probably no need to use the newly introduced DOM CSS selector referencing here, since there will always only ever be a single renderer -- and projects where even this does not apply for some wild reason will most likely not be static HTML projects.)
from three-elements.
PR for the first pass on this: #43
from three-elements.
I've merged #43, which allows customization of renderers that live in the THREE.* namespace. I'm deferring support for CSS/SVG renderers to 0.4.
from three-elements.
In the interest of pushing out a 0.4 release soon, I'm moving this to the next milestone.
from three-elements.
Related Issues (20)
- 'getThreeObjectBySelector' only works on light DOM HOT 1
- Custom camera issue HOT 1
- Directive collision HOT 1
- Projected pointer position isn't recalculated when pointer doesn't move
- BaseElement.setAttribute should track super.setAttribute succes/failure
- Generate TypeDoc and deploy it to website HOT 2
- 🐞 "pointerenter" and "pointerleave" should also be triggered on groups containing the raycasted object HOT 1
- Allow setting of "deg(n)" in numerical attributes
- RFC: Where to go with "ontick" and friends? HOT 10
- Set up CI test matrix to test three-elements against different versions of Three.js HOT 2
- Support bracket-less array syntax for "args"
- Convert repository into monorepo HOT 2
- 0.3 Release Checklist
- [core] Support MutationObserver behind a flag HOT 5
- [core] Similar to `tick` `late-tick` etc., also offer `mount` and `unmount` (or similar) HOT 2
- [core] Provide a way to customize which elements get created HOT 1
- [proxy] Improve proxy typings
- [core] Explore how we can integrate shaders and three-elements HOT 1
- [core] When handling click events, make sure a raycast has been performed this frame
- Restructure repository; create "extras" package
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from three-elements.