\
**Category:** Questions\
**Tags:** css3d, html\
**Created:** [March 23, 2021, 1:23pm UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673 "2021-03-23T13:23:10Z")\
**Posts on this page:** 9\
**Page:** 1
**Author:**  [@Marti\_king](https://discourse.threejs.org/u/Marti_king)\
**Post date:** [March 23, 2021, 1:23pm UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/1 "2021-03-23T13:23:11Z")
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:
2D:
---
**Author:**  [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 23, 2021, 1:44pm UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/2 "2021-03-23T13:44:25Z")
Have you tried using `CSS3DRenderer` for this use case?
[https://threejs.org/examples/css3d\_youtube](https://threejs.org/examples/css3d_youtube)
---
**Author:**  [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 23, 2021, 2:04pm UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/3 "2021-03-23T14:04:46Z")
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](https://codesandbox.io/s/r3f-basic-demo-forked-krfol?file=/src/App.js)
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.
---
**Author:**  [@Marti\_king](https://discourse.threejs.org/u/Marti_king)\
**Post date:** [March 23, 2021, 2:52pm UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/4 "2021-03-23T14:52:51Z")
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.
---
**Author:**  [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [March 23, 2021, 5:02pm UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/5 "2021-03-23T17:02:07Z")
related
[How to set the options correctly in the select element? (CSS3DObject)](https://discourse.threejs.org/t/how-to-set-the-options-correctly-in-the-select-element-css3dobject/20365)
[Do we need the intermediate object. (.css3dObject.)](https://discourse.threejs.org/t/do-we-need-the-intermediate-object-css3dobject/20313)
[MixedHtmlCssWebGl](https://hofk.de/main/threejs/MixedHtmlCssWebGl/MixedHtmlCssWebGl.html)
[GradientsMaterialColor](https://hofk.de/main/discourse.threejs/2020/GradientsMaterialColor/GradientsMaterialColor.html)
---
**Author:**  [@awonnink](https://discourse.threejs.org/u/awonnink)\
**Post date:** [March 24, 2021, 6:00pm UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/6 "2021-03-24T18:00:35Z")
I use the CSS3D renderer in this example [SpaceX control room (threeml.org)](http://threeml.org/ex/space/). However, I am changing the z-index for the i-frame that is in the forefront.
---
**Author:**  [@awonnink](https://discourse.threejs.org/u/awonnink)\
**Post date:** [March 24, 2021, 10:45pm UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/7 "2021-03-24T22:45:24Z")
Made a small example. So it is possible, but the CSS3D appears quite sensible to the css used.
[Cube input (threeml.org)](http://threeml.org/ex/sqf/)
---
**Author:**  [@Marti\_king](https://discourse.threejs.org/u/Marti_king)\
**Post date:** [March 25, 2021, 12:16am UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/8 "2021-03-25T00:16:10Z")
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.
---
**Author:**  [@awonnink](https://discourse.threejs.org/u/awonnink)\
**Post date:** [March 25, 2021, 8:30am UTC](https://discourse.threejs.org/t/html-element-input-form-live-to-threejs/24673/9 "2021-03-25T08:30:07Z")
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)](https://github.com/threemlorg/threeml), 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](http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/)
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.