Open jugglingcats opened 8 years ago
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 :)
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
@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 ;)
@Colmea that looks very interesting -- thanks for sharing!
@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.
@brysonandrew That's exactly what the React-three-renderer-html3d is doing :D
<HTML3D>
component is actually a THREE.CSS3DObject
@Colmea Yes, I tried it out. Works very well. Thank you for making it.
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.
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).
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?