♵ CSS3DRenderer documentation with Three.js

Questions
1

Nothing to fix I have everything working so far.
image

Mainly need some education as to how to think about the CSS3DRenderer to generate the text in the bottle top/right

In Three.js can the CSS3DRenderer extrude text as 3D while using plain CSS?

My first thought is to change the text to SVG. Many examples show SVGLoader is using SVG path and not SVG text. Is it not possible to use SVG text with three.js to extrude in 3D?:

<svg width="" height="">
  <text id="svg-container" x="30" y="30" xml:space="preserve">
    <tspan text-anchor="start">
      <tspan x="10" y="26.2" style="fill: rgb(0, 0, 0); 
      font-size: 13; font-family: sans-serif;">hi</tspan>
    </tspan>
  </text>
< /svg >

Thanks for the help!

2

Um, i don’t think that’s possible. All elements in a CSS based 3D scene are flat so a real 3D extrusion of your text won’t work. You might want to use WebGLRenderer and TextGeometry for this task:

https://threejs.org/examples/webgl_geometry_text.html

3

Can you point me to documentation/discussion on how the CSS3DRenderer is different from the WebGLRenderer in respect to generating 3D?

4

AFAIK, there is no official documentation. Try to search at github for issues and PRs about CSS3DRenderer. Maybe the related discussions give you some insight.

5

Could we talk about flat? I’m assuming you are referring to anything that can sit in a web page is considered flat: text, images, video, Three.js WebGLRenderer sitting inside CSS3DRenderer.

The CSS3DRenderer is possibly considered a “viewer” than a way to do 3D rendering as you can do with the WebGLRenderer eventually to export out as an OBJ/STL?

Found discussions on the Three.js github:

Three.js CSS open issues
Three.js CSS closed issues

Oh wow I see you in the discussions over here!
Thanks for answering to my prior questions!

6

From mr.doob

Documentation for Css3 renderer
The CSS3DRenderer basically reuses the scene graph (compute matrices) but can’t handle geometries nor materials.

From Alexandra Etienne and Jerome Etienne

HTML & WebGL
This article is the key to understanding how CSS3DRenderer is used with WebGL.

7

So now we should help those with the thinking of what the CSS3DRenderer can be used for:

Possible:

  • 2D game interface, example Atari PAC-MAN or Atari Breakout
  • Labels = showing the text loading … as you are trying to download the rest of the resources for your web app and/or experiment
  • Displaying a web page
  • HUD display
  • What else can you think of?

Not possible

  • Creating 3D geometry when using the WebGLRenderer
  • No materials can be add as the WebGLRenderer can
  • What else can you think of?
8

Many things you’ve listed in the Possible section can also achieved without CSS3DRenderer just with plain HTML and some basic CSS and JavaScript.

From my point of view, the major advantage of CSS3DRenderer is the usage of the scene graph. So the renderer retrieves hierarchical 3D transformations from the scene graph and applies these data to DOM elements. This might be useful if you want to combine HTML elements with 3D objects in WebGL.

If you just need simple labels for your 3D objects, you might want to use CSS2DRenderer. It’s a simplified version of CSS3DRenderer that just translates DOM elements.

https://threejs.org/examples/webgl_loader_pdb.html

9

I’m aware of the scene graph its the glue that holds everything together.

renderer retrieves hierarchical 3D transformations from the scene graph and applies these data to DOM elements

ThreeJS and CSS 3D Transforms

  • domElement.style.position = 'absolute';
  • div.position.z = -185;
  • element.innerHTML = 'content here';
  • element.className = 'three-div';

I also know beyond the DOM you can use pure HTML/CSS with the CSS3DRenderer, by not having to do Javascript say style.position i can do that directly in CSS if I want too - which I find very appealing.

The CSS2DRenderer is text with no DOM access?

My thinking in my experiment was I could extend from the WebGLRenderer into the CSS3DRender. Which now only appears to have access to the DOM and would never have a way to export directly from the CSS3DRenderer an STL/OBJ that can only happen with the WebGLRenderer?

10

No, there is DOM access. Check the source code to see the respective calls.

BTW: Because of this thread, we now have a basic documentation of CSS3DRenderer :blush:

1 Like
11

Thank you and saw the heart from mr.doob!

Three.js > CSS3DRenderer

Another source of context on the CSS3DRenderer found within
three.js/blob/master/examples/js/renderers/CSS3DRenderer.js
Camera Sync with CSS3 and WebGL (Three.js)

12

Now knowing more about CSS3DRenderer than ever before. Based on the example provided for https://threejs.org/examples/webgl_loader_pdb.html

In theory can letterSpacing, position, innerHTML work when the WebGLRenderer and CSS3DRenderer are present at the same time to be able to make calls to the DOM back to the WebGLRenderer?

I see in the documentation for the WebGLRenderer: .domElement = add the canvas

13

The domElement of WebGLRenderer is just the drawing surface for the renderer (or in other words: the canvas element where the result is drawn). Apart from that, WebGLRenderer does not actually work with the DOM.

14

More links to help our viewers:


15

@Mugen87
As of last night from a Three.js dev recommending to use a displacement map: How many ways to load a font in Three.js?

Which I don’t disagree to use wondering though if the CSS3DRender from what you know is possible to be used as a texture(displacement map) with the WebGLRenderer then I’d create a topology modifier for my bottles?

16

AFAIK, that’s not possible. Don’t forget that CSS3DRender just works with ordinary DOM-elements.

1 Like
17

Thank you for saving me from going down that rabbit hole!