1console.warn( "THREE.CSS3DRenderer: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules." ); 2/** 3 * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs 4 * @author mrdoob / http://mrdoob.com/ 5 * @author yomotsu / https://yomotsu.net/ 6 */ 7 8THREE.CSS3DObject = function ( element ) { 9 10 THREE.Object3D.call( this ); 11 12 this.element = element; 13 this.element.style.position = 'absolute'; 14 this.element.style.pointerEvents = 'auto'; 15 16 this.addEventListener( 'removed', function () { 17 18 this.traverse( function ( object ) { 19 20 if ( object.element instanceof Element && object.element.parentNode !== null ) { 21 22 object.element.parentNode.removeChild( object.element ); 23 24 } 25 26 } ); 27 28 } ); 29 30}; 31 32THREE.CSS3DObject.prototype = Object.create( THREE.Object3D.prototype ); 33THREE.CSS3DObject.prototype.constructor = THREE.CSS3DObject; 34 35THREE.CSS3DSprite = function ( element ) { 36 37 THREE.CSS3DObject.call( this, element ); 38 39}; 40 41THREE.CSS3DSprite.prototype = Object.create( THREE.CSS3DObject.prototype ); 42THREE.CSS3DSprite.prototype.constructor = THREE.CSS3DSprite; 43 44// 45 46THREE.CSS3DRenderer = function () { 47 48 var _this = this; 49 50 var _width, _height; 51 var _widthHalf, _heightHalf; 52 53 var matrix = new THREE.Matrix4(); 54 55 var cache = { 56 camera: { fov: 0, style: '' }, 57 objects: new WeakMap() 58 }; 59 60 var domElement = document.createElement( 'div' ); 61 domElement.style.overflow = 'hidden'; 62 63 this.domElement = domElement; 64 65 var cameraElement = document.createElement( 'div' ); 66 67 cameraElement.style.WebkitTransformStyle = 'preserve-3d'; 68 cameraElement.style.transformStyle = 'preserve-3d'; 69 cameraElement.style.pointerEvents = 'none'; 70 71 domElement.appendChild( cameraElement ); 72 73 var isIE = /Trident/i.test( navigator.userAgent ); 74 75 this.getSize = function () { 76 77 return { 78 width: _width, 79 height: _height 80 }; 81 82 }; 83 84 this.setSize = function ( width, height ) { 85 86 _width = width; 87 _height = height; 88 _widthHalf = _width / 2; 89 _heightHalf = _height / 2; 90 91 domElement.style.width = width + 'px'; 92 domElement.style.height = height + 'px'; 93 94 cameraElement.style.width = width + 'px'; 95 cameraElement.style.height = height + 'px'; 96 97 }; 98 99 function epsilon( value ) { 100 101 return Math.abs( value ) < 1e-10 ? 0 : value; 102 103 } 104 105 function getCameraCSSMatrix( matrix ) { 106 107 var elements = matrix.elements; 108 109 return 'matrix3d(' + 110 epsilon( elements[ 0 ] ) + ',' + 111 epsilon( - elements[ 1 ] ) + ',' + 112 epsilon( elements[ 2 ] ) + ',' + 113 epsilon( elements[ 3 ] ) + ',' + 114 epsilon( elements[ 4 ] ) + ',' + 115 epsilon( - elements[ 5 ] ) + ',' + 116 epsilon( elements[ 6 ] ) + ',' + 117 epsilon( elements[ 7 ] ) + ',' + 118 epsilon( elements[ 8 ] ) + ',' + 119 epsilon( - elements[ 9 ] ) + ',' + 120 epsilon( elements[ 10 ] ) + ',' + 121 epsilon( elements[ 11 ] ) + ',' + 122 epsilon( elements[ 12 ] ) + ',' + 123 epsilon( - elements[ 13 ] ) + ',' + 124 epsilon( elements[ 14 ] ) + ',' + 125 epsilon( elements[ 15 ] ) + 126 ')'; 127 128 } 129 130 function getObjectCSSMatrix( matrix, cameraCSSMatrix ) { 131 132 var elements = matrix.elements; 133 var matrix3d = 'matrix3d(' + 134 epsilon( elements[ 0 ] ) + ',' + 135 epsilon( elements[ 1 ] ) + ',' + 136 epsilon( elements[ 2 ] ) + ',' + 137 epsilon( elements[ 3 ] ) + ',' + 138 epsilon( - elements[ 4 ] ) + ',' + 139 epsilon( - elements[ 5 ] ) + ',' + 140 epsilon( - elements[ 6 ] ) + ',' + 141 epsilon( - elements[ 7 ] ) + ',' + 142 epsilon( elements[ 8 ] ) + ',' + 143 epsilon( elements[ 9 ] ) + ',' + 144 epsilon( elements[ 10 ] ) + ',' + 145 epsilon( elements[ 11 ] ) + ',' + 146 epsilon( elements[ 12 ] ) + ',' + 147 epsilon( elements[ 13 ] ) + ',' + 148 epsilon( elements[ 14 ] ) + ',' + 149 epsilon( elements[ 15 ] ) + 150 ')'; 151 152 if ( isIE ) { 153 154 return 'translate(-50%,-50%)' + 155 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)' + 156 cameraCSSMatrix + 157 matrix3d; 158 159 } 160 161 return 'translate(-50%,-50%)' + matrix3d; 162 163 } 164 165 function renderObject( object, scene, camera, cameraCSSMatrix ) { 166 167 if ( object instanceof THREE.CSS3DObject ) { 168 169 object.onBeforeRender( _this, scene, camera ); 170 171 var style; 172 173 if ( object instanceof THREE.CSS3DSprite ) { 174 175 // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/ 176 177 matrix.copy( camera.matrixWorldInverse ); 178 matrix.transpose(); 179 matrix.copyPosition( object.matrixWorld ); 180 matrix.scale( object.scale ); 181 182 matrix.elements[ 3 ] = 0; 183 matrix.elements[ 7 ] = 0; 184 matrix.elements[ 11 ] = 0; 185 matrix.elements[ 15 ] = 1; 186 187 style = getObjectCSSMatrix( matrix, cameraCSSMatrix ); 188 189 } else { 190 191 style = getObjectCSSMatrix( object.matrixWorld, cameraCSSMatrix ); 192 193 } 194 195 var element = object.element; 196 var cachedObject = cache.objects.get( object ); 197
198 if ( cachedObject === undefined || cachedObject.style !== style ) { 199 200 element.style.WebkitTransform = style; 201 element.style.transform = style; 202 203 var objectData = { style: style }; 204 205 if ( isIE ) { 206 207 objectData.distanceToCameraSquared = getDistanceToSquared( camera, object ); 208 209 } 210 211 cache.objects.set( object, objectData ); 212 213 } 214 215 element.style.display = object.visible ? '' : 'none'; 216 217 if ( element.parentNode !== cameraElement ) { 218 219 cameraElement.appendChild( element ); 220 221 } 222 223 object.onAfterRender( _this, scene, camera ); 224 225 } 226 227 for ( var i = 0, l = object.children.length; i < l; i ++ ) { 228 229 renderObject( object.children[ i ], scene, camera, cameraCSSMatrix ); 230 231 } 232 233 } 234 235 var getDistanceToSquared = function () { 236 237 var a = new THREE.Vector3(); 238 var b = new THREE.Vector3(); 239 240 return function ( object1, object2 ) { 241 242 a.setFromMatrixPosition( object1.matrixWorld ); 243 b.setFromMatrixPosition( object2.matrixWorld ); 244 245 return a.distanceToSquared( b ); 246 247 }; 248 249 }(); 250 251 function filterAndFlatten( scene ) { 252 253 var result = []; 254 255 scene.traverse( function ( object ) { 256 257 if ( object instanceof THREE.CSS3DObject ) result.push( object ); 258 259 } ); 260 261 return result; 262 263 } 264 265 function zOrder( scene ) { 266 267 var sorted = filterAndFlatten( scene ).sort( function ( a, b ) { 268 269 var distanceA = cache.objects.get( a ).distanceToCameraSquared; 270 var distanceB = cache.objects.get( b ).distanceToCameraSquared; 271 272 return distanceA - distanceB; 273 274 } ); 275 276 var zMax = sorted.length; 277 278 for ( var i = 0, l = sorted.length; i < l; i ++ ) { 279 280 sorted[ i ].element.style.zIndex = zMax - i; 281 282 } 283 284 } 285 286 this.render = function ( scene, camera ) { 287 288 var fov = camera.projectionMatrix.elements[ 5 ] * _heightHalf; 289 290 if ( cache.camera.fov !== fov ) { 291 292 if ( camera.isPerspectiveCamera ) { 293 294 domElement.style.WebkitPerspective = fov + 'px'; 295 domElement.style.perspective = fov + 'px'; 296 297 } else { 298 299 domElement.style.WebkitPerspective = ''; 300 domElement.style.perspective = ''; 301 302 } 303 304 cache.camera.fov = fov; 305 306 } 307 308 if ( scene.autoUpdate === true ) scene.updateMatrixWorld(); 309 if ( camera.parent === null ) camera.updateMatrixWorld(); 310 311 if ( camera.isOrthographicCamera ) { 312 313 var tx = - ( camera.right + camera.left ) / 2; 314 var ty = ( camera.top + camera.bottom ) / 2; 315 316 } 317 318 var cameraCSSMatrix = camera.isOrthographicCamera ? 319 'scale(' + fov + ')' + 'translate(' + epsilon( tx ) + 'px,' + epsilon( ty ) + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ) : 320 'translateZ(' + fov + 'px)' + getCameraCSSMatrix( camera.matrixWorldInverse ); 321 322 var style = cameraCSSMatrix + 323 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'; 324 325 if ( cache.camera.style !== style && ! isIE ) { 326 327 cameraElement.style.WebkitTransform = style; 328 cameraElement.style.transform = style; 329 330 cache.camera.style = style; 331 332 } 333 334 renderObject( scene, scene, camera, cameraCSSMatrix ); 335 336 if ( isIE ) { 337 338 // IE10 and 11 does not support 'preserve-3d'. 339 // Thus, z-order in 3D will not work. 340 // We have to calc z-order manually and set CSS z-index for IE. 341 // FYI: z-index can't handle object intersection 342 zOrder( scene ); 343 344 } 345 346 }; 347 348};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.