HTML element (input form) live to threejs

Hey,

I want a input form in a 3d cube object. It should act like a normal HTML. Thanks for help!

What options are available?

Example:
3D:
image

2D:
image

Have you tried using CSS3DRenderer for this use case?

https://threejs.org/examples/css3d_youtube

css3drenderer. but it can be hard to use because you’ll be dealing with two separate scenes. in react this would be trivial and you’d have the ability to use real world components, for instance antd forms: r3f basic demo (forked) - CodeSandbox

the problem remains that HTML is always in front. your cube has 6 faces, they’ll all overlay one another unless you make the background opaque. that can be fixed with raycasting.

2 Likes

I have this problem because i want to put a shipping label on a 3d package. And there then as an example would like to change the first name on the 3d model.

related

How to set the options correctly in the select element? (CSS3DObject)
Do we need the intermediate object. (.css3dObject.)
MixedHtmlCssWebGl
GradientsMaterialColor

I use the CSS3D renderer in this example SpaceX control room (threeml.org). However, I am changing the z-index for the i-frame that is in the forefront.

Made a small example. So it is possible, but the CSS3D appears quite sensible to the css used.
Cube input (threeml.org)

Wow, thank you very much. Would be cool if you upload the code to codepen or something so I can use it. I am very grateful for what nice people there are on this forum.

I used a custom library which allows a declarative way to create the panels in ThreeJS, so I could quickly try your proposal.
The actual work is done in the handleHtmlPlaneGeometry() function in the threeml.js library ( threemlorg/threeml: Serviceable 3D (github.com), but this function handles multiple usages of the CSS3D object, so might be somewhat complex to evaluate.

This article does some basic explanation: Mixing HTML pages inside your WebGL - Learning Three.js

You just need 6 of these panels, position and orient them correctly, and individually link them to separate html forms… Of course you can use a group geometry as parent to position and orient the complete cube.

1 Like