|
@@ -48,7 +48,7 @@ THREE.CSS3DRenderer = function () {
|
|
|
|
|
|
var cache = {
|
|
|
camera: { fov: 0, style: '' },
|
|
|
- objects: {}
|
|
|
+ objects: new WeakMap()
|
|
|
};
|
|
|
|
|
|
var domElement = document.createElement( 'div' );
|
|
@@ -184,31 +184,22 @@ THREE.CSS3DRenderer = function () {
|
|
|
}
|
|
|
|
|
|
var element = object.element;
|
|
|
- var cachedStyle = cache.objects[ object.id ] && cache.objects[ object.id ].style;
|
|
|
- var firstTime = cachedStyle === undefined;
|
|
|
+ var cachedStyle = cache.objects.get( object );
|
|
|
|
|
|
- if ( firstTime || cachedStyle !== style ) {
|
|
|
+ if ( cachedStyle === undefined || cachedStyle !== style ) {
|
|
|
|
|
|
element.style.WebkitTransform = style;
|
|
|
element.style.transform = style;
|
|
|
|
|
|
- cache.objects[ object.id ] = { style: style };
|
|
|
+ var objectData = { style: style };
|
|
|
|
|
|
if ( isIE ) {
|
|
|
|
|
|
- cache.objects[ object.id ].distanceToCameraSquared = getDistanceToSquared( camera, object );
|
|
|
+ objectData.distanceToCameraSquared = getDistanceToSquared( camera, object );
|
|
|
|
|
|
}
|
|
|
|
|
|
- }
|
|
|
-
|
|
|
- if ( firstTime ) {
|
|
|
-
|
|
|
- object.addEventListener( 'removed', function () {
|
|
|
-
|
|
|
- delete cache.objects[ object.id ];
|
|
|
-
|
|
|
- } );
|
|
|
+ cache.objects.set( object, objectData );
|
|
|
|
|
|
}
|
|
|
|
|
@@ -244,27 +235,39 @@ THREE.CSS3DRenderer = function () {
|
|
|
|
|
|
}();
|
|
|
|
|
|
- function zOrder( scene ) {
|
|
|
+ function filterAndFlatten( scene ) {
|
|
|
+
|
|
|
+ var result = [];
|
|
|
|
|
|
- var order = Object.keys( cache.objects ).sort( function ( a, b ) {
|
|
|
+ scene.traverse( function ( object ) {
|
|
|
|
|
|
- return cache.objects[ a ].distanceToCameraSquared - cache.objects[ b ].distanceToCameraSquared;
|
|
|
+ if ( object instanceof THREE.CSS3DObject ) result.push( object );
|
|
|
|
|
|
} );
|
|
|
- var zMax = order.length;
|
|
|
|
|
|
- scene.traverse( function ( object ) {
|
|
|
+ return result;
|
|
|
|
|
|
- var index = order.indexOf( object.id + '' );
|
|
|
+ }
|
|
|
|
|
|
- if ( index !== - 1 ) {
|
|
|
+ function zOrder( scene ) {
|
|
|
|
|
|
- object.element.style.zIndex = zMax - index;
|
|
|
+ var sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
|
|
|
|
|
|
- }
|
|
|
+ var distanceA = cache.objects.get( a ).distanceToCameraSquared;
|
|
|
+ var distanceB = cache.objects.get( b ).distanceToCameraSquared;
|
|
|
+
|
|
|
+ return distanceA - distanceB;
|
|
|
|
|
|
} );
|
|
|
|
|
|
+ var zMax = sorted.length;
|
|
|
+
|
|
|
+ for ( var i = 0, l = sorted.length; i < l; i ++ ) {
|
|
|
+
|
|
|
+ sorted[ i ].element.style.zIndex = zMax - i;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
this.render = function ( scene, camera ) {
|