#How to place a HTML element onto a side of a cube mesh ?

46 messages · Page 1 of 1 (latest)

fallen narwhal
#

I thought that I have to access the faces of the cube mesh and then add a CSS2DObject to them, but it doesnt work.

Here is my code:

const cssRenderer = new CSS2DRenderer();
document.body.appendChild(cssRenderer.domElement);





const indices = smallCubeGeometry.index.array;
const vertices = smallCubeGeometry.attributes.position.array;

const faces = [];
for (let i = 0; i < indices.length; i += 3) {
  const a = indices[i];
  const b = indices[i + 1];
  const c = indices[i + 2];

  const face = {
    a: new THREE.Vector3().fromArray(vertices, a * 3),
    b: new THREE.Vector3().fromArray(vertices, b * 3),
    c: new THREE.Vector3().fromArray(vertices, c * 3),
  };
  faces.push(face);
}




const div = document.createElement('div');
div.textContent = 'Hello Worlds';

const label = new CSS2DObject(div);
wintry junco
#

CSS2DObject and CSS3dRenderer in general are "supplemental", as I understand it, not directly integrated with ThreeJS; they render to their own context. I don't think you can do things like depth occlusion with them; if you look at the molecules example on the Three home page you can see that the same scene is passed to the WebGLRenderer (which handles all of the 3d objects) and the CSS2DRenderer, which uses the transform information to position the div objects with the atomic symbol text on the page. Both renderers ignore objects they don't recognize, so they'll cheerfully walk the same tree.

fallen narwhal
#

i just want a scene with a cube that has different pages on each of its sides

wintry junco
fallen narwhal
fleet wigeon
#

Cc/ @viscid coyote I remember there was a demo of someone from pmndrs on Twitter that combined HTML from drei and CSS masking - where did that do 👀 ?

viscid coyote
#

the technique is explained here https://twitter.com/0xca0a/status/1601212977684054016 it cuts a hole into the canvas with a blend mode and the html is behind the page. this creates a perfect illusion and it ow behaves like part of the scene. this comes at no extra cost, it doesn't require raycasting.

☄︎ (@0xca0a)

@focru_ino it's better to understand when you remove the html for a moment, then you see the "hole". it's not really a hole but it cuts out the mesh behind and the blend mode allows it to receive reflections and shadows, which is the craziest part.

Twitter ·
#

@fallen narwhal imo neither css2d nor css3d can occlude, and all custom occlusion forks i have seen use expensive raycasting, the object just disappears if something hits the ray towards the camera. i think that class is not usable for what you want, but you might be able to port the code in drei. or best just use it.

fallen narwhal
fallen narwhal
fallen narwhal
#

also this doesnt seem nice

#

could somebody please give me a little hint on how to proceed ?

wintry junco
#

It looks like you've added an invalid object to your scene somehow. Do you have source for people to look at?

viscid coyote
# 
<mesh>
  <boxGoemetry />
  <Html position={[0,0,0.5]} transform occlude="blending">hello world:skull:</Html>
</mesh>
fallen narwhal
# 
    <group ref={group} {...props} dispose={null}>

      <mesh position={[0, 0, 0]}>
      <Html className="content"  transform occlude>
        <div className="wrapper" onPointerDown={(e) => e.stopPropagation()}>
          <p>Hello</p>
        </div>
      </Html>


        {/* <boxGeometry args={[10, 1, 10]} /> */}
        <meshStandardMaterial color={'#6f6f00'} />
      </mesh>
    </group>
viscid coyote
#

sorry refresh again, i messed up events

fallen narwhal
#

rn im trying this

viscid coyote
#

its occlude="blending" if you want the masking mentioned above. without it html will always be on top of the scene, it won't ever be behind other meshes.

fallen narwhal
#

thank you so much !

#

now ill just have to position the html properly, right ?

viscid coyote
#

you can rotate it and position it correctly, until it fits the cube

fallen narwhal
#

coool

viscid coyote
#

<Html rotation={[Math.PI / 2,0,0]} or something like that, until its flat

#

im bad in three dimensional thinking, you need to hit the correct axis

fallen narwhal
#

yeah me too, ill just mash buttons until stuff is nice

viscid coyote
fallen narwhal
#

how ?

viscid coyote
#

thats the environment map

fallen narwhal
viscid coyote
#

it can reflect like any other mesh can

fallen narwhal
#

thx !

#

ohhhh

fallen narwhal