three-base 2.0.110 → 2.0.112

package/ThreeBase.d.ts

@@ -1,4 +1,4 @@
-import { AxesHelper, BufferGeometry, DepthTexture, EventDispatcher, GridHelper, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Texture, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
+import { AxesHelper, DepthTexture, EventDispatcher, GridHelper, Object3D, OrthographicCamera, PerspectiveCamera, Scene, Texture, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import ThreeMouse from "./ThreeMouse";
 import Transition from "./Transition";
@@ -75,17 +75,6 @@ export default class ThreeBase extends EventDispatcher {
     getThumbBase64(): string;
     getThumbFile(): Promise<File>;
     download(fileName?: string): Promise<void>;
-    private _preMesh;
-    private _preRT;
-    preloadTexture(src: string): Promise<void>;
-    preloadGeometry(geometry: BufferGeometry): Promise<void>;
-    clearRendererTargte(rendererTarget: WebGLRenderTarget | null): void;
-    copyTextureToRenderTarget(texture: Texture, rendererTarget: WebGLRenderTarget | null, alpha?: boolean, opactity?: number): void;
-    object3dToRendererTarget(obj: Object3D, rendererTarget: WebGLRenderTarget): void;
-    rendererTagetAddStroke(rendererTarget: WebGLRenderTarget, strockWidth: number, color: string, opacity: number): void;
-    renderObject3dStroke(obj: Object3D, strockWidth: number, color: string, opacity: number): void;
-    renderTargetgaussBlur(rendererTarget: WebGLRenderTarget, radius: number, opacity: number): void;
-    renderTargetAddGlow(renderTarget: WebGLRenderTarget, width: number, color: string): void;
     renderRendererTarget(renderTarget: WebGLRenderTarget): void;
     renderTexture(texture: Texture, alpha?: boolean): void;
 }

package/ThreeBase.js

@@ -5,14 +5,14 @@
  * @Last Modified time: 2024-09-23 21:20:32
  */
 import { round } from "lodash";
-import { AxesHelper, Box3, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, Mesh, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, ReinhardToneMapping, SRGBColorSpace, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer, } from "three";
+import { AxesHelper, Box3, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, ReinhardToneMapping, SRGBColorSpace, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer, } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { degToRad, generateUUID } from "three/src/math/MathUtils";
 import ThreeMouse from "./ThreeMouse";
 import Transition from "./Transition";
 import glow_pass from "./pass/glow_pass";
 import stroke_pass from "./pass/stroke_pass";
-import { baseTextureToRenderShader, clearShader, copyShader, fullScreenMesh, gaussBlurShader, strokeShader, } from "./shaders";
+import { baseTextureToRenderShader, copyShader, fullScreenMesh, } from "./shaders";
 import threeLoader from "./threeLoader";
 import threeUtils from "./threeUtils";
 import cover_pass from "./pass/cover_pass";
@@ -55,7 +55,6 @@ export default class ThreeBase extends EventDispatcher {
             anisotropy: 16,
             colorSpace: SRGBColorSpace,
         });
-        baseRenderTarget.texture.colorSpace = SRGBColorSpace;
         return baseRenderTarget;
     })();
     // 公用渲染目标1
