I’m a developer that Is looking to make an app with a 3d viewer (consuming apis, etc). I’m working with react-js and I was able to make display and manipulate pretty well, but now I port the javascript files to typescript and I have some troubles (The controls didn’t work, assets don’t loaded on screen). I tested threejs and typescript (in node and without react) and I had no troubles, as well with react and threejs but no typescript.
Do any have some experience with using threejs with popular frameworks (Angular, react). It’s recommended to use threejs like this or is better to make viewers/editors without them.
P.S: I’m gonna need to work with other folks on this, so the idea of use a framework or typescript is for working with others in the same app without killing each other :). Making the viewer as a component is the idea, and angular or react are component based, that is why I’m thinking of them
Other than that example, most frameworks are designed to map components to HTML elements. If your application is mostly WebGL / 3D content, those components won’t map easily to parts of the three.js scene graph. That doesn’t make them incompatible, but I don’t think you’ll get a lot of benefit out of the framework unless you have enough traditional HTML/CSS/JS stuff outside of WebGL (say, the 3D viewport is part of a larger app) to require it.
You could also consider something like ECSY for a DOM-agnostic approach to components.
If you use react r3f should drive threejs. This allows threejs to become part of the whole, in that now you don’t have two clashing things but one unified, declarative workprocess where you can apply generic libraries and packages to your 3d content: redux, state, animation, gesture, etc. As well as all the other benefits: https://twitter.com/0xca0a/status/1282999626782650368
I didn’t know of react-three-fiber, and it looks pretty cool. But I managed to use react just fine directly with threejs. Basically I have my own MapCanvas component that contains a Canvas in the JSX, and it does in componentDidMount what most pure js examples do in init(). The only trick was to get a ref to the canvas in the jsx side with
and then create the renderer in componentDidMount with
renderer = new THREE.WebGLRenderer({ canvas: this.canvasRef.current, antialias: true });
That way the render is bound to the canvas in your JSX. The rest is just detecting changes in state/props/context in your component and translating those into threejs function calls. I am heavily leaning on context and componentDidUpdate to detect changes in my UI and translate those into threejs operations. Currently I am still working on a branch of my project, but once I have something half decent finished, I’d be happy to share it.
Thanks for the answers! . I decided to do a little app with node-threejs-typescript as a sandbox for this project I’m working on. This way I can see if an error is caused by the framework or I’m doing something wrong on at a three.js level.
My experience so far is that experimenting and developing with three.js in react can be a little overwhelming, sometimes is react the issue, sometimes you do something wrong on three.js. For testing will be a good choice too, to separate testing targets.
I think later with an stable version of the 3d viewing code I’ll create a component in react
. I decided to do a little app with node-threejs-typescript as a sandbox for this project I’m working on. This way I can see if an error is caused by the framework or I’m doing something wrong on at a three.js level.