three-base 2.0.1 → 2.0.2

package/KeyFrameAnimation.ts

@@ -0,0 +1,122 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-02-16 00:22:31 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-02-16 19:08:55
+ */
+
+import { last } from "lodash";
+import { BufferAttribute, Euler, Line, LineBasicMaterial, Object3D, Vector3 } from "three";
+import threeUtils from "./threeUtils";
+
+
+// 关键帧类型
+export type Keyframe = {
+    position: Vector3;
+    scale: Vector3;
+    rotation: Euler;
+    timeTemp: number; //时间节点 单位毫秒.
+}
+
+
+export type KeyframeAnimationProps = {
+    speedScale?: number; // 速度调整
+    object3d: Object3D; // 需要移动的对象
+    keyframes: Array<Keyframe>,
+}
+
+// 关键帧动画对象
+export default class KeyframeAnimation extends Object3D {
+
+    constructor(props: KeyframeAnimationProps) {
+        super();
+
+        // 速度调整
+        this.speedScale = props.speedScale || 1;
+
+        // 设置关键帧对象数组
+        this.setKeyframes(props.keyframes);
+
+
+        // 设置对象
+        this.setObject3D(props.object3d);
+
+    }
+
+    // 速度调整
+    speedScale = 1;
+
+    // 需要需要移动的对象
+    object3d!: Object3D;
+
+    //路径辅助线
+    halperLine = new Line(undefined, new LineBasicMaterial({ color: "#f00" }));
+
+    // 关键帧数组
+    keyframes: Array<Keyframe> = [];
+
+    // 设置需要移动的对象
+    setObject3D(object3d: Object3D) {
+        this.object3d = object3d;
+        if (threeUtils.isDev) {
+            this.children = [object3d, this.halperLine];
+        } else {
+            this.children = [object3d];
+        }
+    }
+
+    // 获取单个关键帧
+    getKeyframe(i: number) {
+        return this.keyframes[i];
+    }
+
+    // 设置单个关键帧
+    setKeyframe(i: number, keyframe: Keyframe) {
+        this.keyframes[i] = keyframe;
+        this.setKeyframes(this.keyframes);
+    }
+
+    //设置全部关键帧
+    setKeyframes(keyframes: Array<Keyframe>) {
+        this.keyframes = keyframes;
+        const position: Array<number> = [];
+        keyframes.map(k => {
+            position.push(k.position.x);
+            position.push(k.position.y);
+            position.push(k.position.z);
+        });
+        this.halperLine.geometry.setAttribute("position", new BufferAttribute(new Float32Array(position), 3, false));
+    }
+
+    // 更具关键帧的信息更新 对象的位置
+    update() {
+        const { _timeTemp } = threeUtils;
+        const maxtimetemp = last(this.keyframes)!.timeTemp;
+        const currentTime = _timeTemp % maxtimetemp;
+
+        const currentKeyframeIndex = this.keyframes.findIndex(k => currentTime < k.timeTemp);
+
+        const startKeyframe = this.keyframes[currentKeyframeIndex - 1];
+        const endKeyframe = this.keyframes[currentKeyframeIndex];
+        const progress = (currentTime - startKeyframe.timeTemp) / (endKeyframe.timeTemp - startKeyframe.timeTemp);
+
+        this.object3d.position.copy(endKeyframe.position).sub(startKeyframe.position).multiplyScalar(progress).add(startKeyframe.position);
+        this.object3d.scale.copy(endKeyframe.scale).sub(startKeyframe.scale).multiplyScalar(progress).add(startKeyframe.scale);
+
+        this.object3d.rotation.set(
+            (endKeyframe.rotation.x - startKeyframe.rotation.x) * progress + startKeyframe.rotation.x,
+            (endKeyframe.rotation.y - startKeyframe.rotation.y) * progress + startKeyframe.rotation.y,
+            (endKeyframe.rotation.z - startKeyframe.rotation.z) * progress + startKeyframe.rotation.z,
+        );
+
+        this.dispatchEvent({ type: "update" });
+    }
+
+    //更新关键帧的实例矩阵
+    updateMatrix(): void {
+        this.update();
+        super.updateMatrix();
+    }
+
+
+}

package/PlaneModal1/PlaneModal1.d.ts

@@ -0,0 +1,31 @@
+import { MeshBasicMaterial, Mesh, CanvasTexture, PlaneGeometry } from "three";
+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);
+    geometry: PlaneGeometry;
+    material: MeshBasicMaterial;
+    static img: HTMLImageElement;
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D;
+    texture: CanvasTexture | import("three").Texture;
+    _config: {
+        size: number;
+        title: string;
+        titleColor: string;
+        texts: Array<{
+            text: string;
+            color: string;
+            size: number;
+        }>;
+    };
+    updata(config: PlaneModal1Config): Promise<void>;
+}

package/PlaneModal1/PlaneModal1.js

@@ -0,0 +1,105 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-09 18:51:11
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-09 19:15:35
+ */
+import { MeshBasicMaterial, Mesh, DoubleSide, Vector2, PlaneGeometry } from "three";
+import planeModalPNG from "./planeModal.png";
+import threeLoader from "../threeLoader";
+// 平面模型弹窗
+export default class PlaneModal1 extends Mesh {
+    constructor(config = {}) {
+        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: 10,
+        title: "PlaneModal1",
+        titleColor: "#ffffff",
+        texts: []
+        // [
+        //     {
+        //         text: "1",
+        //         color: "#ffff00",
+        //         size: 40
+        //     },
+        //     {
+        //         text: "2",
+        //         color: "#ff00ff",
+        //         size: 40
+        //     },
+        // ]
+    };
+    async updata(config) {
+        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" });
+    }
+}

