Is it possible to use CSS3DObject with react-three-renderer?

[jugglingcats]

trafficstars

I would like to have a 3D cube with text on each face, and also be able to detect mouse click/drag on each face individually. I've seen a procedural example using CSS3DObject, which admittedly is a Three example rather than core code. Is there a general approach to adding this additional support for 3rd party classes extending Object3D to react-three-renderer?

[toxicFork]

You could user a texture for the text, or use a textGeometry, or if you link me the example I can provide advice on how to reproduce it with react-three-renderer :)

[jugglingcats]

Thanks for the quick reply! TextGeometry might work but the example I saw is also quite nice (in my naive opinion):

https://github.com/nraynaud/webgcode/blob/gh-pages/webapp/cnc/ui/cubeManipulator.js

[Colmea]

@jugglingcats maybe you'll find something interesting in my react-three plugin: React-three-renderer-html3d (an example on how to use it: example here

Basically, it uses an HTML element and the CSS3D feature to have something like this:

<HTML3D
    position={new THREE.Vector3()}
    rotation={new THREE.Euler()}
>
    <div>my custom HTML</div>
</HTML3D>

I'm not sure it's exactly what you're looking for, but maybe it can help ;)

[jugglingcats]

@Colmea that looks very interesting -- thanks for sharing!

[brysonandrew]

@jugglingcats This might help. Based off this pen - https://codepen.io/nireno/pen/giafd

    componentDidMount() {
        const { width, height } = this.props;

        this.scene.add(this.camera);
        let textContent= document.createElement("div");
        textContent.className = 'textContent';
        textContent.textContent = "Hello React Three Renderer.";
        this.object = new THREE.CSS3DObject( textContent);

        this.scene.add(this.object);

        this.renderer = new THREE.CSS3DRenderer();
        this.renderer.setSize(width, height);

        document.body.appendChild(this.renderer.domElement);
        this.renderer.render(this.scene, this.camera);

        this.addEffects();
    }
...
    getCamera(el) {
        this.camera = el;
    }
...
    getScene(el) {
        this.scene = el;
    }
...
                <scene
                    ref={(el) => this.getScene(el)}
                >
                    <perspectiveCamera
                        ref={(el) => this.getCamera(el)}
                        name="camera"
                        fov={50}
                        aspect={width / height}
                        position={this.cameraPosition}
                    />
...

Not a full solution but for sure a starting point.

Let me know if you have any questions.

[Colmea]

@brysonandrew That's exactly what the React-three-renderer-html3d is doing :D

<HTML3D> component is actually a THREE.CSS3DObject

[brysonandrew]

@Colmea Yes, I tried it out. Works very well. Thank you for making it.

[Matkezi]

I have some issues using the React-three-renderer-html3d, "addComponentAsRefTo Only a ReactOwner can have refs" any news about it? I'm trying to implement THREE.js component CSS3 from scratch now. All I really need is some way to render common div element from inside React3 without giving me error that the is no constructor for it.

[Colmea]

Indeed, react is still a dependency and not a peerdependency, my bad.

Please feel free to create an issue in the proper repository (https://github.com/Colmea/react-three-renderer-html3d).