CSS3DRenderer: Stop IE support.

mrdoob · Feb 20, 2021 · a91684e · a91684e
1 parent 7368c7d
commit a91684e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 168 deletions.
diff --git a/examples/js/renderers/CSS3DRenderer.js b/examples/js/renderers/CSS3DRenderer.js
@@ -80,8 +80,6 @@ THREE.CSS3DRenderer = function () {
 
 	domElement.appendChild( cameraElement );
 
-	var isIE = /Trident/i.test( navigator.userAgent );
-
 	this.getSize = function () {
 
 		return {
@@ -137,7 +135,7 @@ THREE.CSS3DRenderer = function () {
 
 	}
 
-	function getObjectCSSMatrix( matrix, cameraCSSMatrix ) {
+	function getObjectCSSMatrix( matrix ) {
 
 		var elements = matrix.elements;
 		var matrix3d = 'matrix3d(' +
@@ -159,15 +157,6 @@ THREE.CSS3DRenderer = function () {
 			epsilon( elements[ 15 ] ) +
 		')';
 
-		if ( isIE ) {
-
-			return 'translate(-50%,-50%)' +
-				'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)' +
-				cameraCSSMatrix +
-				matrix3d;
-
-		}
-
 		return 'translate(-50%,-50%)' + matrix3d;
 
 	}
@@ -194,11 +183,11 @@ THREE.CSS3DRenderer = function () {
 				matrix.elements[ 11 ] = 0;
 				matrix.elements[ 15 ] = 1;
 
-				style = getObjectCSSMatrix( matrix, cameraCSSMatrix );
+				style = getObjectCSSMatrix( matrix );
 
 			} else {
 
-				style = getObjectCSSMatrix( object.matrixWorld, cameraCSSMatrix );
+				style = getObjectCSSMatrix( object.matrixWorld );
 
 			}
 
@@ -211,13 +200,6 @@ THREE.CSS3DRenderer = function () {
 				element.style.transform = style;
 
 				var objectData = { style: style };
-
-				if ( isIE ) {
-
-					objectData.distanceToCameraSquared = getDistanceToSquared( camera, object );
-
-				}
-
 				cache.objects.set( object, objectData );
 
 			}
@@ -242,57 +224,6 @@ THREE.CSS3DRenderer = function () {
 
 	}
 
-	var getDistanceToSquared = function () {
-
-		var a = new THREE.Vector3();
-		var b = new THREE.Vector3();
-
-		return function ( object1, object2 ) {
-
-			a.setFromMatrixPosition( object1.matrixWorld );
-			b.setFromMatrixPosition( object2.matrixWorld );
-
-			return a.distanceToSquared( b );
-
-		};
-
-	}();
-
-	function filterAndFlatten( scene ) {
-
-		var result = [];
-
-		scene.traverse( function ( object ) {
-
-			if ( object instanceof THREE.CSS3DObject ) result.push( object );
-
-		} );
-
-		return result;
-
-	}
-
-	function zOrder( scene ) {
-
-		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 ) {
 
 		var fov = camera.projectionMatrix.elements[ 5 ] * _heightHalf;
@@ -332,7 +263,7 @@ THREE.CSS3DRenderer = function () {
 		var style = cameraCSSMatrix +
 			'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
 
-		if ( cache.camera.style !== style && ! isIE ) {
+		if ( cache.camera.style !== style ) {
 
 			cameraElement.style.WebkitTransform = style;
 			cameraElement.style.transform = style;
@@ -343,16 +274,6 @@ THREE.CSS3DRenderer = function () {
 
 		renderObject( scene, scene, camera, cameraCSSMatrix );
 
-		if ( isIE ) {
-
-			// IE10 and 11 does not support 'preserve-3d'.
-			// Thus, z-order in 3D will not work.
-			// We have to calc z-order manually and set CSS z-index for IE.
-			// FYI: z-index can't handle object intersection
-			zOrder( scene );
-
-		}
-
 	};
 
 };
diff --git a/examples/jsm/renderers/CSS3DRenderer.js b/examples/jsm/renderers/CSS3DRenderer.js
@@ -1,7 +1,6 @@
 import {
 	Matrix4,
-	Object3D,
-	Vector3
+	Object3D
 } from '../../../build/three.module.js';
 
 /**
@@ -86,8 +85,6 @@ var CSS3DRenderer = function () {
 
 	domElement.appendChild( cameraElement );
 
-	var isIE = /Trident/i.test( navigator.userAgent );
-
 	this.getSize = function () {
 
 		return {
@@ -143,7 +140,7 @@ var CSS3DRenderer = function () {
 
 	}
 
-	function getObjectCSSMatrix( matrix, cameraCSSMatrix ) {
+	function getObjectCSSMatrix( matrix ) {
 
 		var elements = matrix.elements;
 		var matrix3d = 'matrix3d(' +
@@ -165,15 +162,6 @@ var CSS3DRenderer = function () {
 			epsilon( elements[ 15 ] ) +
 		')';
 
-		if ( isIE ) {
-
-			return 'translate(-50%,-50%)' +
-				'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)' +
-				cameraCSSMatrix +
-				matrix3d;
-
-		}
-
 		return 'translate(-50%,-50%)' + matrix3d;
 
 	}
@@ -200,11 +188,11 @@ var CSS3DRenderer = function () {
 				matrix.elements[ 11 ] = 0;
 				matrix.elements[ 15 ] = 1;
 
-				style = getObjectCSSMatrix( matrix, cameraCSSMatrix );
+				style = getObjectCSSMatrix( matrix );
 
 			} else {
 
-				style = getObjectCSSMatrix( object.matrixWorld, cameraCSSMatrix );
+				style = getObjectCSSMatrix( object.matrixWorld );
 
 			}
 
@@ -217,13 +205,6 @@ var CSS3DRenderer = function () {
 				element.style.transform = style;
 
 				var objectData = { style: style };
-
-				if ( isIE ) {
-
-					objectData.distanceToCameraSquared = getDistanceToSquared( camera, object );
-
-				}
-
 				cache.objects.set( object, objectData );
 
 			}
@@ -248,57 +229,6 @@ var CSS3DRenderer = function () {
 
 	}
 
-	var getDistanceToSquared = function () {
-
-		var a = new Vector3();
-		var b = new Vector3();
-
-		return function ( object1, object2 ) {
-
-			a.setFromMatrixPosition( object1.matrixWorld );
-			b.setFromMatrixPosition( object2.matrixWorld );
-
-			return a.distanceToSquared( b );
-
-		};
-
-	}();
-
-	function filterAndFlatten( scene ) {
-
-		var result = [];
-
-		scene.traverse( function ( object ) {
-
-			if ( object instanceof CSS3DObject ) result.push( object );
-
-		} );
-
-		return result;
-
-	}
-
-	function zOrder( scene ) {
-
-		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 ) {
 
 		var fov = camera.projectionMatrix.elements[ 5 ] * _heightHalf;
@@ -338,7 +268,7 @@ var CSS3DRenderer = function () {
 		var style = cameraCSSMatrix +
 			'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
 
-		if ( cache.camera.style !== style && ! isIE ) {
+		if ( cache.camera.style !== style ) {
 
 			cameraElement.style.WebkitTransform = style;
 			cameraElement.style.transform = style;
@@ -349,16 +279,6 @@ var CSS3DRenderer = function () {
 
 		renderObject( scene, scene, camera, cameraCSSMatrix );
 
-		if ( isIE ) {
-
-			// IE10 and 11 does not support 'preserve-3d'.
-			// Thus, z-order in 3D will not work.
-			// We have to calc z-order manually and set CSS z-index for IE.
-			// FYI: z-index can't handle object intersection
-			zOrder( scene );
-
-		}
-
 	};
 
 };