Merge pull request #13867 from yomotsu/dev-css3-cache

CSS3Renderer may cause memory leak

examples/js/renderers/CSS3DRenderer.js

@@ -48,7 +48,7 @@ THREE.CSS3DRenderer = function () {
 
 	var cache = {
 		camera: { fov: 0, style: '' },
-		objects: {}
+		objects: new WeakMap()
 	};
 
 	var domElement = document.createElement( 'div' );
@@ -184,21 +184,23 @@ THREE.CSS3DRenderer = function () {
 			}
 
 			var element = object.element;
-			var cachedStyle = cache.objects[ object.id ] && cache.objects[ object.id ].style;
+			var cachedStyle = cache.objects.get( object );
 
 			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 );
 
 				}
 
+				cache.objects.set( object, objectData );
+
 			}
 
 			if ( element.parentNode !== cameraElement ) {
@@ -233,27 +235,39 @@ THREE.CSS3DRenderer = function () {
 
 	}();
 
-	function zOrder( scene ) {
+	function filterAndFlatten( scene ) {
 
-		var order = Object.keys( cache.objects ).sort( function ( a, b ) {
+		var result = [];
+
+		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 + '' );
+	function zOrder( scene ) {
 
-			if ( index !== - 1 ) {
+		var sorted = filterAndFlatten( scene ).sort( function ( a, b ) {
 
-				object.element.style.zIndex = zMax - index;
+			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 ) {