@@ -83,7 +82,7 @@ export default class ThreeBase extends EventDispatcher {
         const renderer = new WebGLRenderer({
             alpha: true,
             antialias: false,
-            precision: "lowp",
+            precision: "highp",
             logarithmicDepthBuffer: true,
             preserveDrawingBuffer: true,
             stencil: false, // 模版
@@ -435,9 +434,10 @@ export default class ThreeBase extends EventDispatcher {
             this.stopRender();
             return;
         }
+        // 相机的朝向
+        const center = new Vector3(...this.controls.target.toArray().map((v) => round(v, 3)));
         //透视相机和正交相机参数的时时转换
         if (this.cameraType === "perspectiveCamera") {
-            const { center } = this.getLookAt();
             const { fov } = this.perspectiveCamera;
             const distaned = this.perspectiveCamera.position
                 .clone()
@@ -451,7 +451,6 @@ export default class ThreeBase extends EventDispatcher {
                 .add(center);
         }
         else if (this.cameraType === "orthographicCamera") {
-            const { center } = this.getLookAt();
             const { fov } = this.perspectiveCamera;
             const { zoom } = this.orthographicCamera;
             const distaned = 1 / zoom / Math.tan(degToRad(fov) / 2);
@@ -500,7 +499,12 @@ export default class ThreeBase extends EventDispatcher {
     renderBindThis = this.render.bind(this);
     //获取渲染图blob对象
     async getThumbBlob() {
-        this.render();
+        this.renderer.setRenderTarget(this.baseRenderTarget);
+        this.renderer.clear();
+        this.renderer.render(this.scene, this.getCamera());
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
+        this.renderRendererTarget(this.baseRenderTarget);
         const blob = await new Promise((resolve, reject) => {
             this.renderer.domElement.toBlob((blob) => {
                 resolve(blob);
@@ -510,7 +514,12 @@ export default class ThreeBase extends EventDispatcher {
     }
     //获取渲染图base64
     getThumbBase64() {
-        this.render();
+        this.renderer.setRenderTarget(this.baseRenderTarget);
+        this.renderer.clear();
+        this.renderer.render(this.scene, this.getCamera());
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
+        this.renderRendererTarget(this.baseRenderTarget);
         const base64 = this.renderer.domElement.toDataURL("image/png");
         return base64;
     }
@@ -522,7 +531,6 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 下载渲染图
     async download(fileName = "download") {
-        this.render();
         const blob = await this.getThumbBlob();
         let saveLink = document.createElement("a");
         saveLink.download = `${fileName}.png`;
@@ -530,134 +538,17 @@ export default class ThreeBase extends EventDispatcher {
         document.body.append(saveLink);
         saveLink.click();
     }
-    _preMesh = new Mesh();
-    _preRT = new WebGLRenderTarget(128, 128, {
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        format: RGBAFormat,
-    });
-    //预加载纹理图片
-    async preloadTexture(src) {
-        const texture = threeLoader.getTexture(src);
-        while ((texture && !texture.image) ||
-            !texture.image.complete) {
-            await new Promise((resolve) => setTimeout(resolve, 50));
-        }
-        // 添加到计划任务中去
-        threeUtils.addWork(() => {
-            const originRenderTarget = this.renderer.getRenderTarget();
-            this.renderer.setRenderTarget(this._preRT);
-            this._preMesh.material.map = texture;
-            this.renderer.render(this._preMesh, this.perspectiveCamera);
-            this.renderer.setRenderTarget(originRenderTarget);
-        });
-    }
-    //预加载网格
-    async preloadGeometry(geometry) {
-        // 添加到计划任务中去
-        threeUtils.addWork(() => {
-            const originRenderTarget = this.renderer.getRenderTarget();
-            this.renderer.setRenderTarget(this._preRT);
-            this._preMesh.geometry = geometry;
-            this.renderer.render(this._preMesh, this.perspectiveCamera);
-            this.renderer.setRenderTarget(originRenderTarget);
-        });
-    }
-    // 清理渲染目标
-    clearRendererTargte(rendererTarget) {
-        const originTarget = this.renderer.getRenderTarget();
-        this.renderer.setRenderTarget(rendererTarget);
-        fullScreenMesh.material = clearShader;
-        fullScreenMesh.render(this.renderer);
-        this.renderer.clearDepth();
-        this.renderer.setRenderTarget(originTarget);
-    }
-    // 拷贝纹理到渲染目标
-    copyTextureToRenderTarget(texture, rendererTarget, alpha = false, opactity = 1) {
-        const originTarget = this.renderer.getRenderTarget();
-        if (rendererTarget) {
-            this.renderer.getSize(this.tempVector2);
-            rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
-        }
-        this.renderer.setRenderTarget(rendererTarget);
-        fullScreenMesh.material = copyShader;
-        copyShader.uniforms.map.value = texture;
-        copyShader.uniforms.opacity.value = opactity;
-        copyShader.blending = alpha ? NoBlending : NormalBlending;
-        fullScreenMesh.render(this.renderer);
-        this.renderer.setRenderTarget(originTarget);
-    }
-    // 把对象绘制到渲染目标中
-    object3dToRendererTarget(obj, rendererTarget) {
-        this.clearRendererTargte(rendererTarget);
-        const originTarget = this.renderer.getRenderTarget();
-        this.renderer.setRenderTarget(rendererTarget);
-        this.renderer.getSize(this.tempVector2);
-        rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
-        this.renderer.render(obj, this.getCamera());
-        this.renderer.setRenderTarget(originTarget);
-    }
-    // 给渲染目标的内容加描边
-    rendererTagetAddStroke(rendererTarget, strockWidth, color, opacity) {
-        const originTarget = this.renderer.getRenderTarget();
-        this.clearRendererTargte(this.renderTarget2);
-        this.renderer.setRenderTarget(this.renderTarget2);
-        this.renderer.getSize(this.tempVector2);
-        this.renderTarget2.setSize(this.tempVector2.x, this.tempVector2.y);
-        fullScreenMesh.material = strokeShader;
-        strokeShader.uniforms.map.value = rendererTarget.texture;
-        strokeShader.uniforms.resolution.value.set(this.tempVector2.x, this.tempVector2.y);
-        strokeShader.uniforms.strokeWidth.value = strockWidth;
-        strokeShader.uniforms.strokeColor.value.set(color);
-        strokeShader.uniforms.opacity.value = opacity;
-        fullScreenMesh.render(this.renderer);
-        this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
-        this.renderer.setRenderTarget(originTarget);
-    }
-    // 渲染对象的描边
-    renderObject3dStroke(obj, strockWidth, color, opacity) {
-        this.object3dToRendererTarget(obj, this.renderTarget);
-        this.rendererTagetAddStroke(this.renderTarget, strockWidth, color, opacity);
-        this.copyTextureToRenderTarget(this.renderTarget.texture, null);
-    }
-    //给渲染目标加上高斯模糊计算
-    renderTargetgaussBlur(rendererTarget, radius, opacity) {
-        const originTarget = this.renderer.getRenderTarget();
-        this.clearRendererTargte(this.renderTarget2);
-        this.renderer.setRenderTarget(this.renderTarget2);
-        this.renderer.getSize(this.tempVector2);
-        this.renderTarget2.setSize(this.tempVector2.x, this.tempVector2.y);
-        fullScreenMesh.material = gaussBlurShader;
-        gaussBlurShader.uniforms.map.value = rendererTarget.texture;
-        gaussBlurShader.uniforms.radius.value = radius;
-        gaussBlurShader.uniforms.opacity.value = opacity;
-        gaussBlurShader.uniforms.resolution.value.set(this.tempVector2.x, this.tempVector2.y);
-        fullScreenMesh.render(this.renderer);
-        this.copyTextureToRenderTarget(this.renderTarget2.texture, rendererTarget, true);
-        this.renderer.setRenderTarget(originTarget);
-    }
-    // 渲染目标上的纹理添加辉光效果
-    renderTargetAddGlow(renderTarget, width, color) {
-        this.rendererTagetAddStroke(renderTarget, 1 * width, color, 0.3);
-        this.rendererTagetAddStroke(renderTarget, 2 * width, color, 0.2);
-        this.rendererTagetAddStroke(renderTarget, 3 * width, color, 0.05);
-        this.renderTargetgaussBlur(renderTarget, 1, 1);
-        this.renderTargetgaussBlur(renderTarget, 1, 1);
-        this.renderTargetgaussBlur(renderTarget, 1, 1);
-    }
-    // 需要做抗锯齿处理 渲染 渲染目标
+    //把渲染目标渲染到canvas上
     renderRendererTarget(renderTarget) {
         baseTextureToRenderShader.uniforms.map.value = renderTarget.texture;
         baseTextureToRenderShader.uniforms.opacity.value = 1.0;
-        fullScreenMesh.material = baseTextureToRenderShader;
-        fullScreenMesh.render(this.renderer);
+        fullScreenMesh.render(this.renderer, baseTextureToRenderShader);
     }
     // 渲染纹理
     renderTexture(texture, alpha = false) {
         copyShader.uniforms.map.value = texture;
         copyShader.uniforms.opacity.value = 1.0;
-        fullScreenMesh.material = copyShader;
         copyShader.blending = alpha ? NoBlending : NormalBlending;
-        fullScreenMesh.render(this.renderer);
+        fullScreenMesh.render(this.renderer, copyShader);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-base",
-  "version": "2.0.110",
+  "version": "2.0.112",
   "description": "three 3d three-base",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/shaders.d.ts

@@ -1,12 +1,5 @@
-import { Mesh, OrthographicCamera, ShaderMaterial, WebGLRenderer } from "three";
-declare class FullScreenQuad {
-    constructor();
-    _mesh: Mesh;
-    dispose(): void;
-    render(renderer: WebGLRenderer): void;
-    get material(): import("three").Material | import("three").Material[];
-    set material(value: import("three").Material | import("three").Material[]);
-}
+import { OrthographicCamera, ShaderMaterial } from "three";
+import FullScreenQuad from "./pass/FullScreenQuad";
 export declare const fullScreenMesh: FullScreenQuad;
 export declare const orthographicCamera: OrthographicCamera;
 export declare const clearShader: ShaderMaterial;
@@ -15,4 +8,3 @@ export declare const copyShader: ShaderMaterial;
 export declare const baseTextureToRenderShader: ShaderMaterial;
 export declare const strokeShader: ShaderMaterial;
 export declare const gaussBlurShader: ShaderMaterial;
-export {};

package/shaders.js

@@ -4,29 +4,8 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2022-04-02 18:28:38
  */
-import { BufferGeometry, Color, Float32BufferAttribute, Mesh, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2, } from "three";
-// https://github.com/mrdoob/three.js/pull/21358
-const _geometry = new BufferGeometry();
-_geometry.setAttribute("position", new Float32BufferAttribute([-1, 3, 0, -1, -1, 0, 3, -1, 0], 3));
-_geometry.setAttribute("uv", new Float32BufferAttribute([0, 2, 0, 0, 2, 0], 2));
-class FullScreenQuad {
-    constructor() {
-        this._mesh = new Mesh(_geometry);
-    }
-    _mesh;
-    dispose() {
-        this._mesh.geometry.dispose();
-    }
-    render(renderer) {
-        renderer.render(this._mesh, orthographicCamera);
-    }
-    get material() {
-        return this._mesh.material;
-    }
-    set material(value) {
-        this._mesh.material = value;
-    }
-}
+import { Color, NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial, Vector2 } from "three";
+import FullScreenQuad from "./pass/FullScreenQuad";
 // 常用着色器及工具
 // 全屏渲染模型
 export const fullScreenMesh = new FullScreenQuad();

package/threeLoader.d.ts

@@ -5,6 +5,7 @@ import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
 import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
 import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
 import { USDZLoader } from "three/examples/jsm/loaders/USDZLoader";
+import { PLYLoader } from "three/examples/jsm/Addons.js";
 declare class ThreeLoader extends EventDispatcher {
     constructor();
     getFilename(url: string): string;
@@ -20,6 +21,7 @@ declare class ThreeLoader extends EventDispatcher {
     fbxLoader: FBXLoader;
     objLoader: OBJLoader;
     stlLoader: STLLoader;
+    plyLoader: PLYLoader;
     mtlLoader: MTLLoader;
     gltfLoader: GLTFLoader;
     usdzLoader: USDZLoader;

package/threeLoader.js

@@ -26,7 +26,7 @@ import { isArray, isEmpty, isNull, isString, isUndefined } from "lodash";
 import { generateUUID } from "three/src/math/MathUtils";
 import dracoDecoderWASM from "./lib/draco/draco_decoder.wasm?url";
 import threeUtils from "./threeUtils";
-import { TGALoader } from "three/examples/jsm/Addons.js";
+import { PLYLoader, TGALoader } from "three/examples/jsm/Addons.js";
 DefaultLoadingManager.addHandler(/tga$/, new TGALoader());
 // 加载器
 class ThreeLoader extends EventDispatcher {
@@ -135,6 +135,8 @@ class ThreeLoader extends EventDispatcher {
     objLoader = new OBJLoader();
     // stl 加载器
     stlLoader = new STLLoader();
+    //ply加载器
+    plyLoader = new PLYLoader();
     // 材质加载器
     mtlLoader = new MTLLoader();
     // gltf 加载器
@@ -221,6 +223,7 @@ class ThreeLoader extends EventDispatcher {
                     "fbx",
                     "dae",
                     "stl",
+                    "ply",
                     "usdz",
                 ];
                 for (let file of url) {
@@ -358,13 +361,18 @@ class ThreeLoader extends EventDispatcher {
                     if (stl) {
                         return await this.loadModel(stl);
                     }
+                    //如果有ply文件就加载ply文件
+                    let ply = Object.keys(zip.files).find((filename) => /\.ply$/.test(filename));
+                    if (ply) {
+                        return await this.loadModel(ply);
+                    }
                     //如果有zip文件就加载zip文件
                     let zipFile = Object.keys(zip.files).find((filename) => /\.zip$/.test(filename));
                     if (zipFile) {
                         return await this.loadModel(zipFile);
                     }
-                    if ([obj, gltf, dae, fbx, usdz, stl].every((v) => !v)) {
-                        throw new Error(`${url}压缩包里没有obj.glb.gltf.dae.fbx.usde.stl等模型文件`);
+                    if ([obj, gltf, dae, fbx, usdz, stl, ply].every((v) => !v)) {
+                        throw new Error(`${url}压缩包里没有obj.glb.gltf.dae.fbx.usde.stl,ply模型文件`);
                     }
                 });
             case "fbx":
@@ -411,6 +419,42 @@ class ThreeLoader extends EventDispatcher {
                     .catch(() => {
                     console.log(`${url},加载失败`);
                 });
+            case "ply":
+                return await threeLoader.plyLoader
+                    .loadAsync(modelurl)
+                    .then(async (geometry) => {
+                    revokeObjectfile.map((filename) => {
+                        URL.revokeObjectURL(this._blobs[filename]);
+                        delete this._blobs[filename];
+                    });
+                    // 没有法线就创建法线
+                    if (!geometry.getAttribute("normal")) {
+                        geometry.computeVertexNormals();
+                    }
+                    //是否需要绕x轴旋转
+                    const plyNeedRotationX = await new Promise(async (resolve) => {
+                        // 读取文件内容
+                        const res = await axios.get(modelurl);
+                        debugger;
+                        // if (res.match(/\b(Blender|binary_little_endian)\b/)) {
+                        //   resolve(true);
+                        // } else {
+                        //   resolve(false);
+                        // }
+                    });
+                    const plyMesh = new Mesh(geometry, new MeshStandardMaterial({
+                        metalness: 0.5,
+                        roughness: 0.5,
+                        vertexColors: Boolean(geometry.getAttribute("color")),
+                    }));
+                    if (plyNeedRotationX) {
+                        plyMesh.rotation.x = -Math.PI / 2;
+                    }
+                    return plyMesh;
+                })
+                    .catch(() => {
+                    console.log(`${url},加载失败`);
+                });
             case "usdz":
                 return await threeLoader.usdzLoader
                     .loadAsync(modelurl)