search

mrdoob / three.js

JavaScript 3D Library.
https://threejs.org/
MIT License
101.98k stars 35.33k forks source link

Z positions of those css3d examples don't seem to work on IE (even 11) #4098

Closed mrgoon closed 9 years ago

mrgoon commented 10 years ago

11-11-2013 3-40-22 pm

mrdoob commented 10 years ago

Yes. IE11 doesn't seem to support nested preserve-3d. I tried to solve this once but I didn't find a good solution. Anyone interested in having a go?

mrgoon commented 10 years ago

I found this here: http://msdn.microsoft.com/en-us/library/ie/hh673529(v=vs.85).aspx

"You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform."

Well, but I think this would kill the CPU if we have too many of children items, wouldn't it?

P/S: I love your works from the day you are still a flash developer, and now I'm very glad to see you around digging Javascript. Nice work, keep going dude! :D

mrdoob commented 10 years ago

@WestLangley Do you feel like having a go at this? Seems like the best/fastest approach is to compute the exact matrix that css3d needs per element. Instead of relaying in nested div elements with nested transformations.

WestLangley commented 10 years ago

Some progress...

Except for the upside-down part, two simple changes flattening the "scene graph" seem to work in principle. So this is doable.

  1. compute exact matrix
matrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
style = getObjectCSSMatrix( matrix );
  1. avoid nesting
if ( element.parentNode !== domElement ) {

    domElement.appendChild( element );

}

Also, I think that in the current implementation, if the scene graph is more than one level deep, then the transforms will not work correctly. I do not think the new approach has that problem.

mrdoob commented 10 years ago

Yep, I got to try that and hit the same problem. Maybe the elements can be inverse scaled vertically.