Favivon - Correção

This commit is contained in:
2026-05-30 19:59:39 -03:00
parent 76ddaa815d
commit d7dfd221f0
32859 changed files with 5459654 additions and 404 deletions
+123
View File
@@ -0,0 +1,123 @@
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const THREE = require("three");
class CSS2DObject extends THREE.Object3D {
constructor(element = document.createElement("div")) {
super();
this.isCSS2DObject = true;
this.element = element;
this.element.style.position = "absolute";
this.element.style.userSelect = "none";
this.element.setAttribute("draggable", false);
this.center = new THREE.Vector2(0.5, 0.5);
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);
this.center = source.center;
return this;
}
}
const _vector = /* @__PURE__ */ new THREE.Vector3();
const _viewMatrix = /* @__PURE__ */ new THREE.Matrix4();
const _viewProjectionMatrix = /* @__PURE__ */ new THREE.Matrix4();
const _a = /* @__PURE__ */ new THREE.Vector3();
const _b = /* @__PURE__ */ new THREE.Vector3();
class CSS2DRenderer {
constructor(parameters = {}) {
const _this = this;
let _width, _height;
let _widthHalf, _heightHalf;
const cache = {
objects: /* @__PURE__ */ new WeakMap()
};
const domElement = parameters.element !== void 0 ? parameters.element : document.createElement("div");
domElement.style.overflow = "hidden";
this.domElement = domElement;
this.getSize = function() {
return {
width: _width,
height: _height
};
};
this.render = function(scene, camera) {
if (scene.matrixWorldAutoUpdate === true)
scene.updateMatrixWorld();
if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
camera.updateMatrixWorld();
_viewMatrix.copy(camera.matrixWorldInverse);
_viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
renderObject(scene, scene, camera);
zOrder(scene);
};
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";
};
function renderObject(object, scene, camera) {
if (object.isCSS2DObject) {
_vector.setFromMatrixPosition(object.matrixWorld);
_vector.applyMatrix4(_viewProjectionMatrix);
const visible = object.visible === true && _vector.z >= -1 && _vector.z <= 1 && object.layers.test(camera.layers) === true;
object.element.style.display = visible === true ? "" : "none";
if (visible === true) {
object.onBeforeRender(_this, scene, camera);
const element = object.element;
element.style.transform = "translate(" + -100 * object.center.x + "%," + -100 * object.center.y + "%)translate(" + (_vector.x * _widthHalf + _widthHalf) + "px," + (-_vector.y * _heightHalf + _heightHalf) + "px)";
if (element.parentNode !== domElement) {
domElement.appendChild(element);
}
object.onAfterRender(_this, scene, camera);
}
const objectData = {
distanceToCameraSquared: getDistanceToSquared(camera, object)
};
cache.objects.set(object, objectData);
}
for (let i = 0, l = object.children.length; i < l; i++) {
renderObject(object.children[i], scene, camera);
}
}
function getDistanceToSquared(object1, object2) {
_a.setFromMatrixPosition(object1.matrixWorld);
_b.setFromMatrixPosition(object2.matrixWorld);
return _a.distanceToSquared(_b);
}
function filterAndFlatten(scene) {
const result = [];
scene.traverse(function(object) {
if (object.isCSS2DObject)
result.push(object);
});
return result;
}
function zOrder(scene) {
const sorted = filterAndFlatten(scene).sort(function(a, b) {
if (a.renderOrder !== b.renderOrder) {
return b.renderOrder - a.renderOrder;
}
const distanceA = cache.objects.get(a).distanceToCameraSquared;
const distanceB = cache.objects.get(b).distanceToCameraSquared;
return distanceA - distanceB;
});
const zMax = sorted.length;
for (let i = 0, l = sorted.length; i < l; i++) {
sorted[i].element.style.zIndex = zMax - i;
}
}
}
}
exports.CSS2DObject = CSS2DObject;
exports.CSS2DRenderer = CSS2DRenderer;
//# sourceMappingURL=CSS2DRenderer.cjs.map
File diff suppressed because one or more lines are too long
+23
View File
@@ -0,0 +1,23 @@
import { Object3D, Scene, Camera, Vector2 } from 'three'
export class CSS2DObject extends Object3D {
constructor(element: HTMLElement)
element: HTMLElement
center: Vector2
onBeforeRender: (renderer: unknown, scene: Scene, camera: Camera) => void
onAfterRender: (renderer: unknown, scene: Scene, camera: Camera) => void
}
export type CSS2DParameters = {
element?: HTMLElement
}
export class CSS2DRenderer {
constructor(parameters?: CSS2DParameters)
domElement: HTMLElement
getSize(): { width: number; height: number }
setSize(width: number, height: number): void
render(scene: Scene, camera: Camera): void
}
+123
View File
@@ -0,0 +1,123 @@
import { Object3D, Vector2, Vector3, Matrix4 } from "three";
class CSS2DObject extends Object3D {
constructor(element = document.createElement("div")) {
super();
this.isCSS2DObject = true;
this.element = element;
this.element.style.position = "absolute";
this.element.style.userSelect = "none";
this.element.setAttribute("draggable", false);
this.center = new Vector2(0.5, 0.5);
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);
this.center = source.center;
return this;
}
}
const _vector = /* @__PURE__ */ new Vector3();
const _viewMatrix = /* @__PURE__ */ new Matrix4();
const _viewProjectionMatrix = /* @__PURE__ */ new Matrix4();
const _a = /* @__PURE__ */ new Vector3();
const _b = /* @__PURE__ */ new Vector3();
class CSS2DRenderer {
constructor(parameters = {}) {
const _this = this;
let _width, _height;
let _widthHalf, _heightHalf;
const cache = {
objects: /* @__PURE__ */ new WeakMap()
};
const domElement = parameters.element !== void 0 ? parameters.element : document.createElement("div");
domElement.style.overflow = "hidden";
this.domElement = domElement;
this.getSize = function() {
return {
width: _width,
height: _height
};
};
this.render = function(scene, camera) {
if (scene.matrixWorldAutoUpdate === true)
scene.updateMatrixWorld();
if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
camera.updateMatrixWorld();
_viewMatrix.copy(camera.matrixWorldInverse);
_viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
renderObject(scene, scene, camera);
zOrder(scene);
};
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";
};
function renderObject(object, scene, camera) {
if (object.isCSS2DObject) {
_vector.setFromMatrixPosition(object.matrixWorld);
_vector.applyMatrix4(_viewProjectionMatrix);
const visible = object.visible === true && _vector.z >= -1 && _vector.z <= 1 && object.layers.test(camera.layers) === true;
object.element.style.display = visible === true ? "" : "none";
if (visible === true) {
object.onBeforeRender(_this, scene, camera);
const element = object.element;
element.style.transform = "translate(" + -100 * object.center.x + "%," + -100 * object.center.y + "%)translate(" + (_vector.x * _widthHalf + _widthHalf) + "px," + (-_vector.y * _heightHalf + _heightHalf) + "px)";
if (element.parentNode !== domElement) {
domElement.appendChild(element);
}
object.onAfterRender(_this, scene, camera);
}
const objectData = {
distanceToCameraSquared: getDistanceToSquared(camera, object)
};
cache.objects.set(object, objectData);
}
for (let i = 0, l = object.children.length; i < l; i++) {
renderObject(object.children[i], scene, camera);
}
}
function getDistanceToSquared(object1, object2) {
_a.setFromMatrixPosition(object1.matrixWorld);
_b.setFromMatrixPosition(object2.matrixWorld);
return _a.distanceToSquared(_b);
}
function filterAndFlatten(scene) {
const result = [];
scene.traverse(function(object) {
if (object.isCSS2DObject)
result.push(object);
});
return result;
}
function zOrder(scene) {
const sorted = filterAndFlatten(scene).sort(function(a, b) {
if (a.renderOrder !== b.renderOrder) {
return b.renderOrder - a.renderOrder;
}
const distanceA = cache.objects.get(a).distanceToCameraSquared;
const distanceB = cache.objects.get(b).distanceToCameraSquared;
return distanceA - distanceB;
});
const zMax = sorted.length;
for (let i = 0, l = sorted.length; i < l; i++) {
sorted[i].element.style.zIndex = zMax - i;
}
}
}
}
export {
CSS2DObject,
CSS2DRenderer
};
//# sourceMappingURL=CSS2DRenderer.js.map
File diff suppressed because one or more lines are too long
+165
View File
@@ -0,0 +1,165 @@
"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
File diff suppressed because one or more lines are too long
+26
View File
@@ -0,0 +1,26 @@
import { Object3D, Scene, Camera } from 'three'
export class CSS3DObject extends Object3D {
constructor(element: HTMLElement)
element: HTMLElement
onBeforeRender: (renderer: unknown, scene: Scene, camera: Camera) => void
onAfterRender: (renderer: unknown, scene: Scene, camera: Camera) => void
}
export class CSS3DSprite extends CSS3DObject {
constructor(element: HTMLElement)
}
export interface CSS3DParameters {
element?: HTMLElement
}
export class CSS3DRenderer {
constructor(parameters?: CSS3DParameters)
domElement: HTMLElement
getSize(): { width: number; height: number }
setSize(width: number, height: number): void
render(scene: Scene, camera: Camera): void
}
+165
View File
@@ -0,0 +1,165 @@
import { Object3D, Vector3, Quaternion, Matrix4 } from "three";
const _position = /* @__PURE__ */ new Vector3();
const _quaternion = /* @__PURE__ */ new Quaternion();
const _scale = /* @__PURE__ */ new Vector3();
class CSS3DObject extends 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 Matrix4();
const _matrix2 = /* @__PURE__ */ new 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);
}
}
}
}
export {
CSS3DObject,
CSS3DRenderer,
CSS3DSprite
};
//# sourceMappingURL=CSS3DRenderer.js.map
File diff suppressed because one or more lines are too long
+500
View File
@@ -0,0 +1,500 @@
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const THREE = require("three");
class RenderableObject {
constructor() {
this.id = 0;
this.object = null;
this.z = 0;
this.renderOrder = 0;
}
}
class RenderableFace {
constructor() {
this.id = 0;
this.v1 = new RenderableVertex();
this.v2 = new RenderableVertex();
this.v3 = new RenderableVertex();
this.normalModel = new THREE.Vector3();
this.vertexNormalsModel = [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()];
this.vertexNormalsLength = 0;
this.color = new THREE.Color();
this.material = null;
this.uvs = [new THREE.Vector2(), new THREE.Vector2(), new THREE.Vector2()];
this.z = 0;
this.renderOrder = 0;
}
}
class RenderableVertex {
constructor() {
this.position = new THREE.Vector3();
this.positionWorld = new THREE.Vector3();
this.positionScreen = new THREE.Vector4();
this.visible = true;
}
copy(vertex) {
this.positionWorld.copy(vertex.positionWorld);
this.positionScreen.copy(vertex.positionScreen);
}
}
class RenderableLine {
constructor() {
this.id = 0;
this.v1 = new RenderableVertex();
this.v2 = new RenderableVertex();
this.vertexColors = [new THREE.Color(), new THREE.Color()];
this.material = null;
this.z = 0;
this.renderOrder = 0;
}
}
class RenderableSprite {
constructor() {
this.id = 0;
this.object = null;
this.x = 0;
this.y = 0;
this.z = 0;
this.rotation = 0;
this.scale = new THREE.Vector2();
this.material = null;
this.renderOrder = 0;
}
}
class Projector {
constructor() {
let _object, _objectCount, _objectPoolLength = 0, _vertex, _vertexCount, _vertexPoolLength = 0, _face, _faceCount, _facePoolLength = 0, _line, _lineCount, _linePoolLength = 0, _sprite, _spriteCount, _spritePoolLength = 0, _modelMatrix;
const _renderData = { objects: [], lights: [], elements: [] }, _vector3 = new THREE.Vector3(), _vector4 = new THREE.Vector4(), _clipBox = new THREE.Box3(new THREE.Vector3(-1, -1, -1), new THREE.Vector3(1, 1, 1)), _boundingBox = new THREE.Box3(), _points3 = new Array(3), _viewMatrix = new THREE.Matrix4(), _viewProjectionMatrix = new THREE.Matrix4(), _modelViewProjectionMatrix = new THREE.Matrix4(), _frustum = new THREE.Frustum(), _objectPool = [], _vertexPool = [], _facePool = [], _linePool = [], _spritePool = [];
function RenderList() {
const normals = [];
const colors = [];
const uvs = [];
let object = null;
const normalMatrix = new THREE.Matrix3();
function setObject(value) {
object = value;
normalMatrix.getNormalMatrix(object.matrixWorld);
normals.length = 0;
colors.length = 0;
uvs.length = 0;
}
function projectVertex(vertex) {
const position = vertex.position;
const positionWorld = vertex.positionWorld;
const positionScreen = vertex.positionScreen;
positionWorld.copy(position).applyMatrix4(_modelMatrix);
positionScreen.copy(positionWorld).applyMatrix4(_viewProjectionMatrix);
const invW = 1 / positionScreen.w;
positionScreen.x *= invW;
positionScreen.y *= invW;
positionScreen.z *= invW;
vertex.visible = positionScreen.x >= -1 && positionScreen.x <= 1 && positionScreen.y >= -1 && positionScreen.y <= 1 && positionScreen.z >= -1 && positionScreen.z <= 1;
}
function pushVertex(x, y, z) {
_vertex = getNextVertexInPool();
_vertex.position.set(x, y, z);
projectVertex(_vertex);
}
function pushNormal(x, y, z) {
normals.push(x, y, z);
}
function pushColor(r, g, b) {
colors.push(r, g, b);
}
function pushUv(x, y) {
uvs.push(x, y);
}
function checkTriangleVisibility(v1, v2, v3) {
if (v1.visible === true || v2.visible === true || v3.visible === true)
return true;
_points3[0] = v1.positionScreen;
_points3[1] = v2.positionScreen;
_points3[2] = v3.positionScreen;
return _clipBox.intersectsBox(_boundingBox.setFromPoints(_points3));
}
function checkBackfaceCulling(v1, v2, v3) {
return (v3.positionScreen.x - v1.positionScreen.x) * (v2.positionScreen.y - v1.positionScreen.y) - (v3.positionScreen.y - v1.positionScreen.y) * (v2.positionScreen.x - v1.positionScreen.x) < 0;
}
function pushLine(a, b) {
const v1 = _vertexPool[a];
const v2 = _vertexPool[b];
v1.positionScreen.copy(v1.position).applyMatrix4(_modelViewProjectionMatrix);
v2.positionScreen.copy(v2.position).applyMatrix4(_modelViewProjectionMatrix);
if (clipLine(v1.positionScreen, v2.positionScreen) === true) {
v1.positionScreen.multiplyScalar(1 / v1.positionScreen.w);
v2.positionScreen.multiplyScalar(1 / v2.positionScreen.w);
_line = getNextLineInPool();
_line.id = object.id;
_line.v1.copy(v1);
_line.v2.copy(v2);
_line.z = Math.max(v1.positionScreen.z, v2.positionScreen.z);
_line.renderOrder = object.renderOrder;
_line.material = object.material;
if (object.material.vertexColors) {
_line.vertexColors[0].fromArray(colors, a * 3);
_line.vertexColors[1].fromArray(colors, b * 3);
}
_renderData.elements.push(_line);
}
}
function pushTriangle(a, b, c, material) {
const v1 = _vertexPool[a];
const v2 = _vertexPool[b];
const v3 = _vertexPool[c];
if (checkTriangleVisibility(v1, v2, v3) === false)
return;
if (material.side === THREE.DoubleSide || checkBackfaceCulling(v1, v2, v3) === true) {
_face = getNextFaceInPool();
_face.id = object.id;
_face.v1.copy(v1);
_face.v2.copy(v2);
_face.v3.copy(v3);
_face.z = (v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z) / 3;
_face.renderOrder = object.renderOrder;
_vector3.subVectors(v3.position, v2.position);
_vector4.subVectors(v1.position, v2.position);
_vector3.cross(_vector4);
_face.normalModel.copy(_vector3);
_face.normalModel.applyMatrix3(normalMatrix).normalize();
for (let i = 0; i < 3; i++) {
const normal = _face.vertexNormalsModel[i];
normal.fromArray(normals, arguments[i] * 3);
normal.applyMatrix3(normalMatrix).normalize();
const uv = _face.uvs[i];
uv.fromArray(uvs, arguments[i] * 2);
}
_face.vertexNormalsLength = 3;
_face.material = material;
if (material.vertexColors) {
_face.color.fromArray(colors, a * 3);
}
_renderData.elements.push(_face);
}
}
return {
setObject,
projectVertex,
checkTriangleVisibility,
checkBackfaceCulling,
pushVertex,
pushNormal,
pushColor,
pushUv,
pushLine,
pushTriangle
};
}
const renderList = new RenderList();
function projectObject(object) {
if (object.visible === false)
return;
if (object.isLight) {
_renderData.lights.push(object);
} else if (object.isMesh || object.isLine || object.isPoints) {
if (object.material.visible === false)
return;
if (object.frustumCulled === true && _frustum.intersectsObject(object) === false)
return;
addObject(object);
} else if (object.isSprite) {
if (object.material.visible === false)
return;
if (object.frustumCulled === true && _frustum.intersectsSprite(object) === false)
return;
addObject(object);
}
const children = object.children;
for (let i = 0, l = children.length; i < l; i++) {
projectObject(children[i]);
}
}
function addObject(object) {
_object = getNextObjectInPool();
_object.id = object.id;
_object.object = object;
_vector3.setFromMatrixPosition(object.matrixWorld);
_vector3.applyMatrix4(_viewProjectionMatrix);
_object.z = _vector3.z;
_object.renderOrder = object.renderOrder;
_renderData.objects.push(_object);
}
this.projectScene = function(scene, camera, sortObjects, sortElements) {
_faceCount = 0;
_lineCount = 0;
_spriteCount = 0;
_renderData.elements.length = 0;
if (scene.matrixWorldAutoUpdate === true)
scene.updateMatrixWorld();
if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
camera.updateMatrixWorld();
_viewMatrix.copy(camera.matrixWorldInverse);
_viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
_frustum.setFromProjectionMatrix(_viewProjectionMatrix);
_objectCount = 0;
_renderData.objects.length = 0;
_renderData.lights.length = 0;
projectObject(scene);
if (sortObjects === true) {
_renderData.objects.sort(painterSort);
}
const objects = _renderData.objects;
for (let o = 0, ol = objects.length; o < ol; o++) {
const object = objects[o].object;
const geometry = object.geometry;
renderList.setObject(object);
_modelMatrix = object.matrixWorld;
_vertexCount = 0;
if (object.isMesh) {
let material = object.material;
const isMultiMaterial = Array.isArray(material);
const attributes = geometry.attributes;
const groups = geometry.groups;
if (attributes.position === void 0)
continue;
const positions = attributes.position.array;
for (let i = 0, l = positions.length; i < l; i += 3) {
let x = positions[i];
let y = positions[i + 1];
let z = positions[i + 2];
const morphTargets = geometry.morphAttributes.position;
if (morphTargets !== void 0) {
const morphTargetsRelative = geometry.morphTargetsRelative;
const morphInfluences = object.morphTargetInfluences;
for (let t = 0, tl = morphTargets.length; t < tl; t++) {
const influence = morphInfluences[t];
if (influence === 0)
continue;
const target = morphTargets[t];
if (morphTargetsRelative) {
x += target.getX(i / 3) * influence;
y += target.getY(i / 3) * influence;
z += target.getZ(i / 3) * influence;
} else {
x += (target.getX(i / 3) - positions[i]) * influence;
y += (target.getY(i / 3) - positions[i + 1]) * influence;
z += (target.getZ(i / 3) - positions[i + 2]) * influence;
}
}
}
renderList.pushVertex(x, y, z);
}
if (attributes.normal !== void 0) {
const normals = attributes.normal.array;
for (let i = 0, l = normals.length; i < l; i += 3) {
renderList.pushNormal(normals[i], normals[i + 1], normals[i + 2]);
}
}
if (attributes.color !== void 0) {
const colors = attributes.color.array;
for (let i = 0, l = colors.length; i < l; i += 3) {
renderList.pushColor(colors[i], colors[i + 1], colors[i + 2]);
}
}
if (attributes.uv !== void 0) {
const uvs = attributes.uv.array;
for (let i = 0, l = uvs.length; i < l; i += 2) {
renderList.pushUv(uvs[i], uvs[i + 1]);
}
}
if (geometry.index !== null) {
const indices = geometry.index.array;
if (groups.length > 0) {
for (let g = 0; g < groups.length; g++) {
const group = groups[g];
material = isMultiMaterial === true ? object.material[group.materialIndex] : object.material;
if (material === void 0)
continue;
for (let i = group.start, l = group.start + group.count; i < l; i += 3) {
renderList.pushTriangle(indices[i], indices[i + 1], indices[i + 2], material);
}
}
} else {
for (let i = 0, l = indices.length; i < l; i += 3) {
renderList.pushTriangle(indices[i], indices[i + 1], indices[i + 2], material);
}
}
} else {
if (groups.length > 0) {
for (let g = 0; g < groups.length; g++) {
const group = groups[g];
material = isMultiMaterial === true ? object.material[group.materialIndex] : object.material;
if (material === void 0)
continue;
for (let i = group.start, l = group.start + group.count; i < l; i += 3) {
renderList.pushTriangle(i, i + 1, i + 2, material);
}
}
} else {
for (let i = 0, l = positions.length / 3; i < l; i += 3) {
renderList.pushTriangle(i, i + 1, i + 2, material);
}
}
}
} else if (object.isLine) {
_modelViewProjectionMatrix.multiplyMatrices(_viewProjectionMatrix, _modelMatrix);
const attributes = geometry.attributes;
if (attributes.position !== void 0) {
const positions = attributes.position.array;
for (let i = 0, l = positions.length; i < l; i += 3) {
renderList.pushVertex(positions[i], positions[i + 1], positions[i + 2]);
}
if (attributes.color !== void 0) {
const colors = attributes.color.array;
for (let i = 0, l = colors.length; i < l; i += 3) {
renderList.pushColor(colors[i], colors[i + 1], colors[i + 2]);
}
}
if (geometry.index !== null) {
const indices = geometry.index.array;
for (let i = 0, l = indices.length; i < l; i += 2) {
renderList.pushLine(indices[i], indices[i + 1]);
}
} else {
const step = object.isLineSegments ? 2 : 1;
for (let i = 0, l = positions.length / 3 - 1; i < l; i += step) {
renderList.pushLine(i, i + 1);
}
}
}
} else if (object.isPoints) {
_modelViewProjectionMatrix.multiplyMatrices(_viewProjectionMatrix, _modelMatrix);
const attributes = geometry.attributes;
if (attributes.position !== void 0) {
const positions = attributes.position.array;
for (let i = 0, l = positions.length; i < l; i += 3) {
_vector4.set(positions[i], positions[i + 1], positions[i + 2], 1);
_vector4.applyMatrix4(_modelViewProjectionMatrix);
pushPoint(_vector4, object, camera);
}
}
} else if (object.isSprite) {
object.modelViewMatrix.multiplyMatrices(camera.matrixWorldInverse, object.matrixWorld);
_vector4.set(_modelMatrix.elements[12], _modelMatrix.elements[13], _modelMatrix.elements[14], 1);
_vector4.applyMatrix4(_viewProjectionMatrix);
pushPoint(_vector4, object, camera);
}
}
if (sortElements === true) {
_renderData.elements.sort(painterSort);
}
return _renderData;
};
function pushPoint(_vector42, object, camera) {
const invW = 1 / _vector42.w;
_vector42.z *= invW;
if (_vector42.z >= -1 && _vector42.z <= 1) {
_sprite = getNextSpriteInPool();
_sprite.id = object.id;
_sprite.x = _vector42.x * invW;
_sprite.y = _vector42.y * invW;
_sprite.z = _vector42.z;
_sprite.renderOrder = object.renderOrder;
_sprite.object = object;
_sprite.rotation = object.rotation;
_sprite.scale.x = object.scale.x * Math.abs(
_sprite.x - (_vector42.x + camera.projectionMatrix.elements[0]) / (_vector42.w + camera.projectionMatrix.elements[12])
);
_sprite.scale.y = object.scale.y * Math.abs(
_sprite.y - (_vector42.y + camera.projectionMatrix.elements[5]) / (_vector42.w + camera.projectionMatrix.elements[13])
);
_sprite.material = object.material;
_renderData.elements.push(_sprite);
}
}
function getNextObjectInPool() {
if (_objectCount === _objectPoolLength) {
const object = new RenderableObject();
_objectPool.push(object);
_objectPoolLength++;
_objectCount++;
return object;
}
return _objectPool[_objectCount++];
}
function getNextVertexInPool() {
if (_vertexCount === _vertexPoolLength) {
const vertex = new RenderableVertex();
_vertexPool.push(vertex);
_vertexPoolLength++;
_vertexCount++;
return vertex;
}
return _vertexPool[_vertexCount++];
}
function getNextFaceInPool() {
if (_faceCount === _facePoolLength) {
const face = new RenderableFace();
_facePool.push(face);
_facePoolLength++;
_faceCount++;
return face;
}
return _facePool[_faceCount++];
}
function getNextLineInPool() {
if (_lineCount === _linePoolLength) {
const line = new RenderableLine();
_linePool.push(line);
_linePoolLength++;
_lineCount++;
return line;
}
return _linePool[_lineCount++];
}
function getNextSpriteInPool() {
if (_spriteCount === _spritePoolLength) {
const sprite = new RenderableSprite();
_spritePool.push(sprite);
_spritePoolLength++;
_spriteCount++;
return sprite;
}
return _spritePool[_spriteCount++];
}
function painterSort(a, b) {
if (a.renderOrder !== b.renderOrder) {
return a.renderOrder - b.renderOrder;
} else if (a.z !== b.z) {
return b.z - a.z;
} else if (a.id !== b.id) {
return a.id - b.id;
} else {
return 0;
}
}
function clipLine(s1, s2) {
let alpha1 = 0, alpha2 = 1;
const bc1near = s1.z + s1.w, bc2near = s2.z + s2.w, bc1far = -s1.z + s1.w, bc2far = -s2.z + s2.w;
if (bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0) {
return true;
} else if (bc1near < 0 && bc2near < 0 || bc1far < 0 && bc2far < 0) {
return false;
} else {
if (bc1near < 0) {
alpha1 = Math.max(alpha1, bc1near / (bc1near - bc2near));
} else if (bc2near < 0) {
alpha2 = Math.min(alpha2, bc1near / (bc1near - bc2near));
}
if (bc1far < 0) {
alpha1 = Math.max(alpha1, bc1far / (bc1far - bc2far));
} else if (bc2far < 0) {
alpha2 = Math.min(alpha2, bc1far / (bc1far - bc2far));
}
if (alpha2 < alpha1) {
return false;
} else {
s1.lerp(s2, alpha1);
s2.lerp(s1, 1 - alpha2);
return true;
}
}
}
}
}
exports.Projector = Projector;
exports.RenderableFace = RenderableFace;
exports.RenderableLine = RenderableLine;
exports.RenderableObject = RenderableObject;
exports.RenderableSprite = RenderableSprite;
exports.RenderableVertex = RenderableVertex;
//# sourceMappingURL=Projector.cjs.map
File diff suppressed because one or more lines are too long
+60
View File
@@ -0,0 +1,60 @@
import { Object3D, Scene, Camera, Vector2, Vector3, Vector4, Color, Material } from 'three'
export class RenderableObject {
id: number
object: Object3D
z: number
renderOrder: number
}
export class RenderableFace {
id: number
v1: RenderableVertex
v2: RenderableVertex
v3: RenderableVertex
normalModel: Vector3
vertexNormalsModel: Vector3[]
vertexNormalsLength: number
color: Color
material: Material
uvs: Vector2[]
z: number
renderOrder: number
}
export class RenderableVertex {
position: Vector3
positionWorld: Vector3
positionScreen: Vector4
visible: boolean
copy(vertex: RenderableVertex): void
}
export class RenderableLine {
id: number
v1: RenderableVertex
v2: RenderableVertex
vertexColors: Color[]
material: Material
z: number
renderOrder: number
}
export class RenderableSprite {
id: number
object: Object3D
x: number
y: number
z: number
rotation: number
scale: Vector2
material: Material
renderOrder: number
}
export class Projector {
constructor()
projectScene(scene: Scene, camera: Camera, sortObjects: boolean, sortElements: boolean): any
}
+500
View File
@@ -0,0 +1,500 @@
import { Vector3, Color, Vector2, Vector4, Box3, Matrix4, Frustum, Matrix3, DoubleSide } from "three";
class RenderableObject {
constructor() {
this.id = 0;
this.object = null;
this.z = 0;
this.renderOrder = 0;
}
}
class RenderableFace {
constructor() {
this.id = 0;
this.v1 = new RenderableVertex();
this.v2 = new RenderableVertex();
this.v3 = new RenderableVertex();
this.normalModel = new Vector3();
this.vertexNormalsModel = [new Vector3(), new Vector3(), new Vector3()];
this.vertexNormalsLength = 0;
this.color = new Color();
this.material = null;
this.uvs = [new Vector2(), new Vector2(), new Vector2()];
this.z = 0;
this.renderOrder = 0;
}
}
class RenderableVertex {
constructor() {
this.position = new Vector3();
this.positionWorld = new Vector3();
this.positionScreen = new Vector4();
this.visible = true;
}
copy(vertex) {
this.positionWorld.copy(vertex.positionWorld);
this.positionScreen.copy(vertex.positionScreen);
}
}
class RenderableLine {
constructor() {
this.id = 0;
this.v1 = new RenderableVertex();
this.v2 = new RenderableVertex();
this.vertexColors = [new Color(), new Color()];
this.material = null;
this.z = 0;
this.renderOrder = 0;
}
}
class RenderableSprite {
constructor() {
this.id = 0;
this.object = null;
this.x = 0;
this.y = 0;
this.z = 0;
this.rotation = 0;
this.scale = new Vector2();
this.material = null;
this.renderOrder = 0;
}
}
class Projector {
constructor() {
let _object, _objectCount, _objectPoolLength = 0, _vertex, _vertexCount, _vertexPoolLength = 0, _face, _faceCount, _facePoolLength = 0, _line, _lineCount, _linePoolLength = 0, _sprite, _spriteCount, _spritePoolLength = 0, _modelMatrix;
const _renderData = { objects: [], lights: [], elements: [] }, _vector3 = new Vector3(), _vector4 = new Vector4(), _clipBox = new Box3(new Vector3(-1, -1, -1), new Vector3(1, 1, 1)), _boundingBox = new Box3(), _points3 = new Array(3), _viewMatrix = new Matrix4(), _viewProjectionMatrix = new Matrix4(), _modelViewProjectionMatrix = new Matrix4(), _frustum = new Frustum(), _objectPool = [], _vertexPool = [], _facePool = [], _linePool = [], _spritePool = [];
function RenderList() {
const normals = [];
const colors = [];
const uvs = [];
let object = null;
const normalMatrix = new Matrix3();
function setObject(value) {
object = value;
normalMatrix.getNormalMatrix(object.matrixWorld);
normals.length = 0;
colors.length = 0;
uvs.length = 0;
}
function projectVertex(vertex) {
const position = vertex.position;
const positionWorld = vertex.positionWorld;
const positionScreen = vertex.positionScreen;
positionWorld.copy(position).applyMatrix4(_modelMatrix);
positionScreen.copy(positionWorld).applyMatrix4(_viewProjectionMatrix);
const invW = 1 / positionScreen.w;
positionScreen.x *= invW;
positionScreen.y *= invW;
positionScreen.z *= invW;
vertex.visible = positionScreen.x >= -1 && positionScreen.x <= 1 && positionScreen.y >= -1 && positionScreen.y <= 1 && positionScreen.z >= -1 && positionScreen.z <= 1;
}
function pushVertex(x, y, z) {
_vertex = getNextVertexInPool();
_vertex.position.set(x, y, z);
projectVertex(_vertex);
}
function pushNormal(x, y, z) {
normals.push(x, y, z);
}
function pushColor(r, g, b) {
colors.push(r, g, b);
}
function pushUv(x, y) {
uvs.push(x, y);
}
function checkTriangleVisibility(v1, v2, v3) {
if (v1.visible === true || v2.visible === true || v3.visible === true)
return true;
_points3[0] = v1.positionScreen;
_points3[1] = v2.positionScreen;
_points3[2] = v3.positionScreen;
return _clipBox.intersectsBox(_boundingBox.setFromPoints(_points3));
}
function checkBackfaceCulling(v1, v2, v3) {
return (v3.positionScreen.x - v1.positionScreen.x) * (v2.positionScreen.y - v1.positionScreen.y) - (v3.positionScreen.y - v1.positionScreen.y) * (v2.positionScreen.x - v1.positionScreen.x) < 0;
}
function pushLine(a, b) {
const v1 = _vertexPool[a];
const v2 = _vertexPool[b];
v1.positionScreen.copy(v1.position).applyMatrix4(_modelViewProjectionMatrix);
v2.positionScreen.copy(v2.position).applyMatrix4(_modelViewProjectionMatrix);
if (clipLine(v1.positionScreen, v2.positionScreen) === true) {
v1.positionScreen.multiplyScalar(1 / v1.positionScreen.w);
v2.positionScreen.multiplyScalar(1 / v2.positionScreen.w);
_line = getNextLineInPool();
_line.id = object.id;
_line.v1.copy(v1);
_line.v2.copy(v2);
_line.z = Math.max(v1.positionScreen.z, v2.positionScreen.z);
_line.renderOrder = object.renderOrder;
_line.material = object.material;
if (object.material.vertexColors) {
_line.vertexColors[0].fromArray(colors, a * 3);
_line.vertexColors[1].fromArray(colors, b * 3);
}
_renderData.elements.push(_line);
}
}
function pushTriangle(a, b, c, material) {
const v1 = _vertexPool[a];
const v2 = _vertexPool[b];
const v3 = _vertexPool[c];
if (checkTriangleVisibility(v1, v2, v3) === false)
return;
if (material.side === DoubleSide || checkBackfaceCulling(v1, v2, v3) === true) {
_face = getNextFaceInPool();
_face.id = object.id;
_face.v1.copy(v1);
_face.v2.copy(v2);
_face.v3.copy(v3);
_face.z = (v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z) / 3;
_face.renderOrder = object.renderOrder;
_vector3.subVectors(v3.position, v2.position);
_vector4.subVectors(v1.position, v2.position);
_vector3.cross(_vector4);
_face.normalModel.copy(_vector3);
_face.normalModel.applyMatrix3(normalMatrix).normalize();
for (let i = 0; i < 3; i++) {
const normal = _face.vertexNormalsModel[i];
normal.fromArray(normals, arguments[i] * 3);
normal.applyMatrix3(normalMatrix).normalize();
const uv = _face.uvs[i];
uv.fromArray(uvs, arguments[i] * 2);
}
_face.vertexNormalsLength = 3;
_face.material = material;
if (material.vertexColors) {
_face.color.fromArray(colors, a * 3);
}
_renderData.elements.push(_face);
}
}
return {
setObject,
projectVertex,
checkTriangleVisibility,
checkBackfaceCulling,
pushVertex,
pushNormal,
pushColor,
pushUv,
pushLine,
pushTriangle
};
}
const renderList = new RenderList();
function projectObject(object) {
if (object.visible === false)
return;
if (object.isLight) {
_renderData.lights.push(object);
} else if (object.isMesh || object.isLine || object.isPoints) {
if (object.material.visible === false)
return;
if (object.frustumCulled === true && _frustum.intersectsObject(object) === false)
return;
addObject(object);
} else if (object.isSprite) {
if (object.material.visible === false)
return;
if (object.frustumCulled === true && _frustum.intersectsSprite(object) === false)
return;
addObject(object);
}
const children = object.children;
for (let i = 0, l = children.length; i < l; i++) {
projectObject(children[i]);
}
}
function addObject(object) {
_object = getNextObjectInPool();
_object.id = object.id;
_object.object = object;
_vector3.setFromMatrixPosition(object.matrixWorld);
_vector3.applyMatrix4(_viewProjectionMatrix);
_object.z = _vector3.z;
_object.renderOrder = object.renderOrder;
_renderData.objects.push(_object);
}
this.projectScene = function(scene, camera, sortObjects, sortElements) {
_faceCount = 0;
_lineCount = 0;
_spriteCount = 0;
_renderData.elements.length = 0;
if (scene.matrixWorldAutoUpdate === true)
scene.updateMatrixWorld();
if (camera.parent === null && camera.matrixWorldAutoUpdate === true)
camera.updateMatrixWorld();
_viewMatrix.copy(camera.matrixWorldInverse);
_viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
_frustum.setFromProjectionMatrix(_viewProjectionMatrix);
_objectCount = 0;
_renderData.objects.length = 0;
_renderData.lights.length = 0;
projectObject(scene);
if (sortObjects === true) {
_renderData.objects.sort(painterSort);
}
const objects = _renderData.objects;
for (let o = 0, ol = objects.length; o < ol; o++) {
const object = objects[o].object;
const geometry = object.geometry;
renderList.setObject(object);
_modelMatrix = object.matrixWorld;
_vertexCount = 0;
if (object.isMesh) {
let material = object.material;
const isMultiMaterial = Array.isArray(material);
const attributes = geometry.attributes;
const groups = geometry.groups;
if (attributes.position === void 0)
continue;
const positions = attributes.position.array;
for (let i = 0, l = positions.length; i < l; i += 3) {
let x = positions[i];
let y = positions[i + 1];
let z = positions[i + 2];
const morphTargets = geometry.morphAttributes.position;
if (morphTargets !== void 0) {
const morphTargetsRelative = geometry.morphTargetsRelative;
const morphInfluences = object.morphTargetInfluences;
for (let t = 0, tl = morphTargets.length; t < tl; t++) {
const influence = morphInfluences[t];
if (influence === 0)
continue;
const target = morphTargets[t];
if (morphTargetsRelative) {
x += target.getX(i / 3) * influence;
y += target.getY(i / 3) * influence;
z += target.getZ(i / 3) * influence;
} else {
x += (target.getX(i / 3) - positions[i]) * influence;
y += (target.getY(i / 3) - positions[i + 1]) * influence;
z += (target.getZ(i / 3) - positions[i + 2]) * influence;
}
}
}
renderList.pushVertex(x, y, z);
}
if (attributes.normal !== void 0) {
const normals = attributes.normal.array;
for (let i = 0, l = normals.length; i < l; i += 3) {
renderList.pushNormal(normals[i], normals[i + 1], normals[i + 2]);
}
}
if (attributes.color !== void 0) {
const colors = attributes.color.array;
for (let i = 0, l = colors.length; i < l; i += 3) {
renderList.pushColor(colors[i], colors[i + 1], colors[i + 2]);
}
}
if (attributes.uv !== void 0) {
const uvs = attributes.uv.array;
for (let i = 0, l = uvs.length; i < l; i += 2) {
renderList.pushUv(uvs[i], uvs[i + 1]);
}
}
if (geometry.index !== null) {
const indices = geometry.index.array;
if (groups.length > 0) {
for (let g = 0; g < groups.length; g++) {
const group = groups[g];
material = isMultiMaterial === true ? object.material[group.materialIndex] : object.material;
if (material === void 0)
continue;
for (let i = group.start, l = group.start + group.count; i < l; i += 3) {
renderList.pushTriangle(indices[i], indices[i + 1], indices[i + 2], material);
}
}
} else {
for (let i = 0, l = indices.length; i < l; i += 3) {
renderList.pushTriangle(indices[i], indices[i + 1], indices[i + 2], material);
}
}
} else {
if (groups.length > 0) {
for (let g = 0; g < groups.length; g++) {
const group = groups[g];
material = isMultiMaterial === true ? object.material[group.materialIndex] : object.material;
if (material === void 0)
continue;
for (let i = group.start, l = group.start + group.count; i < l; i += 3) {
renderList.pushTriangle(i, i + 1, i + 2, material);
}
}
} else {
for (let i = 0, l = positions.length / 3; i < l; i += 3) {
renderList.pushTriangle(i, i + 1, i + 2, material);
}
}
}
} else if (object.isLine) {
_modelViewProjectionMatrix.multiplyMatrices(_viewProjectionMatrix, _modelMatrix);
const attributes = geometry.attributes;
if (attributes.position !== void 0) {
const positions = attributes.position.array;
for (let i = 0, l = positions.length; i < l; i += 3) {
renderList.pushVertex(positions[i], positions[i + 1], positions[i + 2]);
}
if (attributes.color !== void 0) {
const colors = attributes.color.array;
for (let i = 0, l = colors.length; i < l; i += 3) {
renderList.pushColor(colors[i], colors[i + 1], colors[i + 2]);
}
}
if (geometry.index !== null) {
const indices = geometry.index.array;
for (let i = 0, l = indices.length; i < l; i += 2) {
renderList.pushLine(indices[i], indices[i + 1]);
}
} else {
const step = object.isLineSegments ? 2 : 1;
for (let i = 0, l = positions.length / 3 - 1; i < l; i += step) {
renderList.pushLine(i, i + 1);
}
}
}
} else if (object.isPoints) {
_modelViewProjectionMatrix.multiplyMatrices(_viewProjectionMatrix, _modelMatrix);
const attributes = geometry.attributes;
if (attributes.position !== void 0) {
const positions = attributes.position.array;
for (let i = 0, l = positions.length; i < l; i += 3) {
_vector4.set(positions[i], positions[i + 1], positions[i + 2], 1);
_vector4.applyMatrix4(_modelViewProjectionMatrix);
pushPoint(_vector4, object, camera);
}
}
} else if (object.isSprite) {
object.modelViewMatrix.multiplyMatrices(camera.matrixWorldInverse, object.matrixWorld);
_vector4.set(_modelMatrix.elements[12], _modelMatrix.elements[13], _modelMatrix.elements[14], 1);
_vector4.applyMatrix4(_viewProjectionMatrix);
pushPoint(_vector4, object, camera);
}
}
if (sortElements === true) {
_renderData.elements.sort(painterSort);
}
return _renderData;
};
function pushPoint(_vector42, object, camera) {
const invW = 1 / _vector42.w;
_vector42.z *= invW;
if (_vector42.z >= -1 && _vector42.z <= 1) {
_sprite = getNextSpriteInPool();
_sprite.id = object.id;
_sprite.x = _vector42.x * invW;
_sprite.y = _vector42.y * invW;
_sprite.z = _vector42.z;
_sprite.renderOrder = object.renderOrder;
_sprite.object = object;
_sprite.rotation = object.rotation;
_sprite.scale.x = object.scale.x * Math.abs(
_sprite.x - (_vector42.x + camera.projectionMatrix.elements[0]) / (_vector42.w + camera.projectionMatrix.elements[12])
);
_sprite.scale.y = object.scale.y * Math.abs(
_sprite.y - (_vector42.y + camera.projectionMatrix.elements[5]) / (_vector42.w + camera.projectionMatrix.elements[13])
);
_sprite.material = object.material;
_renderData.elements.push(_sprite);
}
}
function getNextObjectInPool() {
if (_objectCount === _objectPoolLength) {
const object = new RenderableObject();
_objectPool.push(object);
_objectPoolLength++;
_objectCount++;
return object;
}
return _objectPool[_objectCount++];
}
function getNextVertexInPool() {
if (_vertexCount === _vertexPoolLength) {
const vertex = new RenderableVertex();
_vertexPool.push(vertex);
_vertexPoolLength++;
_vertexCount++;
return vertex;
}
return _vertexPool[_vertexCount++];
}
function getNextFaceInPool() {
if (_faceCount === _facePoolLength) {
const face = new RenderableFace();
_facePool.push(face);
_facePoolLength++;
_faceCount++;
return face;
}
return _facePool[_faceCount++];
}
function getNextLineInPool() {
if (_lineCount === _linePoolLength) {
const line = new RenderableLine();
_linePool.push(line);
_linePoolLength++;
_lineCount++;
return line;
}
return _linePool[_lineCount++];
}
function getNextSpriteInPool() {
if (_spriteCount === _spritePoolLength) {
const sprite = new RenderableSprite();
_spritePool.push(sprite);
_spritePoolLength++;
_spriteCount++;
return sprite;
}
return _spritePool[_spriteCount++];
}
function painterSort(a, b) {
if (a.renderOrder !== b.renderOrder) {
return a.renderOrder - b.renderOrder;
} else if (a.z !== b.z) {
return b.z - a.z;
} else if (a.id !== b.id) {
return a.id - b.id;
} else {
return 0;
}
}
function clipLine(s1, s2) {
let alpha1 = 0, alpha2 = 1;
const bc1near = s1.z + s1.w, bc2near = s2.z + s2.w, bc1far = -s1.z + s1.w, bc2far = -s2.z + s2.w;
if (bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0) {
return true;
} else if (bc1near < 0 && bc2near < 0 || bc1far < 0 && bc2far < 0) {
return false;
} else {
if (bc1near < 0) {
alpha1 = Math.max(alpha1, bc1near / (bc1near - bc2near));
} else if (bc2near < 0) {
alpha2 = Math.min(alpha2, bc1near / (bc1near - bc2near));
}
if (bc1far < 0) {
alpha1 = Math.max(alpha1, bc1far / (bc1far - bc2far));
} else if (bc2far < 0) {
alpha2 = Math.min(alpha2, bc1far / (bc1far - bc2far));
}
if (alpha2 < alpha1) {
return false;
} else {
s1.lerp(s2, alpha1);
s2.lerp(s1, 1 - alpha2);
return true;
}
}
}
}
}
export {
Projector,
RenderableFace,
RenderableLine,
RenderableObject,
RenderableSprite,
RenderableVertex
};
//# sourceMappingURL=Projector.js.map
File diff suppressed because one or more lines are too long
+312
View File
@@ -0,0 +1,312 @@
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const THREE = require("three");
const Projector = require("./Projector.cjs");
class SVGObject extends THREE.Object3D {
constructor(node) {
super();
this.isSVGObject = true;
this.node = node;
}
}
class SVGRenderer {
constructor() {
let _renderData, _elements, _lights, _svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf, _v1, _v2, _v3, _svgNode, _pathCount = 0, _precision = null, _quality = 1, _currentPath, _currentStyle;
const _this = this, _clipBox = new THREE.Box2(), _elemBox = new THREE.Box2(), _color = new THREE.Color(), _diffuseColor = new THREE.Color(), _ambientLight = new THREE.Color(), _directionalLights = new THREE.Color(), _pointLights = new THREE.Color(), _clearColor = new THREE.Color(), _vector3 = new THREE.Vector3(), _centroid = new THREE.Vector3(), _normal = new THREE.Vector3(), _normalViewMatrix = new THREE.Matrix3(), _viewMatrix = new THREE.Matrix4(), _viewProjectionMatrix = new THREE.Matrix4(), _svgPathPool = [], _projector = new Projector.Projector(), _svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.domElement = _svg;
this.autoClear = true;
this.sortObjects = true;
this.sortElements = true;
this.overdraw = 0.5;
this.info = {
render: {
vertices: 0,
faces: 0
}
};
this.setQuality = function(quality) {
switch (quality) {
case "high":
_quality = 1;
break;
case "low":
_quality = 0;
break;
}
};
this.setClearColor = function(color) {
_clearColor.set(color);
};
this.setPixelRatio = function() {
};
this.setSize = function(width, height) {
_svgWidth = width;
_svgHeight = height;
_svgWidthHalf = _svgWidth / 2;
_svgHeightHalf = _svgHeight / 2;
_svg.setAttribute("viewBox", -_svgWidthHalf + " " + -_svgHeightHalf + " " + _svgWidth + " " + _svgHeight);
_svg.setAttribute("width", _svgWidth);
_svg.setAttribute("height", _svgHeight);
_clipBox.min.set(-_svgWidthHalf, -_svgHeightHalf);
_clipBox.max.set(_svgWidthHalf, _svgHeightHalf);
};
this.getSize = function() {
return {
width: _svgWidth,
height: _svgHeight
};
};
this.setPrecision = function(precision) {
_precision = precision;
};
function removeChildNodes() {
_pathCount = 0;
while (_svg.childNodes.length > 0) {
_svg.removeChild(_svg.childNodes[0]);
}
}
function convert(c) {
return _precision !== null ? c.toFixed(_precision) : c;
}
this.clear = function() {
removeChildNodes();
_svg.style.backgroundColor = _clearColor.getStyle();
};
this.render = function(scene, camera) {
if (camera instanceof THREE.Camera === false) {
console.error("THREE.SVGRenderer.render: camera is not an instance of Camera.");
return;
}
const background = scene.background;
if (background && background.isColor) {
removeChildNodes();
_svg.style.backgroundColor = background.getStyle();
} else if (this.autoClear === true) {
this.clear();
}
_this.info.render.vertices = 0;
_this.info.render.faces = 0;
_viewMatrix.copy(camera.matrixWorldInverse);
_viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
_renderData = _projector.projectScene(scene, camera, this.sortObjects, this.sortElements);
_elements = _renderData.elements;
_lights = _renderData.lights;
_normalViewMatrix.getNormalMatrix(camera.matrixWorldInverse);
calculateLights(_lights);
_currentPath = "";
_currentStyle = "";
for (let e = 0, el = _elements.length; e < el; e++) {
const element = _elements[e];
const material = element.material;
if (material === void 0 || material.opacity === 0)
continue;
_elemBox.makeEmpty();
if (element instanceof Projector.RenderableSprite) {
_v1 = element;
_v1.x *= _svgWidthHalf;
_v1.y *= -_svgHeightHalf;
renderSprite(_v1, element, material);
} else if (element instanceof Projector.RenderableLine) {
_v1 = element.v1;
_v2 = element.v2;
_v1.positionScreen.x *= _svgWidthHalf;
_v1.positionScreen.y *= -_svgHeightHalf;
_v2.positionScreen.x *= _svgWidthHalf;
_v2.positionScreen.y *= -_svgHeightHalf;
_elemBox.setFromPoints([_v1.positionScreen, _v2.positionScreen]);
if (_clipBox.intersectsBox(_elemBox) === true) {
renderLine(_v1, _v2, material);
}
} else if (element instanceof Projector.RenderableFace) {
_v1 = element.v1;
_v2 = element.v2;
_v3 = element.v3;
if (_v1.positionScreen.z < -1 || _v1.positionScreen.z > 1)
continue;
if (_v2.positionScreen.z < -1 || _v2.positionScreen.z > 1)
continue;
if (_v3.positionScreen.z < -1 || _v3.positionScreen.z > 1)
continue;
_v1.positionScreen.x *= _svgWidthHalf;
_v1.positionScreen.y *= -_svgHeightHalf;
_v2.positionScreen.x *= _svgWidthHalf;
_v2.positionScreen.y *= -_svgHeightHalf;
_v3.positionScreen.x *= _svgWidthHalf;
_v3.positionScreen.y *= -_svgHeightHalf;
if (this.overdraw > 0) {
expand(_v1.positionScreen, _v2.positionScreen, this.overdraw);
expand(_v2.positionScreen, _v3.positionScreen, this.overdraw);
expand(_v3.positionScreen, _v1.positionScreen, this.overdraw);
}
_elemBox.setFromPoints([_v1.positionScreen, _v2.positionScreen, _v3.positionScreen]);
if (_clipBox.intersectsBox(_elemBox) === true) {
renderFace3(_v1, _v2, _v3, element, material);
}
}
}
flushPath();
scene.traverseVisible(function(object) {
if (object.isSVGObject) {
_vector3.setFromMatrixPosition(object.matrixWorld);
_vector3.applyMatrix4(_viewProjectionMatrix);
if (_vector3.z < -1 || _vector3.z > 1)
return;
const x = _vector3.x * _svgWidthHalf;
const y = -_vector3.y * _svgHeightHalf;
const node = object.node;
node.setAttribute("transform", "translate(" + x + "," + y + ")");
_svg.appendChild(node);
}
});
};
function calculateLights(lights) {
_ambientLight.setRGB(0, 0, 0);
_directionalLights.setRGB(0, 0, 0);
_pointLights.setRGB(0, 0, 0);
for (let l = 0, ll = lights.length; l < ll; l++) {
const light = lights[l];
const lightColor = light.color;
if (light.isAmbientLight) {
_ambientLight.r += lightColor.r;
_ambientLight.g += lightColor.g;
_ambientLight.b += lightColor.b;
} else if (light.isDirectionalLight) {
_directionalLights.r += lightColor.r;
_directionalLights.g += lightColor.g;
_directionalLights.b += lightColor.b;
} else if (light.isPointLight) {
_pointLights.r += lightColor.r;
_pointLights.g += lightColor.g;
_pointLights.b += lightColor.b;
}
}
}
function calculateLight(lights, position, normal, color) {
for (let l = 0, ll = lights.length; l < ll; l++) {
const light = lights[l];
const lightColor = light.color;
if (light.isDirectionalLight) {
const lightPosition = _vector3.setFromMatrixPosition(light.matrixWorld).normalize();
let amount = normal.dot(lightPosition);
if (amount <= 0)
continue;
amount *= light.intensity;
color.r += lightColor.r * amount;
color.g += lightColor.g * amount;
color.b += lightColor.b * amount;
} else if (light.isPointLight) {
const lightPosition = _vector3.setFromMatrixPosition(light.matrixWorld);
let amount = normal.dot(_vector3.subVectors(lightPosition, position).normalize());
if (amount <= 0)
continue;
amount *= light.distance == 0 ? 1 : 1 - Math.min(position.distanceTo(lightPosition) / light.distance, 1);
if (amount == 0)
continue;
amount *= light.intensity;
color.r += lightColor.r * amount;
color.g += lightColor.g * amount;
color.b += lightColor.b * amount;
}
}
}
function renderSprite(v1, element, material) {
let scaleX = element.scale.x * _svgWidthHalf;
let scaleY = element.scale.y * _svgHeightHalf;
if (material.isPointsMaterial) {
scaleX *= material.size;
scaleY *= material.size;
}
const path = "M" + convert(v1.x - scaleX * 0.5) + "," + convert(v1.y - scaleY * 0.5) + "h" + convert(scaleX) + "v" + convert(scaleY) + "h" + convert(-scaleX) + "z";
let style = "";
if (material.isSpriteMaterial || material.isPointsMaterial) {
style = "fill:" + material.color.getStyle() + ";fill-opacity:" + material.opacity;
}
addPath(style, path);
}
function renderLine(v1, v2, material) {
const path = "M" + convert(v1.positionScreen.x) + "," + convert(v1.positionScreen.y) + "L" + convert(v2.positionScreen.x) + "," + convert(v2.positionScreen.y);
if (material.isLineBasicMaterial) {
let style = "fill:none;stroke:" + material.color.getStyle() + ";stroke-opacity:" + material.opacity + ";stroke-width:" + material.linewidth + ";stroke-linecap:" + material.linecap;
if (material.isLineDashedMaterial) {
style = style + ";stroke-dasharray:" + material.dashSize + "," + material.gapSize;
}
addPath(style, path);
}
}
function renderFace3(v1, v2, v3, element, material) {
_this.info.render.vertices += 3;
_this.info.render.faces++;
const path = "M" + convert(v1.positionScreen.x) + "," + convert(v1.positionScreen.y) + "L" + convert(v2.positionScreen.x) + "," + convert(v2.positionScreen.y) + "L" + convert(v3.positionScreen.x) + "," + convert(v3.positionScreen.y) + "z";
let style = "";
if (material.isMeshBasicMaterial) {
_color.copy(material.color);
if (material.vertexColors) {
_color.multiply(element.color);
}
} else if (material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial) {
_diffuseColor.copy(material.color);
if (material.vertexColors) {
_diffuseColor.multiply(element.color);
}
_color.copy(_ambientLight);
_centroid.copy(v1.positionWorld).add(v2.positionWorld).add(v3.positionWorld).divideScalar(3);
calculateLight(_lights, _centroid, element.normalModel, _color);
_color.multiply(_diffuseColor).add(material.emissive);
} else if (material.isMeshNormalMaterial) {
_normal.copy(element.normalModel).applyMatrix3(_normalViewMatrix).normalize();
_color.setRGB(_normal.x, _normal.y, _normal.z).multiplyScalar(0.5).addScalar(0.5);
}
if (material.wireframe) {
style = "fill:none;stroke:" + _color.getStyle() + ";stroke-opacity:" + material.opacity + ";stroke-width:" + material.wireframeLinewidth + ";stroke-linecap:" + material.wireframeLinecap + ";stroke-linejoin:" + material.wireframeLinejoin;
} else {
style = "fill:" + _color.getStyle() + ";fill-opacity:" + material.opacity;
}
addPath(style, path);
}
function expand(v1, v2, pixels) {
let x = v2.x - v1.x, y = v2.y - v1.y;
const det = x * x + y * y;
if (det === 0)
return;
const idet = pixels / Math.sqrt(det);
x *= idet;
y *= idet;
v2.x += x;
v2.y += y;
v1.x -= x;
v1.y -= y;
}
function addPath(style, path) {
if (_currentStyle === style) {
_currentPath += path;
} else {
flushPath();
_currentStyle = style;
_currentPath = path;
}
}
function flushPath() {
if (_currentPath) {
_svgNode = getPathNode(_pathCount++);
_svgNode.setAttribute("d", _currentPath);
_svgNode.setAttribute("style", _currentStyle);
_svg.appendChild(_svgNode);
}
_currentPath = "";
_currentStyle = "";
}
function getPathNode(id) {
if (_svgPathPool[id] == null) {
_svgPathPool[id] = document.createElementNS("http://www.w3.org/2000/svg", "path");
if (_quality == 0) {
_svgPathPool[id].setAttribute("shape-rendering", "crispEdges");
}
return _svgPathPool[id];
}
return _svgPathPool[id];
}
}
}
exports.SVGObject = SVGObject;
exports.SVGRenderer = SVGRenderer;
//# sourceMappingURL=SVGRenderer.cjs.map
File diff suppressed because one or more lines are too long
+25
View File
@@ -0,0 +1,25 @@
import { Object3D, Color, Scene, Camera } from 'three'
export class SVGObject extends Object3D {
constructor(node: SVGElement)
node: SVGElement
}
export class SVGRenderer {
constructor()
domElement: SVGElement
autoClear: boolean
sortObjects: boolean
sortElements: boolean
overdraw: number
info: { render: { vertices: number; faces: number } }
getSize(): { width: number; height: number }
setQuality(quality: string): void
setClearColor(color: Color, alpha: number): void
setPixelRatio(): void
setSize(width: number, height: number): void
setPrecision(precision: number): void
clear(): void
render(scene: Scene, camera: Camera): void
}
+312
View File
@@ -0,0 +1,312 @@
import { Object3D, Box2, Color, Vector3, Matrix3, Matrix4, Camera } from "three";
import { Projector, RenderableSprite, RenderableLine, RenderableFace } from "./Projector.js";
class SVGObject extends Object3D {
constructor(node) {
super();
this.isSVGObject = true;
this.node = node;
}
}
class SVGRenderer {
constructor() {
let _renderData, _elements, _lights, _svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf, _v1, _v2, _v3, _svgNode, _pathCount = 0, _precision = null, _quality = 1, _currentPath, _currentStyle;
const _this = this, _clipBox = new Box2(), _elemBox = new Box2(), _color = new Color(), _diffuseColor = new Color(), _ambientLight = new Color(), _directionalLights = new Color(), _pointLights = new Color(), _clearColor = new Color(), _vector3 = new Vector3(), _centroid = new Vector3(), _normal = new Vector3(), _normalViewMatrix = new Matrix3(), _viewMatrix = new Matrix4(), _viewProjectionMatrix = new Matrix4(), _svgPathPool = [], _projector = new Projector(), _svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
this.domElement = _svg;
this.autoClear = true;
this.sortObjects = true;
this.sortElements = true;
this.overdraw = 0.5;
this.info = {
render: {
vertices: 0,
faces: 0
}
};
this.setQuality = function(quality) {
switch (quality) {
case "high":
_quality = 1;
break;
case "low":
_quality = 0;
break;
}
};
this.setClearColor = function(color) {
_clearColor.set(color);
};
this.setPixelRatio = function() {
};
this.setSize = function(width, height) {
_svgWidth = width;
_svgHeight = height;
_svgWidthHalf = _svgWidth / 2;
_svgHeightHalf = _svgHeight / 2;
_svg.setAttribute("viewBox", -_svgWidthHalf + " " + -_svgHeightHalf + " " + _svgWidth + " " + _svgHeight);
_svg.setAttribute("width", _svgWidth);
_svg.setAttribute("height", _svgHeight);
_clipBox.min.set(-_svgWidthHalf, -_svgHeightHalf);
_clipBox.max.set(_svgWidthHalf, _svgHeightHalf);
};
this.getSize = function() {
return {
width: _svgWidth,
height: _svgHeight
};
};
this.setPrecision = function(precision) {
_precision = precision;
};
function removeChildNodes() {
_pathCount = 0;
while (_svg.childNodes.length > 0) {
_svg.removeChild(_svg.childNodes[0]);
}
}
function convert(c) {
return _precision !== null ? c.toFixed(_precision) : c;
}
this.clear = function() {
removeChildNodes();
_svg.style.backgroundColor = _clearColor.getStyle();
};
this.render = function(scene, camera) {
if (camera instanceof Camera === false) {
console.error("THREE.SVGRenderer.render: camera is not an instance of Camera.");
return;
}
const background = scene.background;
if (background && background.isColor) {
removeChildNodes();
_svg.style.backgroundColor = background.getStyle();
} else if (this.autoClear === true) {
this.clear();
}
_this.info.render.vertices = 0;
_this.info.render.faces = 0;
_viewMatrix.copy(camera.matrixWorldInverse);
_viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix, _viewMatrix);
_renderData = _projector.projectScene(scene, camera, this.sortObjects, this.sortElements);
_elements = _renderData.elements;
_lights = _renderData.lights;
_normalViewMatrix.getNormalMatrix(camera.matrixWorldInverse);
calculateLights(_lights);
_currentPath = "";
_currentStyle = "";
for (let e = 0, el = _elements.length; e < el; e++) {
const element = _elements[e];
const material = element.material;
if (material === void 0 || material.opacity === 0)
continue;
_elemBox.makeEmpty();
if (element instanceof RenderableSprite) {
_v1 = element;
_v1.x *= _svgWidthHalf;
_v1.y *= -_svgHeightHalf;
renderSprite(_v1, element, material);
} else if (element instanceof RenderableLine) {
_v1 = element.v1;
_v2 = element.v2;
_v1.positionScreen.x *= _svgWidthHalf;
_v1.positionScreen.y *= -_svgHeightHalf;
_v2.positionScreen.x *= _svgWidthHalf;
_v2.positionScreen.y *= -_svgHeightHalf;
_elemBox.setFromPoints([_v1.positionScreen, _v2.positionScreen]);
if (_clipBox.intersectsBox(_elemBox) === true) {
renderLine(_v1, _v2, material);
}
} else if (element instanceof RenderableFace) {
_v1 = element.v1;
_v2 = element.v2;
_v3 = element.v3;
if (_v1.positionScreen.z < -1 || _v1.positionScreen.z > 1)
continue;
if (_v2.positionScreen.z < -1 || _v2.positionScreen.z > 1)
continue;
if (_v3.positionScreen.z < -1 || _v3.positionScreen.z > 1)
continue;
_v1.positionScreen.x *= _svgWidthHalf;
_v1.positionScreen.y *= -_svgHeightHalf;
_v2.positionScreen.x *= _svgWidthHalf;
_v2.positionScreen.y *= -_svgHeightHalf;
_v3.positionScreen.x *= _svgWidthHalf;
_v3.positionScreen.y *= -_svgHeightHalf;
if (this.overdraw > 0) {
expand(_v1.positionScreen, _v2.positionScreen, this.overdraw);
expand(_v2.positionScreen, _v3.positionScreen, this.overdraw);
expand(_v3.positionScreen, _v1.positionScreen, this.overdraw);
}
_elemBox.setFromPoints([_v1.positionScreen, _v2.positionScreen, _v3.positionScreen]);
if (_clipBox.intersectsBox(_elemBox) === true) {
renderFace3(_v1, _v2, _v3, element, material);
}
}
}
flushPath();
scene.traverseVisible(function(object) {
if (object.isSVGObject) {
_vector3.setFromMatrixPosition(object.matrixWorld);
_vector3.applyMatrix4(_viewProjectionMatrix);
if (_vector3.z < -1 || _vector3.z > 1)
return;
const x = _vector3.x * _svgWidthHalf;
const y = -_vector3.y * _svgHeightHalf;
const node = object.node;
node.setAttribute("transform", "translate(" + x + "," + y + ")");
_svg.appendChild(node);
}
});
};
function calculateLights(lights) {
_ambientLight.setRGB(0, 0, 0);
_directionalLights.setRGB(0, 0, 0);
_pointLights.setRGB(0, 0, 0);
for (let l = 0, ll = lights.length; l < ll; l++) {
const light = lights[l];
const lightColor = light.color;
if (light.isAmbientLight) {
_ambientLight.r += lightColor.r;
_ambientLight.g += lightColor.g;
_ambientLight.b += lightColor.b;
} else if (light.isDirectionalLight) {
_directionalLights.r += lightColor.r;
_directionalLights.g += lightColor.g;
_directionalLights.b += lightColor.b;
} else if (light.isPointLight) {
_pointLights.r += lightColor.r;
_pointLights.g += lightColor.g;
_pointLights.b += lightColor.b;
}
}
}
function calculateLight(lights, position, normal, color) {
for (let l = 0, ll = lights.length; l < ll; l++) {
const light = lights[l];
const lightColor = light.color;
if (light.isDirectionalLight) {
const lightPosition = _vector3.setFromMatrixPosition(light.matrixWorld).normalize();
let amount = normal.dot(lightPosition);
if (amount <= 0)
continue;
amount *= light.intensity;
color.r += lightColor.r * amount;
color.g += lightColor.g * amount;
color.b += lightColor.b * amount;
} else if (light.isPointLight) {
const lightPosition = _vector3.setFromMatrixPosition(light.matrixWorld);
let amount = normal.dot(_vector3.subVectors(lightPosition, position).normalize());
if (amount <= 0)
continue;
amount *= light.distance == 0 ? 1 : 1 - Math.min(position.distanceTo(lightPosition) / light.distance, 1);
if (amount == 0)
continue;
amount *= light.intensity;
color.r += lightColor.r * amount;
color.g += lightColor.g * amount;
color.b += lightColor.b * amount;
}
}
}
function renderSprite(v1, element, material) {
let scaleX = element.scale.x * _svgWidthHalf;
let scaleY = element.scale.y * _svgHeightHalf;
if (material.isPointsMaterial) {
scaleX *= material.size;
scaleY *= material.size;
}
const path = "M" + convert(v1.x - scaleX * 0.5) + "," + convert(v1.y - scaleY * 0.5) + "h" + convert(scaleX) + "v" + convert(scaleY) + "h" + convert(-scaleX) + "z";
let style = "";
if (material.isSpriteMaterial || material.isPointsMaterial) {
style = "fill:" + material.color.getStyle() + ";fill-opacity:" + material.opacity;
}
addPath(style, path);
}
function renderLine(v1, v2, material) {
const path = "M" + convert(v1.positionScreen.x) + "," + convert(v1.positionScreen.y) + "L" + convert(v2.positionScreen.x) + "," + convert(v2.positionScreen.y);
if (material.isLineBasicMaterial) {
let style = "fill:none;stroke:" + material.color.getStyle() + ";stroke-opacity:" + material.opacity + ";stroke-width:" + material.linewidth + ";stroke-linecap:" + material.linecap;
if (material.isLineDashedMaterial) {
style = style + ";stroke-dasharray:" + material.dashSize + "," + material.gapSize;
}
addPath(style, path);
}
}
function renderFace3(v1, v2, v3, element, material) {
_this.info.render.vertices += 3;
_this.info.render.faces++;
const path = "M" + convert(v1.positionScreen.x) + "," + convert(v1.positionScreen.y) + "L" + convert(v2.positionScreen.x) + "," + convert(v2.positionScreen.y) + "L" + convert(v3.positionScreen.x) + "," + convert(v3.positionScreen.y) + "z";
let style = "";
if (material.isMeshBasicMaterial) {
_color.copy(material.color);
if (material.vertexColors) {
_color.multiply(element.color);
}
} else if (material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial) {
_diffuseColor.copy(material.color);
if (material.vertexColors) {
_diffuseColor.multiply(element.color);
}
_color.copy(_ambientLight);
_centroid.copy(v1.positionWorld).add(v2.positionWorld).add(v3.positionWorld).divideScalar(3);
calculateLight(_lights, _centroid, element.normalModel, _color);
_color.multiply(_diffuseColor).add(material.emissive);
} else if (material.isMeshNormalMaterial) {
_normal.copy(element.normalModel).applyMatrix3(_normalViewMatrix).normalize();
_color.setRGB(_normal.x, _normal.y, _normal.z).multiplyScalar(0.5).addScalar(0.5);
}
if (material.wireframe) {
style = "fill:none;stroke:" + _color.getStyle() + ";stroke-opacity:" + material.opacity + ";stroke-width:" + material.wireframeLinewidth + ";stroke-linecap:" + material.wireframeLinecap + ";stroke-linejoin:" + material.wireframeLinejoin;
} else {
style = "fill:" + _color.getStyle() + ";fill-opacity:" + material.opacity;
}
addPath(style, path);
}
function expand(v1, v2, pixels) {
let x = v2.x - v1.x, y = v2.y - v1.y;
const det = x * x + y * y;
if (det === 0)
return;
const idet = pixels / Math.sqrt(det);
x *= idet;
y *= idet;
v2.x += x;
v2.y += y;
v1.x -= x;
v1.y -= y;
}
function addPath(style, path) {
if (_currentStyle === style) {
_currentPath += path;
} else {
flushPath();
_currentStyle = style;
_currentPath = path;
}
}
function flushPath() {
if (_currentPath) {
_svgNode = getPathNode(_pathCount++);
_svgNode.setAttribute("d", _currentPath);
_svgNode.setAttribute("style", _currentStyle);
_svg.appendChild(_svgNode);
}
_currentPath = "";
_currentStyle = "";
}
function getPathNode(id) {
if (_svgPathPool[id] == null) {
_svgPathPool[id] = document.createElementNS("http://www.w3.org/2000/svg", "path");
if (_quality == 0) {
_svgPathPool[id].setAttribute("shape-rendering", "crispEdges");
}
return _svgPathPool[id];
}
return _svgPathPool[id];
}
}
}
export {
SVGObject,
SVGRenderer
};
//# sourceMappingURL=SVGRenderer.js.map
File diff suppressed because one or more lines are too long