Coder Social home page Coder Social logo

Support Custom Renderers about three-elements HOT 7 OPEN

hmans avatar hmans commented on July 20, 2024
Support Custom Renderers

from three-elements.

Comments (7)

RangerMauve avatar RangerMauve commented on July 20, 2024

Would it make sense to enable this by defining new custom elements? Like <three-svg-game>?

from three-elements.

CodyJasonBennett avatar CodyJasonBennett commented on July 20, 2024

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.

hmans avatar hmans commented on July 20, 2024

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.

hmans avatar hmans commented on July 20, 2024

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.

hmans avatar hmans commented on July 20, 2024

PR for the first pass on this: #43

from three-elements.

hmans avatar hmans commented on July 20, 2024

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.

hmans avatar hmans commented on July 20, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

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

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.