/** * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs * @author mrdoob / http://mrdoob.com/ * @author yomotsu / https://yomotsu.net/ */ THREE.CSS3DObject = function (element) { THREE.Object3D.call(this); this.element = element; this.element.style.position = 'absolute'; this.addEventListener('removed', function () { if (this.element.parentNode !== null) { this.element.parentNode.removeChild(this.element); } }); }; THREE.CSS3DObject.prototype = Object.create(THREE.Object3D.prototype); THREE.CSS3DObject.prototype.constructor = THREE.CSS3DObject; THREE.CSS3DSprite = function (element) { THREE.CSS3DObject.call(this, element); }; THREE.CSS3DSprite.prototype = Object.create(THREE.CSS3DObject.prototype); THREE.CSS3DSprite.prototype.constructor = THREE.CSS3DSprite; // THREE.CSS3DRenderer = function () { console.log('THREE.CSS3DRenderer', THREE.REVISION); var _width, _height; var _widthHalf, _heightHalf; var matrix = new THREE.Matrix4(); // 缓存 var cache = { camera: { fov: 0, style: '' }, objects: new WeakMap() }; var domElement = document.createElement('div'); domElement.style.overflow = 'hidden'; this.domElement = domElement; // 该节点下的子节点都具有3D效果 var cameraElement = document.createElement('div'); // 该属性设置在父级元素中,它的子级元素具有3d效果 cameraElement.style.WebkitTransformStyle = 'preserve-3d'; cameraElement.style.transformStyle = 'preserve-3d'; domElement.appendChild(cameraElement); var isIE = /Trident/i.test(navigator.userAgent); this.getSize = function () { return { width: _width, height: _height }; }; this.setSize = function (width, height) { _width = width; _height = height; _widthHalf = _width / 2; _heightHalf = _height / 2; domElement.style.width = width + 'px'; domElement.style.height = height + 'px'; cameraElement.style.width = width + 'px'; cameraElement.style.height = height + 'px'; }; function epsilon(value) { return Math.abs(value) < 1e-10 ? 0 : value; } function getCameraCSSMatrix(matrix) { var elements = matrix.elements; return 'matrix3d(' + epsilon(elements[0]) + ',' + epsilon(- elements[1]) + ',' + epsilon(elements[2]) + ',' + epsilon(elements[3]) + ',' + epsilon(elements[4]) + ',' + epsilon(- elements[5]) + ',' + epsilon(elements[6]) + ',' + epsilon(elements[7]) + ',' + epsilon(elements[8]) + ',' + epsilon(- elements[9]) + ',' + epsilon(elements[10]) + ',' + epsilon(elements[11]) + ',' + epsilon(elements[12]) + ',' + epsilon(- elements[13]) + ',' + epsilon(elements[14]) + ',' + epsilon(elements[15]) + ')'; } function getObjectCSSMatrix(matrix, cameraCSSMatrix, object) { var elements = matrix.elements; var matrix3d = 'matrix3d(' + epsilon(elements[0]) + ',' + epsilon(elements[1]) + ',' + epsilon(elements[2]) + ',' + epsilon(elements[3]) + ',' + epsilon(- elements[4]) + ',' + epsilon(- elements[5]) + ',' + epsilon(- elements[6]) + ',' + epsilon(- elements[7]) + ',' + epsilon(elements[8]) + ',' + epsilon(elements[9]) + ',' + epsilon(elements[10]) + ',' + epsilon(elements[11]) + ',' + epsilon(elements[12]) + ',' + epsilon(elements[13]) + ',' + epsilon(elements[14]) + ',' + epsilon(elements[15]) + ')'; if (isIE) { return 'translate(-50%,-50%)' + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)' + cameraCSSMatrix + matrix3d; } if (object.userData.anchor) { return 'translate(-' + object.userData.anchor[0] * 100 + '%,-' + object.userData.anchor[1] * 100 + '%)' + matrix3d; } else { return 'translate(-50%,-50%)' + matrix3d; } } function renderObject(object, camera, cameraCSSMatrix) { if (object instanceof THREE.CSS3DObject) { var style; if (object instanceof THREE.CSS3DSprite) { // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/ matrix.copy(camera.matrixWorldInverse); matrix.transpose(); matrix.copyPosition(object.matrixWorld); matrix.scale(object.scale); matrix.elements[3] = 0; matrix.elements[7] = 0; matrix.elements[11] = 0; matrix.elements[15] = 1; style = getObjectCSSMatrix(matrix, cameraCSSMatrix, object); } else { style = getObjectCSSMatrix(object.matrixWorld, cameraCSSMatrix, object); } var element = object.element; var cachedObject = cache.objects.get(object); if (cachedObject === undefined || cachedObject.style !== style) { element.style.WebkitTransform = style; element.style.transform = style; if (object.userData.anchor) { element.style.transformOrigin = object.userData.anchor[0] * 100 + '% ' + object.userData.anchor[1] * 100 + '%';// 有时间考虑一下为什么? } var objectData = { style: style }; if (isIE) { objectData.distanceToCameraSquared = getDistanceToSquared(camera, object); } cache.objects.set(object, objectData); } if (element.parentNode !== cameraElement) { cameraElement.appendChild(element); } } for (var i = 0, l = object.children.length; i < l; i++) { renderObject(object.children[i], camera, cameraCSSMatrix); } } 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) { // 计算设置fov var fov = camera.projectionMatrix.elements[5] * _heightHalf; if (cache.camera.fov !== fov) { if (camera.isPerspectiveCamera) { domElement.style.WebkitPerspective = fov + 'px'; domElement.style.perspective = fov + 'px'; } cache.camera.fov = fov; } // 更新场景树矩阵 scene.updateMatrixWorld(); // 更新相机矩阵 if (camera.parent === null) camera.updateMatrixWorld(); if (camera.isOrthographicCamera) { var tx = - (camera.right + camera.left) / 2; var ty = (camera.top + camera.bottom) / 2; } // CSS 3D 相机矩阵(与ThreeJS相机联动) var cameraCSSMatrix = camera.isOrthographicCamera ? 'scale(' + fov + ')' + 'translate(' + epsilon(tx) + 'px,' + epsilon(ty) + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse) : 'translateZ(' + fov + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse); var style = cameraCSSMatrix + 'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)'; if (cache.camera.style !== style && !isIE) { cameraElement.style.WebkitTransform = style; cameraElement.style.transform = style; cache.camera.style = style; } renderObject(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); } }; };