166 lines
7.5 KiB
JavaScript
166 lines
7.5 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
const THREE = require("three");
|
|
const _position = /* @__PURE__ */ new THREE.Vector3();
|
|
const _quaternion = /* @__PURE__ */ new THREE.Quaternion();
|
|
const _scale = /* @__PURE__ */ new THREE.Vector3();
|
|
class CSS3DObject extends THREE.Object3D {
|
|
constructor(element = document.createElement("div")) {
|
|
super();
|
|
this.isCSS3DObject = true;
|
|
this.element = element;
|
|
this.element.style.position = "absolute";
|
|
this.element.style.pointerEvents = "auto";
|
|
this.element.style.userSelect = "none";
|
|
this.element.setAttribute("draggable", false);
|
|
this.addEventListener("removed", function() {
|
|
this.traverse(function(object) {
|
|
if (object.element instanceof Element && object.element.parentNode !== null) {
|
|
object.element.parentNode.removeChild(object.element);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
copy(source, recursive) {
|
|
super.copy(source, recursive);
|
|
this.element = source.element.cloneNode(true);
|
|
return this;
|
|
}
|
|
}
|
|
class CSS3DSprite extends CSS3DObject {
|
|
constructor(element) {
|
|
super(element);
|
|
this.isCSS3DSprite = true;
|
|
this.rotation2D = 0;
|
|
}
|
|
copy(source, recursive) {
|
|
super.copy(source, recursive);
|
|
this.rotation2D = source.rotation2D;
|
|
return this;
|
|
}
|
|
}
|
|
const _matrix = /* @__PURE__ */ new THREE.Matrix4();
|
|
const _matrix2 = /* @__PURE__ */ new THREE.Matrix4();
|
|
class CSS3DRenderer {
|
|
constructor(parameters = {}) {
|
|
const _this = this;
|
|
let _width, _height;
|
|
let _widthHalf, _heightHalf;
|
|
const cache = {
|
|
camera: { style: "" },
|
|
objects: /* @__PURE__ */ new WeakMap()
|
|
};
|
|
const domElement = parameters.element !== void 0 ? parameters.element : document.createElement("div");
|
|
domElement.style.overflow = "hidden";
|
|
this.domElement = domElement;
|
|
const viewElement = document.createElement("div");
|
|
viewElement.style.transformOrigin = "0 0";
|
|
viewElement.style.pointerEvents = "none";
|
|
domElement.appendChild(viewElement);
|
|
const cameraElement = document.createElement("div");
|
|
cameraElement.style.transformStyle = "preserve-3d";
|
|
viewElement.appendChild(cameraElement);
|
|
this.getSize = function() {
|
|
return {
|
|
width: _width,
|
|
height: _height
|
|
};
|
|
};
|
|
this.render = function(scene, camera) {
|
|
const fov = camera.projectionMatrix.elements[5] * _heightHalf;
|
|
if (camera.view && camera.view.enabled) {
|
|
viewElement.style.transform = `translate( ${-camera.view.offsetX * (_width / camera.view.width)}px, ${-camera.view.offsetY * (_height / camera.view.height)}px )`;
|
|
viewElement.style.transform += `scale( ${camera.view.fullWidth / camera.view.width}, ${camera.view.fullHeight / camera.view.height} )`;
|
|
} else {
|
|
viewElement.style.transform = "";
|
|
}
|
|
if (scene.matrixWorldAutoUpdate === true)
|
|
scene.updateMatrixWorld();
|
|
if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
|
|
camera.updateMatrixWorld();
|
|
let tx, ty;
|
|
if (camera.isOrthographicCamera) {
|
|
tx = -(camera.right + camera.left) / 2;
|
|
ty = (camera.top + camera.bottom) / 2;
|
|
}
|
|
const scaleByViewOffset = camera.view && camera.view.enabled ? camera.view.height / camera.view.fullHeight : 1;
|
|
const cameraCSSMatrix = camera.isOrthographicCamera ? `scale( ${scaleByViewOffset} )scale(` + fov + ")translate(" + epsilon(tx) + "px," + epsilon(ty) + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse) : `scale( ${scaleByViewOffset} )translateZ(` + fov + "px)" + getCameraCSSMatrix(camera.matrixWorldInverse);
|
|
const perspective = camera.isPerspectiveCamera ? "perspective(" + fov + "px) " : "";
|
|
const style = perspective + cameraCSSMatrix + "translate(" + _widthHalf + "px," + _heightHalf + "px)";
|
|
if (cache.camera.style !== style) {
|
|
cameraElement.style.transform = style;
|
|
cache.camera.style = style;
|
|
}
|
|
renderObject(scene, scene, camera);
|
|
};
|
|
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";
|
|
viewElement.style.width = width + "px";
|
|
viewElement.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) {
|
|
const 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) {
|
|
const elements = matrix.elements;
|
|
const 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) {
|
|
const visible = object.visible === true && object.layers.test(camera.layers) === true;
|
|
object.element.style.display = visible === true ? "" : "none";
|
|
if (visible === true) {
|
|
object.onBeforeRender(_this, scene, camera);
|
|
let style;
|
|
if (object.isCSS3DSprite) {
|
|
_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);
|
|
}
|
|
const element = object.element;
|
|
const cachedObject = cache.objects.get(object);
|
|
if (cachedObject === void 0 || cachedObject.style !== style) {
|
|
element.style.transform = style;
|
|
const objectData = { style };
|
|
cache.objects.set(object, objectData);
|
|
}
|
|
if (element.parentNode !== cameraElement) {
|
|
cameraElement.appendChild(element);
|
|
}
|
|
object.onAfterRender(_this, scene, camera);
|
|
}
|
|
}
|
|
for (let i = 0, l = object.children.length; i < l; i++) {
|
|
renderObject(object.children[i], scene, camera);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
exports.CSS3DObject = CSS3DObject;
|
|
exports.CSS3DRenderer = CSS3DRenderer;
|
|
exports.CSS3DSprite = CSS3DSprite;
|
|
//# sourceMappingURL=CSS3DRenderer.cjs.map
|