CSS3DRenderer: Cache styles. Fixes mrdoob#4941.

mrdoob · mrdoob · commit d6f45209115e · 2014-06-21T04:33:53.000+02:00
diff --git a/examples/js/renderers/CSS3DRenderer.js b/examples/js/renderers/CSS3DRenderer.js
@@ -42,6 +42,11 @@ THREE.CSS3DRenderer = function () {
 	var _widthHalf, _heightHalf;
 
 	var matrix = new THREE.Matrix4();
+	
+	var cache = {
+		camera: { fov: 0, style: '' },
+		objects: {}
+	};
 
 	var domElement = document.createElement( 'div' );
 	domElement.style.overflow = 'hidden';
@@ -167,11 +172,18 @@ THREE.CSS3DRenderer = function () {
 			}
 
 			var element = object.element;
+			var cachedStyle = cache.objects[ object.id ];
+
+			if ( cachedStyle === undefined || cachedStyle !== style ) {
+
+				element.style.WebkitTransform = style;
+				element.style.MozTransform = style;
+				element.style.oTransform = style;
+				element.style.transform = style;
 
-			element.style.WebkitTransform = style;
-			element.style.MozTransform = style;
-			element.style.oTransform = style;
-			element.style.transform = style;
+				cache.objects[ object.id ] = style;
+
+			}
 
 			if ( element.parentNode !== cameraElement ) {
 
@@ -193,10 +205,16 @@ THREE.CSS3DRenderer = function () {
 
 		var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height;
 
-		domElement.style.WebkitPerspective = fov + "px";
-		domElement.style.MozPerspective = fov + "px";
-		domElement.style.oPerspective = fov + "px";
-		domElement.style.perspective = fov + "px";
+		if ( cache.camera.fov !== fov ) {
+
+			domElement.style.WebkitPerspective = fov + "px";
+			domElement.style.MozPerspective = fov + "px";
+			domElement.style.oPerspective = fov + "px";
+			domElement.style.perspective = fov + "px";
+
+			cache.camera.fov = fov;
+
+		}
 
 		scene.updateMatrixWorld();
 
@@ -207,10 +225,16 @@ THREE.CSS3DRenderer = function () {
 		var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) +
 			" translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
 
-		cameraElement.style.WebkitTransform = style;
-		cameraElement.style.MozTransform = style;
-		cameraElement.style.oTransform = style;
-		cameraElement.style.transform = style;
+		if ( cache.camera.style !== style ) {
+
+			cameraElement.style.WebkitTransform = style;
+			cameraElement.style.MozTransform = style;
+			cameraElement.style.oTransform = style;
+			cameraElement.style.transform = style;
+			
+			cache.camera.style = style;
+
+		}
 
 		renderObject( scene, camera );
 
