What I mean is, how to we position things (camera and the objects we wish to draw) so that when we give something a size of 10 (f.e. a BoxGeometry with an X-axis dimension of 10) that this will mean the box is 10 screen pixels wide?
Another question might be: If we have a camera, how far from the camera on the camera’s Z axis is the plane in which a size of 1 on the X or Y axis corresponds to exactly 1 screen pixel? How might we figure this out?
So, for example, following is an example where the <div> element is positioned using top: 50%; left: 50%; transform: translate(-50%, -50%), which is using the DOM coordinate system where the point (0, 0, 0) starts at the top left of the viewport and positive Y goes downward. When you start dragging, you’ll see the teal square that was hiding underneath the pink square. Both of them are rotating in unison, and are perfectly aligned until you begin dragging the Three.js camera. The pink <div> has a size of 50px width/height, and the Three.js Mesh has a size of 50 width/height, so the Three.js Mesh is sized in pixels:
@prisoner849, the use case is, for example, what I described here (also listed above). Basically, to easily make traditional web content enhanced with WebGL.
The following is a sample that shows combination of DOM with WebGL using a combination of Three.js’ CSS3DRenderer and WebGLRenderer:
What you notice is that the squares are DOM elements (see them in the element inspector), the shadow of the WebGL sphere is cast onto the elements, and the moving lights also shines on these elements. If you run it a few times, you’ll notice that sometimes the sphere also intersects with the elements, as if both are in the same 3D world.
I’m making an HTML API to make it super easy (abstracting away “mixed mode” behind the HTML interface). In my case, I’m not going to be using the CSS3DRenderer, as I have my own CSS3D renderer and I will be mapping the WebGL objects (Three.js) to the DOM coordinate space (rather than mapping DOM elements into Three.js coordinate space like CSS3DRenderer does), which is why I opened this thread here. I’m going to post my full working solution when it’s ready over at How can we make Three.js scenes use DOM-style coordinates? (that thread includes an HTML snippet of what mixing DOM with WebGL will look like).
Here’s a sample scene without any “mixed mode” (only WebGL) because mixed mode won’t be ready for a few weeks:
I’ve been polishing up my lib. Up next I’ll have some practical examples (on a new website with new name and full documentation). Some of those example will include “web pages” with 3D content that interacts on the space of the page (f.e. 3D buttons with shading, characters that can jump over the buttons, etc, that main use case being 3D enhancement of traditional web content). Other use cases will include, for example, first person shooter where you can walk up to a computer, and interact with a real web page (or a web app made specifically for interacting with it in the game).
I’ve started to add more examples, but the examples like I described above are coming soon…