three-base 2.0.56 → 2.0.58

package/ThreeBase.d.ts

@@ -54,6 +54,13 @@ export default class ThreeBase extends EventDispatcher {
         position: Vector3;
         centerPosition: string;
     };
+    lookatObjects({ objects, duration, direction, offset, distance }: {
+        objects: Array<Object3D>;
+        duration?: number;
+        direction?: Vector3;
+        offset?: Vector3;
+        distance?: number;
+    }): void;
     v3tov2(v3: Vector3): Vector2;
     controlType: "OrbitControls" | "MapControls";
     originScreenSpacePanning: boolean;
@@ -64,7 +71,10 @@ export default class ThreeBase extends EventDispatcher {
     hasPass(): boolean;
     render(): void;
     private renderBindThis;
-    download(fileName?: string): void;
+    getThumbBlob(): Promise<Blob>;
+    getThumbBase64(): string;
+    getThumbFile(): Promise<File>;
+    download(fileName?: string): Promise<void>;
     private _preMesh;
     private _preRT;
     preloadTexture(src: string): Promise<void>;

package/ThreeBase.js

@@ -5,7 +5,7 @@
  * @Last Modified time: 2024-06-18 21:03:02
  */
 import { round } from "lodash";
-import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, Mesh, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
+import { AxesHelper, Box3, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, Mesh, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, 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";
@@ -297,6 +297,27 @@ export default class ThreeBase extends EventDispatcher {
             centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
         };
     }
+    // 查看对象
+    lookatObjects({ objects, duration = 1000, direction = new Vector3(0.3, 0.3, 1), offset = new Vector3(0, 0, 0), distance = 1 }) {
+        const box3 = new Box3();
+        objects.map(o => {
+            o.traverse(oo => {
+                box3.expandByObject(oo);
+            });
+        });
+        const size = new Vector3();
+        box3.getSize(size);
+        const center = new Vector3();
+        box3.getCenter(center);
+        center.add(offset);
+        const modelSize = size.length() * distance;
+        if (this.cameraType === "perspectiveCamera") {
+            const { fov } = this.getCamera();
+            const cameraDistance = modelSize / (2 * Math.tan(fov * Math.PI / 360));
+            const position = direction.setLength(cameraDistance).add(center);
+            this.setLookAt({ center, position, duration });
+        }
+    }
     // 三维向量转化成屏幕上的2维向量
     v3tov2(v3) {
         //判断需要使用那个相机
@@ -413,13 +434,36 @@ export default class ThreeBase extends EventDispatcher {
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);
+    //获取渲染图blob对象
+    async getThumbBlob() {
+        this.render();
+        const blob = await new Promise((resolve, reject) => {
+            this.renderer.domElement.toBlob(blob => {
+                resolve(blob);
+            }, "image/png", 1);
+        });
+        return blob;
+    }
+    //获取渲染图base64
+    getThumbBase64() {
+        this.render();
+        const base64 = this.renderer.domElement.toDataURL('image/png');
+        return base64;
+    }
+    //获取渲染图文件对象
+    async getThumbFile() {
+        const blob = await this.getThumbBlob();
+        const file = new File([blob], 'thumb.png', { type: blob.type });
+        return file;
+    }
     // 下载渲染图
-    download(fileName = "download") {
+    async download(fileName = "download") {
         this.render();
+        const blob = await this.getThumbBlob();
         const base64 = this.renderer.domElement.toDataURL('image/png');
         let saveLink = document.createElement("a");
         saveLink.download = `${fileName}.png`;
-        saveLink.href = base64;
+        saveLink.href = URL.createObjectURL(blob);
         document.body.append(saveLink);
         saveLink.click();
     }

package/ThreeBase.ts

@@ -6,7 +6,7 @@
  */
 
 import { add, round } from "lodash";
-import { AxesHelper, BufferGeometry, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, MOUSE, Mesh, MeshBasicMaterial, NoBlending, NormalBlending, Object3D, OrthographicCamera, PerspectiveCamera, RGBAFormat, SRGBColorSpace, Scene, TOUCH, Texture, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
+import { AxesHelper, Box3, BufferGeometry, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, MOUSE, Mesh, MeshBasicMaterial, NoBlending, NormalBlending, Object3D, OrthographicCamera, PerspectiveCamera, RGBAFormat, SRGBColorSpace, Scene, TOUCH, Texture, 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";
@@ -359,6 +359,41 @@ export default class ThreeBase extends EventDispatcher {
         }
     }
 
+    // 查看对象
+    lookatObjects({
+        objects,
+        duration = 1000,
+        direction = new Vector3(0.3, 0.3, 1),
+        offset = new Vector3(0, 0, 0),
+        distance = 1
+    }: {
+        objects: Array<Object3D>,
+        duration?: number,
+        direction?: Vector3,
+        offset?: Vector3,
+        distance?: number
+    }) {
+        const box3 = new Box3();
+        objects.map(o => {
+            o.traverse(oo => {
+                box3.expandByObject(oo);
+            });
+        });
+        const size = new Vector3();
+        box3.getSize(size);
+        const center = new Vector3();
+        box3.getCenter(center);
+
+        center.add(offset);
+        const modelSize = size.length() * distance;
+        if (this.cameraType === "perspectiveCamera") {
+            const { fov } = this.getCamera() as PerspectiveCamera;
+            const cameraDistance = modelSize / (2 * Math.tan(fov * Math.PI / 360));
+            const position = direction.setLength(cameraDistance).add(center);
+            this.setLookAt({ center, position, duration });
+        }
+    }
+
     // 三维向量转化成屏幕上的2维向量
     v3tov2(v3: Vector3) {
         //判断需要使用那个相机
@@ -499,13 +534,37 @@ export default class ThreeBase extends EventDispatcher {
 
     private renderBindThis = this.render.bind(this);
 
+    //获取渲染图blob对象
+    async getThumbBlob() {
+        this.render();
+        const blob = await new Promise<Blob>((resolve, reject) => {
+            this.renderer.domElement.toBlob(blob => {
+                resolve(blob as Blob);
+            }, "image/png", 1);
+        });
+        return blob;
+    }
+    //获取渲染图base64
+    getThumbBase64() {
+        this.render();
+        const base64 = this.renderer.domElement.toDataURL('image/png');
+        return base64;
+    }
+    //获取渲染图文件对象
+    async getThumbFile() {
+        const blob = await this.getThumbBlob();
+        const file = new File([blob], 'thumb.png', { type: blob.type });
+        return file;
+    }
+
     // 下载渲染图
-    download(fileName: string = "download") {
+    async download(fileName: string = "download") {
         this.render();
+        const blob = await this.getThumbBlob();
         const base64 = this.renderer.domElement.toDataURL('image/png');
         let saveLink = document.createElement("a");
         saveLink.download = `${fileName}.png`;
-        saveLink.href = base64;
+        saveLink.href = URL.createObjectURL(blob);
         document.body.append(saveLink);
         saveLink.click();
     }

package/package.json

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