three-base 2.0.87 → 2.0.88

package/Mirror.ts

@@ -1,254 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2023-08-04 17:17:15 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-01-20 05:33:51
- */
-
-import { BufferGeometry, Camera, Color, DoubleSide, Group, HalfFloatType, Material, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, Scene, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer } from "three";
-
-
-// 镜子模型
-export default class Mirror extends Mesh {
-
-    constructor(geometry: BufferGeometry = Mirror.geometry) {
-        super(geometry);
-    }
-
-    // 正方形网格
-    static geometry = (() => {
-        const geometry = new PlaneGeometry(10, 10, 1, 1);
-        return geometry;
-    })();
-
-    isReflector = true;
-
-    type = 'Reflector';
-
-    camera = new PerspectiveCamera();
-
-    reflectorPlane = new Plane();
-    normal = new Vector3();
-    reflectorWorldPosition = new Vector3();
-    cameraWorldPosition = new Vector3();
-    rotationMatrix = new Matrix4();
-    lookAtPosition = new Vector3(0, 0, - 1);
-    clipPlane = new Vector4();
-
-    view = new Vector3();
-    target = new Vector3();
-    q = new Vector4();
-
-    textureMatrix = new Matrix4();
-    virtualCamera = this.camera;
-
-    renderTarget = new WebGLRenderTarget(2048, 2048, { samples: 0, type: HalfFloatType });
-
-    material = new ShaderMaterial({
-        uniforms: {
-            'color': {
-                value: new Color("#b6b6b6")
-            },
-
-            'tDiffuse': {
-                value: this.renderTarget.texture
-            },
-
-            'textureMatrix': {
-                value: this.textureMatrix
-            },
-            blurAmount: {
-                value: 0.5
-            } // 模糊程度，可以根据需求调整
-
-        },
-
-        vertexShader: /* glsl */`
-                    uniform mat4 textureMatrix;
-                    varying vec4 vUv;
-        
-                    #include <common>
-                    #include <logdepthbuf_pars_vertex>
-        
-                    void main() {
-        
-                        vUv = textureMatrix * vec4( position, 1.0 );
-        
-                        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-        
-                        #include <logdepthbuf_vertex>
-        
-                    }`,
-
-        fragmentShader: /* glsl */`
-            uniform vec3 color;
-            uniform sampler2D tDiffuse;
-            varying vec4 vUv;
-            uniform float blurAmount;
-
-            #include <logdepthbuf_pars_fragment>
-
-            float blendOverlay( float base, float blend ) {
-
-                return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
-
-            }
-
-            vec3 blendOverlay( vec3 base, vec3 blend ) {
-
-                return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
-
-            }
-
-            void main() {
-
-                #include <logdepthbuf_fragment>
-
-                vec2 texelSize = 1.0 / vec2(1024,1024);
-                vec4 fragColor = vec4(0.0);
-            
-                  for (float offsetX = -blurAmount; offsetX <= blurAmount; offsetX += texelSize.x) {
-                    for (float offsetY = -blurAmount; offsetY <= blurAmount; offsetY += texelSize.y) {
-                        //  fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX, offsetY, 0.0, 0.0) * texelSize);
-                         fragColor += texture2DProj(tDiffuse, vUv + vec4(offsetX * texelSize.x, offsetY * texelSize.y, 0.0, 0.0) );
-                    }
-                  }
-            
-                // fragColor /= pow(2.0 * blurAmount + 1.0, 2.0);
-                // gl_FragColor = color;
-
-                fragColor = texture2DProj( tDiffuse, vUv );
-                gl_FragColor = vec4( blendOverlay( fragColor.rgb, color ), 1.0 );
-
-                #include <tonemapping_fragment>
-                #include <colorspace_fragment>
-            }`,
-        depthTest: true,
-        depthWrite: true,
-        transparent: true,
-        side: DoubleSide
-    });
-
-
-    onBeforeRender = (renderer: WebGLRenderer, scene: Scene, camera: Camera, geometry: BufferGeometry, material: Material, group: Group) => {
-
-        this.reflectorWorldPosition.setFromMatrixPosition(this.matrixWorld);
-        this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
-
-        this.rotationMatrix.extractRotation(this.matrixWorld);
-
-        this.normal.set(0, 0, 1);
-        this.normal.applyMatrix4(this.rotationMatrix);
-
-        this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
-
-        // Avoid rendering when reflector is facing away
-
-        if (this.view.dot(this.normal) > 0) {
-            this.normal.set(0, 0, -1);
-        };
-
-        this.view.reflect(this.normal).negate();
-        this.view.add(this.reflectorWorldPosition);
-
-        this.rotationMatrix.extractRotation(camera.matrixWorld);
-
-        this.lookAtPosition.set(0, 0, - 1);
-        this.lookAtPosition.applyMatrix4(this.rotationMatrix);
-        this.lookAtPosition.add(this.cameraWorldPosition);
-
-        this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
-        this.target.reflect(this.normal).negate();
-        this.target.add(this.reflectorWorldPosition);
-
-        this.virtualCamera.position.copy(this.view);
-        this.virtualCamera.up.set(0, 1, 0);
-        this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
-        this.virtualCamera.up.reflect(this.normal);
-        this.virtualCamera.lookAt(this.target);
-
-        this.virtualCamera.far = this.camera.far; // Used in WebGLBackground
-
-        this.virtualCamera.updateMatrixWorld();
-        this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
-
-        // Update the texture matrix
-        this.textureMatrix.set(
-            0.5, 0.0, 0.0, 0.5,
-            0.0, 0.5, 0.0, 0.5,
-            0.0, 0.0, 0.5, 0.5,
-            0.0, 0.0, 0.0, 1.0
-        );
-        this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
-        this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
-        this.textureMatrix.multiply(this.matrixWorld);
-
-        // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-        // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-        this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
-        this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
-
-        this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
-
-        const projectionMatrix = this.virtualCamera.projectionMatrix;
-
-        this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
-        this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-        this.q.z = - 1.0;
-        this.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
-
-        // Calculate the scaled plane vector
-        this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(this.q));
-
-        // Replacing the third row of the projection matrix
-        projectionMatrix.elements[2] = this.clipPlane.x;
-        projectionMatrix.elements[6] = this.clipPlane.y;
-        projectionMatrix.elements[10] = this.clipPlane.z + 1.0 - 0.003;
-        projectionMatrix.elements[14] = this.clipPlane.w;
-
-        // Render
-        this.visible = false;
-
-        const currentRenderTarget = renderer.getRenderTarget();
-
-        const currentXrEnabled = renderer.xr.enabled;
-        const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-
-        renderer.xr.enabled = false; // Avoid camera modification
-        renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
-
-        renderer.setRenderTarget(this.renderTarget);
-
-        renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
-
-        if (renderer.autoClear === false) renderer.clear();
-        renderer.render(scene, this.virtualCamera);
-
-        renderer.xr.enabled = currentXrEnabled;
-        renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-
-        renderer.setRenderTarget(currentRenderTarget);
-
-        // Restore viewport
-        //@ts-ignore
-        const viewport = this.camera.viewport;
-        if (viewport !== undefined) {
-            renderer.state.viewport(viewport);
-        }
-
-        this.visible = true;
-
-    }
-
-    getRenderTarget() {
-
-        return this.renderTarget;
-
-    };
-
-    dispose() {
-        this.renderTarget.dispose();
-        // this.material.dispose();
-    };
-
-}

