three.js within react-juce

[chikashimiyama]

Hi. First of all, thank you for the great library. react-juce could make the collaboration between devs and designers much easier!

My question is about three.js

https://threejs.org/

I would like to use three.js on react-juce for my 3D audio visualizer based on WebGL. Would it be technically possible?
I just quickly tried by myself and got a syntax error when I just import three.js to App.js ...

[nick-thompson]

Hi @chikashimiyama great question, and thank you!

It's unlikely that threejs will work with React-juce without some significant effort. My understanding is that threejs has a pretty large dependency on the DOM and Web APIs like webgl, and since react-juce runs in just an embedded js interpreter, there is no support for Web APIs like that.

I could imagine that the best path here would be to try to use something like Three.js's built-in SVG renderer:

• https://threejs.org/docs/index.html#examples/en/renderers/SVGRenderer
• https://github.com/mrdoob/three.js/blob/master/examples/svg_lines.html

But you can see even in that example, the SVGRenderer itself has a domElement which is a real DOM Node, so even the SVGRenderer is coupled to the Web APIs. If the SVGRenderer can be decoupled from the dom right there, perhaps this is a viable path forward for integration into react-juce (since react-juce can render SVGs just fine).

If you're interested in digging into this, I'd be curious to hear what you find!

[chikashimiyama]

Thank you for your reply. It's really helpful for a beginner in the field of JS and web technology like me.