For example, I’d like all positions of all objects to be from top/left like with DOM CSS. For example, X goes to the right, starting at
0 from the left edge of a parent/viewport, and positive Y goes downward, starting from the top of a parent/viewport.
I’d like for an object that is added directly to a scene with position
0,0,0 to have its origin (center/middle/whatever-it-is-called) be at the top-left.
Then I’d like for it’s size to be in CSS pixels. For example, if a Circle’s radius is 10, then this means that the radius would span 10 CSS pixels (
px) across the screen when Z=0 (obviously if Z is not
0 then the sphere gets bigger or smaller as it goes away from the Z=0 plane just like with transforms in CSS). We’d see one quarter of the sphere, because it’s origin would be at the top left.
Currently, when we resize a Three.js viewport, objects also grow or shrink. Bu I’d like for Objects to remain the same size, using absolute sizes (like CSS), so sizing is not relative to viewport width/height. This is how sizing in CSS3D is by default when using units like
CSS3DRenderer exists, and I am currently studying it, but I don’t yet understand what all the numbers mean. However, CSS3DRenderer does the opposite of what I want: it converts DOM coordaintes to match those of Three.js. I want to instead convert Three.js coordinates to match those of DOM.
I made this “mixed mode” demo with CSS3DRenderer + WebGLRenderer: jsfiddle.net/trusktr/jc6j1wmf
As you might imagine, I’d like to align Three.js objects to DOM objects.
The way it works in that fiddle is using Three.js’ default coordinates, which can be nice for infinite space apps (games, etc).
But for making “web sites” (mostly-2D documents) that are agumented with 3D objects, it’d be easier to have DOM coordinates so it is easy to match Three.js positions to things in the page.
Once I get this working, I’m going to wire it up in Infamous (soon to be renamed) so that it is possible to describe “mixed mode” scenes like in the fiddle, but using HTML. This is what I’ve planned for it currently is planned to look like:
<i-scene> <!-- Easily mix HTML and WebGL content together --> <i-node rotation="0 30 0" position="20 30 40"> <h1> Mixed mode! This is just regular HTML content. </h1> <svg> ... </svg> </i-node> <i-mesh has="sphere-geometry phong-material" size="30" color="#00ff66" position="30 30 30" transparent="false" > </i-mesh> </i-scene>
i-node elements already exist, and can currently be used to easily manipulate DOM in 3D. I’m currently working on the WebGL parts of the API.