three-base 2.0.1 → 2.0.3

package/PlaneWithHtml.ts

@@ -0,0 +1,84 @@
+/*
+ * @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
+    });
+
+    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;
+                this.visible = true;
+                await new Promise(resolve => requestAnimationFrame(resolve));
+                this.div.remove();
+                resolve();
+            });
+
+        });
+
+        this.dispatchEvent({ type: "loaded" });
+    }
+
+
+}

package/PointLight/PointLight.d.ts

@@ -0,0 +1,13 @@
+import { Sprite, PointLight as THREEPointLight } from "three";
+import SpriteText from "../SpriteText";
+/**
+ * 点光源
+ * @export
+ * @class PointLight
+ * @extends {THREEPointLight}
+ */
+export default class PointLight extends THREEPointLight {
+    constructor(color?: string, intensity?: number, distance?: number, decay?: number);
+    pointLinghtHelper: Sprite;
+    label: SpriteText;
+}

package/PointLight/PointLight.js

@@ -0,0 +1,63 @@
+/*
+ * @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, distance, decay) {
+        super(color, intensity, distance, decay);
+    }
+    // 灯光辅助器
+    pointLinghtHelper = threeUtils.isDev && (() => {
+        const pointLinghtHelper = new Sprite();
+        pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
+        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/PointLight.ts

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

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

package/PointLight/index.js

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

package/PointLight/index.ts

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

package/README.md

@@ -1,7 +1,7 @@
 ```tsx
 .创建一个 homeRender.ts 模块
 import { AmbientLight, BoxGeometry, Mesh, MeshLambertMaterial, PointLight } from "three";
-import ThreeBase, { Transition } from "three-base";
+import ThreeBase from "three-base";
 import Transition from "three-base/Transition";
 
 // 做项目找我 qq:389652405

package/Sky/Sky.d.ts

@@ -0,0 +1,13 @@
+import { Mesh, MeshBasicMaterial, SphereGeometry } from "three";
+/**
+ * 天空球
+ */
+export default class Sky extends Mesh {
+    constructor();
+    static geometry: SphereGeometry;
+    material: MeshBasicMaterial;
+    /**
+     *设置贴图
+     */
+    setMap(src: string): void;
+}

package/Sky/Sky.js

@@ -0,0 +1,28 @@
+/*
+ * @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(500000, 100, 100);
+    material = new MeshBasicMaterial({
+        side: DoubleSide,
+        map: threeLoader.getTexture(blueskyJPG)
+    });
+    /**
+     *设置贴图
+     */
+    setMap(src) {
+        this.material.map = threeLoader.getTexture(src);
+    }
+}

package/Sky/Sky.ts

@@ -0,0 +1,36 @@
+/*
+ * @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(500000, 100, 100);
+
+    material = new MeshBasicMaterial({
+        side: DoubleSide,
+        map: threeLoader.getTexture(blueskyJPG)
+    });
+
+    /**
+     *设置贴图
+     */
+    setMap(src: string) {
+        this.material.map = threeLoader.getTexture(src);
+    }
+
+}

package/Sky/index.d.ts

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

package/Sky/index.js

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

package/Sky/index.ts

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

package/SpriteModal1/SpriteModal1.d.ts

@@ -0,0 +1,30 @@
+import { Sprite, CanvasTexture, Raycaster, Intersection } from "three";
+export type SpritModal1Config = {
+    size?: number;
+    title?: string;
+    titleColor?: string;
+    texts?: Array<{
+        text?: string;
+        color?: string;
+        size?: number;
+    }>;
+};
+export default class SpritModal1 extends Sprite {
+    constructor(config?: SpritModal1Config);
+    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: SpritModal1Config): Promise<void>;
+    raycast(raycaster: Raycaster, intersects: Intersection[]): void;
+}

package/SpriteModal1/SpriteModal1.js