package/PlaneModal1/PlaneModal1.ts

@@ -1,151 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2023-03-09 18:51:11 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-03-09 19:15:35
- */
-
-import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
-import threeLoader from "../threeLoader";
-import planeModalPNG from "./planeModal.png";
-
-
-export type PlaneModal1Config = {
-    size?: number,
-    title?: string,
-    titleColor?: string,
-    texts?: Array<{
-        text?: string,
-        color?: string,
-        size?: number
-    }>
-}
-
-// 平面模型弹窗
-export default class PlaneModal1 extends Mesh {
-
-    constructor(config: PlaneModal1Config = {}) {
-        super();
-        this.updata(config);
-        this.material.map = this.texture;
-        this.scale.set(10, 10, 10);
-    }
-
-    geometry = new PlaneGeometry(1 * 0.65, 0.728 * 0.65, 1, 1);
-
-    material = new MeshBasicMaterial({
-        side: DoubleSide,
-        transparent: true,
-        alphaTest: 0.01
-    });
-
-    // 背景图
-    static img = (() => {
-        const img = new Image();
-        img.src = planeModalPNG;
-        return img;
-    })();
-
-    canvas = (() => {
-        const canvas = document.createElement("canvas");
-        canvas.width = 660;
-        canvas.height = 481;
-        return canvas;
-    })();
-
-    context = this.canvas.getContext("2d")!;
-
-    texture = threeLoader.getTexture(this.canvas);
-
-    // 配置
-    _config: {
-        size: number,
-        title: string,
-        titleColor: string,
-        texts: Array<{
-            text: string,
-            color: string,
-            size: number
-        }>
-    } = {
-            size: 10,
-            title: "PlaneModal1",
-            titleColor: "#ffffff",
-            texts: []
-            // [
-            //     {
-            //         text: "1",
-            //         color: "#ffff00",
-            //         size: 40
-            //     },
-            //     {
-            //         text: "2",
-            //         color: "#ff00ff",
-            //         size: 40
-            //     },
-            // ]
-        }
-
-    async updata(config: PlaneModal1Config) {
-
-        Object.assign(this._config, config)
-
-        //绘制背景
-        this.context.clearRect(0, 0, 660, 481);
-
-        while (!PlaneModal1.img.complete) {
-            await new Promise(resolve => setTimeout(resolve, 100));
-        }
-
-        // 设置大小
-        this.scale.set(this._config.size, this._config.size, this._config.size);
-
-        // this.context.fillStyle = "#00000088";
-        // this.context.fillRect(0, 0, 660, 481);
-
-        //绘制背景
-        this.context.drawImage(PlaneModal1.img, 0, 0);
-
-        // 绘制标题
-        this.context.fillStyle = this._config.titleColor;
-        this.context.font = '40px serif';// 设置字体大小
-        this.context.textAlign = "left";
-        this.context.textBaseline = "top";
-        this.context.fillText(this._config.title, 60, 72);
-
-        let textPos = new Vector2(60, 150);
-        let maxWidth = 530;
-        // 绘制内容
-        this._config.texts.map(({ text = "text", color = "#ffffff", size = 40 }) => {
-            this.context.fillStyle = color;
-            this.context.font = `${size}px serif`;// 设置字体大小
-            this.context.textAlign = "left";
-            this.context.textBaseline = "top";
-
-            // 字符分隔为数组
-            var arrText = text.split('');
-            var line = '';
-
-            for (var n = 0; n < arrText.length; n++) {
-                var metrics = this.context.measureText(line + arrText[n]);
-                var testWidth = metrics.width;
-                if ((testWidth > maxWidth && n > 0) || arrText[n] === "\n") {
-                    this.context.fillText(line, textPos.x, textPos.y);
-                    line = "";
-                    textPos.y += size;
-                } else {
-                    line += arrText[n];
-                }
-            }
-
-            this.context.fillText(line, textPos.x, textPos.y);
-            textPos.y += size;
-        });
-
-        this.texture.needsUpdate = true;
-
-        this.dispatchEvent({ type: "loaded" } as never);
-    }
-
-
-}

