Embed a div into a scene?

Questions
1

It is possible to embed a div with text and images inside a plane scene?

Thanks

2

If you just want to overlay HTML elements over a scene, you can do this with some CSS:

For more advanced scenarios (e.g. link DOM-based elements with 3D objects), use one of the CSS based renderers. Read the docs for more information:

https://threejs.org/docs/index.html#examples/renderers/CSS3DRenderer
https://threejs.org/docs/index.html#examples/renderers/CSS2DRenderer

1 Like
3

I need to embed something like this but positioned into a 3D photsphere scene

A card with a image and a text distributed

It is possible to do this?

4

I guess this should be doable with CSS3DRenderer.

1 Like
5

One idiot question, to use CSS3D obj I must to use CSS3DRenderer? Can not use WebGLRenderer?

I have founded this perfect example but uses CSS3DRenderer.

Currently I am trying to use this into a sphere scene with a stereoeffect and I think that I need to use WebGlRenderer.

If I create a simple red div with a fixed height and width with and then use WebGLrenderer it not shows, this is my code

var element = document.createElement( 'div' );
            /*element.className = 'element';*/
            /*element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';*/
            element.style.backgroundColor = 'rgb(255, 0, 0)';
            element.style.width = '150px';
            element.style.height = '150px';

            var object = new THREE.CSS3DObject( element );
            object.position.x = positions[i][0]
            object.position.y = positions[i][1]
            object.position.z = positions[i][2]
            object.lookAt(camera.position);
            scene.add( object );

Sorry but I am new on this, If i say some impossible thing

6

Yes. CSS3DRenderer parses the scene graph and looks for objects of type THREE.CSS3DObject and THREE.CSS3DSprite.

2 Likes
7

Thanks for your time

1 Like