(function (global, factory) { if (typeof define === "function" && define.amd) { define(["exports", "three"], factory); } else if (typeof exports !== "undefined") { factory(exports, require("three")); } else { var mod = { exports: {} }; factory(mod.exports, global.three); global.CSS3DRenderer = mod.exports; } })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _three) { "use strict"; Object.defineProperty(_exports, "__esModule", { value: true }); _exports.CSS3DSprite = _exports.CSS3DRenderer = _exports.CSS3DObject = void 0; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); } function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } /** * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs */ var _position = new _three.Vector3(); var _quaternion = new _three.Quaternion(); var _scale = new _three.Vector3(); var CSS3DObject = /*#__PURE__*/function (_Object3D) { _inherits(CSS3DObject, _Object3D); var _super = _createSuper(CSS3DObject); function CSS3DObject() { var _this2; var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.createElement('div'); _classCallCheck(this, CSS3DObject); _this2 = _super.call(this); _this2.element = element; _this2.element.style.position = 'absolute'; _this2.element.style.pointerEvents = 'auto'; _this2.element.style.userSelect = 'none'; _this2.element.setAttribute('draggable', false); _this2.addEventListener('removed', function () { this.traverse(function (object) { if (object.element instanceof Element && object.element.parentNode !== null) { object.element.parentNode.removeChild(object.element); } }); }); return _this2; } _createClass(CSS3DObject, [{ key: "copy", value: function copy(source, recursive) { _get(_getPrototypeOf(CSS3DObject.prototype), "copy", this).call(this, source, recursive); this.element = source.element.cloneNode(true); return this; } }]); return CSS3DObject; }(_three.Object3D); _exports.CSS3DObject = CSS3DObject; CSS3DObject.prototype.isCSS3DObject = true; var CSS3DSprite = /*#__PURE__*/function (_CSS3DObject) { _inherits(CSS3DSprite, _CSS3DObject); var _super2 = _createSuper(CSS3DSprite); function CSS3DSprite(element) { var _this3; _classCallCheck(this, CSS3DSprite); _this3 = _super2.call(this, element); _this3.rotation2D = 0; return _this3; } _createClass(CSS3DSprite, [{ key: "copy", value: function copy(source, recursive) { _get(_getPrototypeOf(CSS3DSprite.prototype), "copy", this).call(this, source, recursive); this.rotation2D = source.rotation2D; return this; } }]); return CSS3DSprite; }(CSS3DObject); _exports.CSS3DSprite = CSS3DSprite; CSS3DSprite.prototype.isCSS3DSprite = true; // var _matrix = new _three.Matrix4(); var _matrix2 = new _three.Matrix4(); var CSS3DRenderer = /*#__PURE__*/_createClass(function CSS3DRenderer() { var parameters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; _classCallCheck(this, CSS3DRenderer); var _this = this; var _width, _height; var _widthHalf, _heightHalf; var cache = { camera: { fov: 0, style: '' }, objects: new WeakMap() }; var domElement = parameters.element !== undefined ? parameters.element : document.createElement('div'); domElement.style.overflow = 'hidden'; this.domElement = domElement; var cameraElement = document.createElement('div'); cameraElement.style.transformStyle = 'preserve-3d'; cameraElement.style.pointerEvents = 'none'; domElement.appendChild(cameraElement); this.getSize = function () { return { width: _width, height: _height }; }; this.render = function (scene, camera) { var fov = camera.projectionMatrix.elements[5] * _heightHalf; if (cache.camera.fov !== fov) { domElement.style.perspective = camera.isPerspectiveCamera ? fov + 'px' : ''; cache.camera.fov = fov; } if (scene.autoUpdate === true) scene.updateMatrixWorld(); if (camera.parent === null) camera.updateMatrixWorld(); var tx, ty; if (camera.isOrthographicCamera) { tx = -(camera.right + camera.left) / 2; ty = (camera.top + camera.bottom) / 2; } 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) { cameraElement.style.transform = style; cache.camera.style = style; } renderObject(scene, scene, camera, cameraCSSMatrix); }; 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) { 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]) + ')'; return 'translate(-50%,-50%)' + matrix3d; } function renderObject(object, scene, camera, cameraCSSMatrix) { if (object.isCSS3DObject) { object.onBeforeRender(_this, scene, camera); var style; if (object.isCSS3DSprite) { // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/ _matrix.copy(camera.matrixWorldInverse); _matrix.transpose(); if (object.rotation2D !== 0) _matrix.multiply(_matrix2.makeRotationZ(object.rotation2D)); object.matrixWorld.decompose(_position, _quaternion, _scale); _matrix.setPosition(_position); _matrix.scale(_scale); _matrix.elements[3] = 0; _matrix.elements[7] = 0; _matrix.elements[11] = 0; _matrix.elements[15] = 1; style = getObjectCSSMatrix(_matrix); } else { style = getObjectCSSMatrix(object.matrixWorld); } var element = object.element; var cachedObject = cache.objects.get(object); if (cachedObject === undefined || cachedObject.style !== style) { element.style.transform = style; var objectData = { style: style }; cache.objects.set(object, objectData); } element.style.display = object.visible ? '' : 'none'; if (element.parentNode !== cameraElement) { cameraElement.appendChild(element); } object.onAfterRender(_this, scene, camera); } for (var i = 0, l = object.children.length; i < l; i++) { renderObject(object.children[i], scene, camera, cameraCSSMatrix); } } }); _exports.CSS3DRenderer = CSS3DRenderer; });