@@ -0,0 +1,110 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-08 00:01:34
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-08 02:05:25
+ */
+import { Sprite, Vector2 } from "three";
+import spriteModal1PNG from "./spriteModal1.png";
+import threeLoader from "../threeLoader";
+// sprit弹窗1
+export default class SpritModal1 extends Sprite {
+    constructor(config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+        this.material.transparent = true;
+        this.material.alphaTest = 0.01;
+    }
+    // 背景图
+    static img = (() => {
+        const img = new Image();
+        img.src = spriteModal1PNG;
+        return img;
+    })();
+    canvas = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1024;
+        canvas.height = 1024;
+        return canvas;
+    })();
+    context = this.canvas.getContext("2d");
+    texture = threeLoader.getTexture(this.canvas);
+    // 配置
+    _config = {
+        size: 10,
+        title: "SpritModal1",
+        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, 1024, 1024);
+        while (!SpritModal1.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, 1024, 1024);
+        //绘制背景
+        this.context.drawImage(SpritModal1.img, 186, 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, 250, 72);
+        let textPos = new Vector2(250, 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" });
+    }
+    //鼠标拾取计算
+    raycast(raycaster, intersects) {
+        let intersect = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && (inte.uv.x > 0.22 && inte.uv.x < 0.78) && (inte.uv.y > 0.54 && inte.uv.y < 0.94)) {
+            intersects.push(inte);
+        }
+    }
+}

package/SpriteModal1/SpriteModal1.ts

@@ -0,0 +1,160 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-03-08 00:01:34
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2023-03-08 02:05:25
+ */
+
+
+
+
+
+import { Sprite, CanvasTexture, Vector2, Raycaster, Intersection } from "three";
+import spriteModal1PNG from "./spriteModal1.png";
+import threeLoader from "../threeLoader";
+
+export type SpritModal1Config = {
+    size?: number,
+    title?: string,
+    titleColor?: string,
+    texts?: Array<{
+        text?: string,
+        color?: string,
+        size?: number
+    }>
+}
+
+// sprit弹窗1
+export default class SpritModal1 extends Sprite {
+
+    constructor(config: SpritModal1Config = {}) {
+        super();
+        this.updata(config);
+        this.material.map = this.texture;
+        this.material.transparent = true;
+        this.material.alphaTest = 0.01;
+    }
+
+    // 背景图
+    static img = (() => {
+        const img = new Image();
+        img.src = spriteModal1PNG;
+        return img;
+    })();
+
+    canvas = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1024;
+        canvas.height = 1024;
+        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: "SpritModal1",
+            titleColor: "#ffffff",
+            texts: []
+            // [
+            //     {
+            //         text: "1",
+            //         color: "#ffff00",
+            //         size: 40
+            //     },
+            //     {
+            //         text: "2",
+            //         color: "#ff00ff",
+            //         size: 40
+            //     },
+            // ]
+        }
+
+    async updata(config: SpritModal1Config) {
+
+        Object.assign(this._config, config)
+
+        //绘制背景
+        this.context.clearRect(0, 0, 1024, 1024);
+
+        while (!SpritModal1.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, 1024, 1024);
+
+        //绘制背景
+        this.context.drawImage(SpritModal1.img, 186, 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, 250, 72);
+
+        let textPos = new Vector2(250, 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" });
+    }
+
+    //鼠标拾取计算
+    raycast(raycaster: Raycaster, intersects: Intersection[]) {
+
+        let intersect: Intersection[] = [];
+        super.raycast(raycaster, intersect);
+        let inte = intersect[0];
+        if (inte && (inte.uv!.x > 0.22 && inte.uv!.x < 0.78) && (inte.uv!.y > 0.54 && inte.uv!.y < 0.94)) {
+            intersects.push(inte);
+        }
+
+    }
+
+}
+

package/SpriteModal1/index.d.ts

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

package/SpriteModal1/index.js

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

package/SpriteModal1/index.ts

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