package/PlaneModal1/index.ts

@@ -1 +0,0 @@
-export { default } from "./PlaneModal1";

package/PlaneText.ts

@@ -1,58 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2022-05-23 13:53:06 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-03 02:54:52
- */
-
-import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector3 } from "three";
-import SpriteText from "./SpriteText";
-
-
-type Props = {
-    text?: string;
-    textHeight?: number;
-    color?: string;
-    backgroundColor?: string;
-    fontFace?: string;
-    fontSize?: number;
-    fontWeight?: string;
-    padding?: number | [number, number];
-    borderWidth?: number;
-    borderRadius?: number;
-    borderColor?: string;
-    strokeWidth?: number;
-    strokeColor?: string;
-}
-
-export default class PlaneText extends Mesh {
-
-    constructor(text: string = "planeText") {
-        super(PlaneText.geometry);
-        this.set({ text });
-    }
-
-    type = "PlaneText";
-
-    static geometry = new PlaneGeometry(1, 1, 1, 1);
-
-    spriteText = new SpriteText("");
-
-    material = new MeshBasicMaterial({ transparent: true, side: DoubleSide, map: this.spriteText.material.map });
-
-    set(parame: Props) {
-        for (let key in parame) {
-            //@ts-ignore
-            this.spriteText[key] = parame[key];
-        }
-
-        this.scale.copy(this.spriteText.scale);
-        this.scale.max(new Vector3(1, 1, 1));
-        this.material.map = this.spriteText.material.map;
-    }
-
-    get(prop: keyof SpriteText) {
-        return this.spriteText[prop];
-    }
-
-}

package/PlaneWithHtml.ts