package/PlaneModal1/PlaneModal1.ts

@@ -0,0 +1,151 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2023-03-09 18:51:11 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-09 19:15:35
+ */
+
+import { MeshBasicMaterial, Mesh, DoubleSide, CanvasTexture, Vector2, BufferGeometry, PlaneGeometry, SRGBColorSpace } from "three";
+import planeModalPNG from "./planeModal.png";
+import threeLoader from "../threeLoader";
+
+
+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" });
+    }
+
+
+}

package/PlaneModal1/index.d.ts

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

package/PlaneModal1/index.js

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

package/PlaneModal1/index.ts

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

package/PlaneText.d.ts

@@ -0,0 +1,37 @@
+import { 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);
+    type: string;
+    static geometry: PlaneGeometry;
+    spriteText: SpriteText;
+    material: MeshBasicMaterial;
+    set(parame: Props): void;
+    get(prop: keyof SpriteText): string | number | boolean | ((event: import("three").Event) => void) | Vector3 | import("three").Object3D<import("three").Event> | import("three").BufferGeometry<import("three").NormalBufferAttributes> | ((force?: boolean) => void) | import("three").Object3D<import("three").Event>[] | HTMLCanvasElement | import("three").Vector2 | import("three").Material | import("three").Matrix4 | import("three").Quaternion | import("three").Euler | ((callback: (object: import("three").Object3D<import("three").Event>) => any) => void) | import("three").Matrix3 | import("three").Layers | import("three").AnimationClip[] | {
+        [key: string]: any;
+    } | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group) => void) | ((renderer: import("three").WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry<import("three").NormalBufferAttributes>, material: import("three").Material, group: import("three").Group) => void) | ((matrix: import("three").Matrix4) => void) | ((axis: Vector3, angle: number) => void) | ((euler: import("three").Euler) => void) | ((m: import("three").Matrix4) => void) | ((q: import("three").Quaternion) => void) | ((vector: Vector3) => Vector3) | ((vector: Vector3) => Vector3) | {
+        (vector: Vector3): void;
+        (x: number, y: number, z: number): void;
+    } | ((id: number) => import("three").Object3D<import("three").Event>) | ((name: string) => import("three").Object3D<import("three").Event>) | ((name: string, value: any) => import("three").Object3D<import("three").Event>) | ((name: string, value: any) => import("three").Object3D<import("three").Event>[]) | ((target: Vector3) => Vector3) | ((target: import("three").Quaternion) => import("three").Quaternion) | ((target: Vector3) => Vector3) | ((target: Vector3) => Vector3) | ((raycaster: import("three").Raycaster, intersects: import("three").Intersection<import("three").Object3D<import("three").Event>>[]) => void) | ((callback: (object: import("three").Object3D<import("three").Event>) => any) => void) | ((callback: (object: import("three").Object3D<import("three").Event>) => any) => void) | (() => void) | ((updateParents: boolean, updateChildren: boolean) => void) | ((meta?: {
+        geometries: any;
+        materials: any;
+        textures: any;
+        images: any;
+    }) => any) | import("three").SpriteMaterial | ((source: SpriteText, recursive?: boolean) => SpriteText) | (() => void) | ((quaternion: import("three").Quaternion) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((axis: Vector3, angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((angle: number) => SpriteText) | ((axis: Vector3, distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((distance: number) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | ((...object: import("three").Object3D<import("three").Event>[]) => SpriteText) | (() => SpriteText) | (() => SpriteText) | ((object: import("three").Object3D<import("three").Event>) => SpriteText) | ((recursive?: boolean) => SpriteText) | (<T extends string>(type: T, listener: import("three").EventListener<import("three").Event, T, SpriteText>) => void) | (<T_1 extends string>(type: T_1, listener: import("three").EventListener<import("three").Event, T_1, SpriteText>) => boolean) | (<T_2 extends string>(type: T_2, listener: import("three").EventListener<import("three").Event, T_2, SpriteText>) => void);
+}
+export {};

package/PlaneText.js

@@ -0,0 +1,30 @@
+/*
+ * @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";
+export default class PlaneText extends Mesh {
+    constructor(text = "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) {
+        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) {
+        return this.spriteText[prop];
+    }
+}

package/PlaneText.ts

@@ -0,0 +1,58 @@
+/*
+ * @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.d.ts

@@ -0,0 +1,11 @@
+import { Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
+export default class PlaneWithHtml extends Mesh {
+    constructor(html?: string, backgroundColor?: `#${string}`);
+    visible: boolean;
+    size: Vector2;
+    geometry: PlaneGeometry;
+    material: MeshBasicMaterial;
+    div: HTMLDivElement;
+    setGeoSize(width: number, height: number): void;
+    setHtml(html?: string, backgroundColor?: `#${string}`): Promise<void>;
+}

package/PlaneWithHtml.js

@@ -0,0 +1,67 @@
+/*
+ * @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 = "", backgroundColor = "#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
+    });
+    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, height) {
+        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 = "", backgroundColor = "#00000000") {
+        this.div.innerHTML = html;
+        document.body.appendChild(this.div);
+        await new Promise((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;
+                this.visible = true;
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                this.div.remove();
+                resolve();
+            });
+        });
+        this.dispatchEvent({ type: "loaded" });
+    }
+}