@@ -1,85 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2023-04-15 11:26:32 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-04-15 12:38:09
- */
-
-import html2canvas from "html2canvas";
-import { CanvasTexture, DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
-import { degToRad } from "three/src/math/MathUtils";
-import threeLoader from "./threeLoader";
-
-
-// html 文本面板
-export default class PlaneWithHtml extends Mesh {
-
-    constructor(html: string = "", backgroundColor: `#${string}` = "#00000000") {
-        super();
-        this.setHtml(html, backgroundColor);
-    }
-
-    visible = false;
-
-    size = new Vector2(10, 10);
-
-    geometry = (() => {
-        const geometry = new PlaneGeometry(10, 10, 1, 1);
-        geometry.rotateX(degToRad(-90));
-        return geometry;
-    })();
-
-    material = new MeshBasicMaterial({
-        side: DoubleSide,
-        transparent: true,
-        alphaTest: 0.1
-    });
-
-    div = (() => {
-        const div = document.createElement("div");
-        div.style.position = "fixed";
-        div.style.top = "100%";
-        div.style.left = "100%";
-        div.style.pointerEvents = "none";
-        div.style.userSelect = "none";
-        div.style.lineHeight = "1";
-        div.style.whiteSpace = "nowrap";
-        return div;
-    })();
-
-    // 设置网格尺寸
-    setGeoSize(width: number, height: number) {
-        this.size.set(width, height);
-        this.geometry.dispose();
-        const geometry = new PlaneGeometry(width, height, 1, 1);
-        geometry.rotateX(degToRad(-90));
-        this.geometry = geometry;
-    }
-
-    async setHtml(html: string = "", backgroundColor: `#${string}` = "#00000000") {
-        this.div.innerHTML = html;
-        document.body.appendChild(this.div);
-
-        await new Promise<void>((resolve, reject) => {
-
-            html2canvas(this.div, {
-                backgroundColor,
-                removeContainer: true
-            }).then(async (canvas) => {
-                this.setGeoSize(canvas.width, canvas.height);
-                this.material.map = new CanvasTexture(canvas);
-                this.material.map.anisotropy = threeLoader.anisotropy;
-                this.material.needsUpdate = true;
-                await new Promise(resolve => requestAnimationFrame(resolve));
-                this.visible = true;
-                this.div.remove();
-                resolve();
-            });
-
-        });
-
-        this.dispatchEvent({ type: "loaded" } as never);
-    }
-
-
-}

package/PointLight/PointLight.ts

@@ -1,75 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2022-05-18 16:02:55 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-03 02:55:28
- */
-
-import { Sprite, PointLight as THREEPointLight } from "three";
-import threeLoader from "../threeLoader";
-import threeUtils from "../threeUtils";
-import pointLight_mapPNG from "./pointLight_map.png";
-import SpriteText from "../SpriteText";
-
-
-/**
- * 点光源
- * @export
- * @class PointLight
- * @extends {THREEPointLight}
- */
-export default class PointLight extends THREEPointLight {
-
-    constructor(color = "#fff", intensity?: number, distance?: number, decay?: number) {
-        super(color, intensity, distance, decay);
-    }
-
-    // 灯光辅助器
-    pointLinghtHelper = threeUtils.isDev && (() => {
-        const pointLinghtHelper = new Sprite();
-        pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
-        pointLinghtHelper.material.alphaTest = 0.1;
-        pointLinghtHelper.material.color = this.color;
-        pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
-        pointLinghtHelper.material.sizeAttenuation = false;
-
-        pointLinghtHelper.userData = {
-            cursor: "pointer"
-        };
-
-        pointLinghtHelper.addEventListener("mouseenter", () => {
-            if (this.label) {
-                this.label.visible = true;
-            }
-        });
-
-        pointLinghtHelper.addEventListener("mouseleave", () => {
-            if (this.label) {
-                this.label.visible = false;
-            }
-        });
-
-        this.add(pointLinghtHelper);
-        return pointLinghtHelper;
-    })();
-
-    label = threeUtils.isDev && (() => {
-        const label = new SpriteText("点光源\n\n\n");
-        label.renderOrder = Infinity;
-        // label.backgroundColor = "rgba(0, 0, 0, 0.5)";
-        label.padding = 4;
-        label.strokeColor = "#333";
-        label.strokeWidth = 2;
-        // label.borderRadius = 4;
-        // label.borderWidth = 1;
-        label.position.set(0, 0, 0);
-        label.visible = false;
-        label.material.color = this.color;
-        // label.material.depthTest = false;
-        label.material.sizeAttenuation = false;
-        label.scale.multiplyScalar(0.002);
-        this.add(label);
-        return label;
-    })();
-
-}

package/PointLight/index.ts

@@ -1 +0,0 @@
-export { default } from "./PointLight";

package/Sky/Sky.ts

@@ -1,36 +0,0 @@
-/*
- * @Author: xiaosihan 
- * @Date: 2022-05-20 18:03:58 
- * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-12-27 09:54:23
- */
-
-import { DoubleSide, Mesh, MeshBasicMaterial, SphereGeometry } from "three";
-import threeLoader from "../threeLoader";
-
-import blueskyJPG from "./blueSky.jpg";
-
-/**
- * 天空球
- */
-export default class Sky extends Mesh {
-
-    constructor() {
-        super(Sky.geometry);
-    }
-
-    static geometry = new SphereGeometry(5000, 100, 100);
-
-    material = new MeshBasicMaterial({
-        side: DoubleSide,
-        map: threeLoader.getTexture(blueskyJPG)
-    });
-
-    /**
-     *设置贴图
-     */
-    setMap(src: string) {
-        this.material.map = threeLoader.getTexture(src);
-    }
-
-}

package/Sky/index.ts

@@ -1 +0,0 @@
-export { default } from "./Sky";