three-base 2.0.16 → 2.0.18

package/ThreeBase.d.ts

@@ -19,18 +19,19 @@ export default class ThreeBase extends EventDispatcher {
     isRendererContextLost: boolean;
     setContainer(div: HTMLDivElement | null): Promise<void>;
     setSize(width: number, height: number): void;
-    controlsPosition: Transition;
+    controlsDistance: Transition;
     controlsCenter: Transition;
+    controlsPosition: Transition;
     gridHelper: GridHelper;
     axesHelper: AxesHelper;
     init(): void;
     resetLookAt({ position, center, }: {
-        position?: Vector3;
-        center?: Vector3;
+        position: Vector3;
+        center: Vector3;
     }): void;
     setLookAt({ position, center, duration }: {
-        position?: Vector3;
-        center?: Vector3;
+        position: Vector3;
+        center: Vector3;
         duration?: number;
     }): Promise<void>;
     getLookAt(): {

package/ThreeBase.js

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-05-23 23:54:13
  */
 import { round } from "lodash";
-import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, DisplayP3ColorSpace, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -38,13 +38,11 @@ export default class ThreeBase extends EventDispatcher {
         stencilBuffer: false,
         depthTexture: this.baseDepthTexture,
         anisotropy: 16,
-        colorSpace: SRGBColorSpace,
+        colorSpace: DisplayP3ColorSpace
         // | typeof NoColorSpace
         // | typeof SRGBColorSpace
         // | typeof LinearSRGBColorSpace
         // | typeof DisplayP3ColorSpace;
-        // encoding: sRGBEncoding
-        // LinearEncoding | typeof sRGBEncoding;
     });
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
@@ -77,10 +75,7 @@ export default class ThreeBase extends EventDispatcher {
     //透视相机
     camera = new PerspectiveCamera(45, 1, 0.0001, 1000000);
     // 场景对象
-    scene = (() => {
-        const scene = new Scene();
-        return scene;
-    })();
+    scene = new Scene();
     ///鼠标事件对象
     threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
     // 轨道控制器
@@ -106,6 +101,7 @@ export default class ThreeBase extends EventDispatcher {
             div.append(this.renderer.domElement);
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
+                this.isRendererContextLost = false;
                 this.renderer.forceContextRestore();
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 await new Promise(resolve => requestAnimationFrame(resolve));
@@ -119,7 +115,7 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 修改尺寸
     setSize(width, height) {
-        if (this.camera instanceof PerspectiveCamera) {
+        if (this.camera.type == 'PerspectiveCamera') {
             this.camera.aspect = width / height;
             this.camera.updateProjectionMatrix();
         }
@@ -131,16 +127,11 @@ export default class ThreeBase extends EventDispatcher {
         // this.renderer.clear();
         // this.renderer.render(this.scene, this.camera);
     }
-    // 控制器的位置缓动的计算的顶点对象
-    controlsPosition = (() => {
-        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
-        controlsPosition.setDuration(1000);
-        controlsPosition.onChange(({ x, y, z }) => {
-            this.camera.position.set(x, y, z);
-            this.camera.lookAt(this.controls.target);
-            this.needRender = true;
-        });
-        return controlsPosition;
+    // 视角距离过度
+    controlsDistance = (() => {
+        const controlsDistance = new Transition({ distance: 0 });
+        controlsDistance.setDuration(1000);
+        return controlsDistance;
     })();
     // 控制器的 朝向带缓动的计算的顶点对象
     controlsCenter = (() => {
@@ -153,6 +144,21 @@ export default class ThreeBase extends EventDispatcher {
         });
         return controlsCenter;
     })();
+    // 控制器的位置缓动的计算的顶点对象
+    controlsPosition = (() => {
+        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
+        controlsPosition.setDuration(1000);
+        controlsPosition.onChange(({ x, y, z }) => {
+            const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x, y, z)
+                .sub(this.controls.target)
+                .setLength(distance)
+                .add(this.controls.target);
+            this.camera.lookAt(this.controls.target);
+            this.needRender = true;
+        });
+        return controlsPosition;
+    })();
     // 网格辅助线
     gridHelper = (() => {
         const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
@@ -174,19 +180,20 @@ export default class ThreeBase extends EventDispatcher {
         });
     }
     // 重置控制器的位置
-    resetLookAt({ position, center, }) {
+    resetLookAt({ position = this.camera.position, center = this.controls.target, }) {
         // 停止控制器的惯性
         this.controls.enableDamping = false;
         this.controls.saveState();
         this.controls.update();
         this.controls.reset();
         this.controls.enableDamping = true;
+        this.controlsDistance.reset({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)) });
         position && this.controlsPosition.reset({ x: position.x, y: position.y, z: position.z });
         center && this.controlsCenter.reset({ x: center.x, y: center.y, z: center.z });
         this.needRender = true;
     }
     // 设置控制器的位置 以动画的方式移动控制器
-    async setLookAt({ position, center, duration = 1000 }) {
+    async setLookAt({ position = this.camera.position, center = this.controls.target, duration = 1000 }) {
         // 停止控制器的惯性
         this.controls.enableDamping = false;
         this.controls.saveState();
@@ -198,19 +205,20 @@ export default class ThreeBase extends EventDispatcher {
         // 等待动画执行完成
         await Promise.all([
             new Promise(async (resolve, reject) => {
-                if (position) {
-                    this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
-                    await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
-                }
+                this.controlsDistance.setDuration(duration).reset({ distance: this.camera.position.distanceTo(this.controls.target) });
+                await this.controlsDistance.set({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)) });
                 resolve();
             }),
             new Promise(async (resolve, reject) => {
-                if (center) {
-                    this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
-                    await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
-                }
+                this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
+                await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
                 resolve();
             }),
+            new Promise(async (resolve, reject) => {
+                this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
+                await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
+                resolve();
+            })
         ]);
     }
     // 获取控制的位置和朝向 保留3位小数
@@ -220,7 +228,7 @@ export default class ThreeBase extends EventDispatcher {
         return {
             center: new Vector3(...center),
             position: new Vector3(...position),
-            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
+            centerPosition: `position: new Vector3(${position.join(",")}),center: new Vector3(${center.join(",")})`
         };
     }
     // 三维向量转化成屏幕上的2维向量
@@ -289,12 +297,16 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        //TODO 渲染了2次, 还有优化空间
         this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
         this.renderer.setRenderTarget(null);
         this.renderer.clear();
+        //TODO 渲染了2次, 还有优化空间
+        // this.renderer.setScissorTest(false);
+        // this.renderRendererTarget(this.baseRenderTarget);
+        // this.renderer.setScissorTest(true);
+        // this.renderer.setScissor(0, 0, 512, 1000);
         this.renderer.render(this.scene, this.camera);
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {

package/ThreeBase.ts

@@ -43,13 +43,11 @@ export default class ThreeBase extends EventDispatcher {
         stencilBuffer: false,
         depthTexture: this.baseDepthTexture,
         anisotropy: 16,
-        colorSpace: SRGBColorSpace,
+        colorSpace: DisplayP3ColorSpace
         // | typeof NoColorSpace
         // | typeof SRGBColorSpace
         // | typeof LinearSRGBColorSpace
         // | typeof DisplayP3ColorSpace;
-        // encoding: sRGBEncoding
-        // LinearEncoding | typeof sRGBEncoding;
     });
 
     // 公用渲染目标1
@@ -91,10 +89,7 @@ export default class ThreeBase extends EventDispatcher {
     camera: Camera = new PerspectiveCamera(45, 1, 0.0001, 1000000);
 
     // 场景对象
-    scene = (() => {
-        const scene = new Scene();
-        return scene;
-    })();
+    scene = new Scene();
 
     ///鼠标事件对象
     threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
@@ -125,6 +120,7 @@ export default class ThreeBase extends EventDispatcher {
 
             // 如果上下文被销毁了,  就恢复上下文
             if (this.isRendererContextLost) {
+                this.isRendererContextLost = false;
                 this.renderer.forceContextRestore();
                 await new Promise(resolve => requestAnimationFrame(resolve));
                 await new Promise(resolve => requestAnimationFrame(resolve));
@@ -141,9 +137,9 @@ export default class ThreeBase extends EventDispatcher {
 
     // 修改尺寸
     setSize(width: number, height: number) {
-        if (this.camera instanceof PerspectiveCamera) {
-            this.camera.aspect = width / height;
-            this.camera.updateProjectionMatrix();
+        if ((this.camera as PerspectiveCamera).type == 'PerspectiveCamera') {
+            (this.camera as PerspectiveCamera).aspect = width / height;
+            (this.camera as PerspectiveCamera).updateProjectionMatrix();
         }
 
         this.renderer.setPixelRatio(window.devicePixelRatio);
@@ -157,16 +153,11 @@ export default class ThreeBase extends EventDispatcher {
         // this.renderer.render(this.scene, this.camera);
     }
 
-    // 控制器的位置缓动的计算的顶点对象
-    controlsPosition = (() => {
-        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
-        controlsPosition.setDuration(1000);
-        controlsPosition.onChange(({ x, y, z }) => {
-            this.camera.position.set(x, y, z);
-            this.camera.lookAt(this.controls.target);
-            this.needRender = true;
-        });
-        return controlsPosition;
+    // 视角距离过度
+    controlsDistance = (() => {
+        const controlsDistance = new Transition({ distance: 0 });
+        controlsDistance.setDuration(1000);
+        return controlsDistance;
     })();
 
     // 控制器的 朝向带缓动的计算的顶点对象
@@ -181,6 +172,23 @@ export default class ThreeBase extends EventDispatcher {
         return controlsCenter;
     })();
 
+    // 控制器的位置缓动的计算的顶点对象
+    controlsPosition = (() => {
+        const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
+        controlsPosition.setDuration(1000);
+        controlsPosition.onChange(({ x, y, z }) => {
+            const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x, y, z)
+                .sub(this.controls.target)
+                .setLength(distance)
+                .add(this.controls.target);
+
+            this.camera.lookAt(this.controls.target);
+            this.needRender = true;
+        });
+        return controlsPosition;
+    })();
+
     // 网格辅助线
     gridHelper = (() => {
         const gridHelper = new GridHelper(1000, 100, 0x303030, 0x303030);
@@ -206,7 +214,10 @@ export default class ThreeBase extends EventDispatcher {
     }
 
     // 重置控制器的位置
-    resetLookAt({ position, center, }: { position?: Vector3, center?: Vector3, }) {
+    resetLookAt({
+        position = this.camera.position,
+        center = this.controls.target,
+    }: { position: Vector3, center: Vector3 }) {
 
         // 停止控制器的惯性
         this.controls.enableDamping = false;
@@ -215,13 +226,18 @@ export default class ThreeBase extends EventDispatcher {
         this.controls.reset();
         this.controls.enableDamping = true;
 
+        this.controlsDistance.reset({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)) });
         position && this.controlsPosition.reset({ x: position.x, y: position.y, z: position.z });
         center && this.controlsCenter.reset({ x: center.x, y: center.y, z: center.z });
         this.needRender = true;
     }
 
     // 设置控制器的位置 以动画的方式移动控制器
-    async setLookAt({ position, center, duration = 1000 }: { position?: Vector3, center?: Vector3, duration?: number }) {
+    async setLookAt({
+        position = this.camera.position,
+        center = this.controls.target,
+        duration = 1000
+    }: { position: Vector3, center: Vector3, duration?: number }) {
 
         // 停止控制器的惯性
         this.controls.enableDamping = false;
@@ -236,20 +252,20 @@ export default class ThreeBase extends EventDispatcher {
         // 等待动画执行完成
         await Promise.all([
             new Promise<void>(async (resolve, reject) => {
-                if (position) {
-                    this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
-                    await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
-                }
+                this.controlsDistance.setDuration(duration).reset({ distance: this.camera.position.distanceTo(this.controls.target) });
+                await this.controlsDistance.set({ distance: new Vector3(position.x, position.y, position.z).distanceTo(new Vector3(center.x, center.y, center.z)) });
                 resolve();
             }),
             new Promise<void>(async (resolve, reject) => {
-                if (center) {
-                    this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
-                    await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
-                }
+                this.controlsPosition.setDuration(duration).reset({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z });
+                await this.controlsPosition.set({ x: position.x, y: position.y, z: position.z });
                 resolve();
             }),
-
+            new Promise<void>(async (resolve, reject) => {
+                this.controlsCenter.setDuration(duration).reset({ x: currentCenter.x, y: currentCenter.y, z: currentCenter.z });
+                await this.controlsCenter.set({ x: center.x, y: center.y, z: center.z });
+                resolve();
+            })
         ]);
 
     }
@@ -261,7 +277,7 @@ export default class ThreeBase extends EventDispatcher {
         return {
             center: new Vector3(...center),
             position: new Vector3(...position),
-            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
+            centerPosition: `position: new Vector3(${position.join(",")}),center: new Vector3(${center.join(",")})`
         }
     }
 
@@ -347,15 +363,22 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
 
-        //TODO 渲染了2次, 还有优化空间
         this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
 
         this.renderer.setRenderTarget(null);
         this.renderer.clear();
+
+        //TODO 渲染了2次, 还有优化空间
+        // this.renderer.setScissorTest(false);
+        // this.renderRendererTarget(this.baseRenderTarget);
+        // this.renderer.setScissorTest(true);
+        // this.renderer.setScissor(0, 0, 512, 1000);
         this.renderer.render(this.scene, this.camera);
 
+
+
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {
             stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "2.0.16",
+    "version": "2.0.18",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",

package/pass/stroke_pass.js

@@ -371,7 +371,6 @@ const blurShader = new RawShaderMaterial({
 		vec4 stroke(){
 			vec4 blurColor = vec4(0.0);
 			vec4 Color = vec4(0.0);
-			int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
 			for (int i = 0; i < 24; i++ ) {
 				Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
 				if (Color.a > 0.0) {
@@ -485,7 +484,7 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     FXAAShaderMaterial.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     //描边颜色
     blurShader.uniforms.color.value.set(stroke_color);
-    blurShader.uniforms.width.value = stroke_width / 4;
+    blurShader.uniforms.width.value = 1;
     //深度测试
     renderer.setRenderTarget(selectDethpTestTextureTarget);
     renderer.clear();
@@ -501,14 +500,16 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     renderer.setRenderTarget(blur2TextureTarget);
     blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
     fsQuad.render(renderer, blurShader);
-    //三次描边
-    renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
-    //四次描边
-    renderer.setRenderTarget(blur2TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
+    for (let i = 0; i < stroke_width - 2; i++) {
+        //一次描边
+        renderer.setRenderTarget(blur1TextureTarget);
+        blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+        fsQuad.render(renderer, blurShader);
+        //二次描边
+        renderer.setRenderTarget(blur2TextureTarget);
+        blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+        fsQuad.render(renderer, blurShader);
+    }
     //最后抗锯齿
     renderer.setRenderTarget(blur1TextureTarget);
     FXAAShaderMaterial.uniforms.tDiffuse.value = blur2TextureTarget.texture;

package/pass/stroke_pass.ts

@@ -383,7 +383,6 @@ const blurShader = new RawShaderMaterial({
 		vec4 stroke(){
 			vec4 blurColor = vec4(0.0);
 			vec4 Color = vec4(0.0);
-			int vSum = 0; // 周围像素点中和 visibleColor 相似的数量
 			for (int i = 0; i < 24; i++ ) {
 				Color = texture2D(tDiffuse, vUv + (offset[i] * piexl));
 				if (Color.a > 0.0) {
@@ -505,7 +504,7 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     FXAAShaderMaterial.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     //描边颜色
     blurShader.uniforms.color.value.set(stroke_color);
-    blurShader.uniforms.width.value = stroke_width / 4;
+    blurShader.uniforms.width.value = 1;
 
 
     //深度测试
@@ -516,7 +515,6 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
     fsQuad.render(renderer, depthTestShader);
 
-
     //一次描边
     renderer.setRenderTarget(blur1TextureTarget);
     blurShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
@@ -527,15 +525,18 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
     fsQuad.render(renderer, blurShader);
 
-    //三次描边
-    renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
 
-    //四次描边
-    renderer.setRenderTarget(blur2TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
+    for (let i = 0; i < stroke_width - 2; i++) {
+        //一次描边
+        renderer.setRenderTarget(blur1TextureTarget);
+        blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+        fsQuad.render(renderer, blurShader);
+
+        //二次描边
+        renderer.setRenderTarget(blur2TextureTarget);
+        blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+        fsQuad.render(renderer, blurShader);
+    }
 
     //最后抗锯齿
     renderer.setRenderTarget(blur1TextureTarget);

package/threeLoader.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-02-07 11:11:48
  */
-import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, SRGBColorSpace, TextureLoader, VideoTexture } from "three";
+import { CanvasTexture, DefaultLoadingManager, EventDispatcher, RepeatWrapping, TextureLoader, VideoTexture } from "three";
 import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
 import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
@@ -33,7 +33,7 @@ class ThreeLoader extends EventDispatcher {
         };
     }
     // 各向异性
-    anisotropy = 1;
+    anisotropy = 16;
     // 设置各向异性 由渲染器来调用并设置
     setAnisotropy(v) {
         this.anisotropy = v;
@@ -49,7 +49,7 @@ class ThreeLoader extends EventDispatcher {
             const canvasTexture = new CanvasTexture(src);
             canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
             canvasTexture.anisotropy = this.anisotropy;
-            canvasTexture.colorSpace = SRGBColorSpace;
+            // canvasTexture.colorSpace = SRGBColorSpace;
             return canvasTexture;
         }
         let texture = this.textureMap.get(src);
@@ -77,7 +77,7 @@ class ThreeLoader extends EventDispatcher {
         }
         texture.wrapS = texture.wrapT = RepeatWrapping;
         texture.anisotropy = this.anisotropy;
-        texture.colorSpace = SRGBColorSpace;
+        // texture.colorSpace = SRGBColorSpace;
         return texture;
     }
     ;

package/threeLoader.ts

@@ -41,7 +41,7 @@ class ThreeLoader extends EventDispatcher {
     }
 
     // 各向异性
-    anisotropy = 1;
+    anisotropy = 16;
 
     // 设置各向异性 由渲染器来调用并设置
     setAnisotropy(v: number) {
@@ -62,7 +62,7 @@ class ThreeLoader extends EventDispatcher {
             const canvasTexture = new CanvasTexture(src);
             canvasTexture.wrapS = canvasTexture.wrapT = RepeatWrapping;
             canvasTexture.anisotropy = this.anisotropy;
-            canvasTexture.colorSpace = SRGBColorSpace;
+            // canvasTexture.colorSpace = SRGBColorSpace;
 
             return canvasTexture;
         }
@@ -96,7 +96,7 @@ class ThreeLoader extends EventDispatcher {
 
         texture.wrapS = texture.wrapT = RepeatWrapping;
         texture.anisotropy = this.anisotropy;
-        texture.colorSpace = SRGBColorSpace;
+        // texture.colorSpace = SRGBColorSpace;
 
         return texture as Texture;
     };

package/threeUtils.js

@@ -4,7 +4,7 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-05-03 00:36:18
  */
-import { Box3, BufferGeometry, Clock, EventDispatcher, Object3D, Vector3 } from "three";
+import { Box3, Clock, EventDispatcher, Vector3 } from "three";
 import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter';
 class ThreeUtils extends EventDispatcher {
     constructor() {
@@ -108,11 +108,11 @@ class ThreeUtils extends EventDispatcher {
     }
     // 获取中心点
     getCenter(object3d) {
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             this._box3.setFromObject(object3d);
             this._box3.getCenter(this._center);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.computeBoundingBox();
             object3d.boundingBox.getCenter(this._center);
         }
@@ -120,11 +120,11 @@ class ThreeUtils extends EventDispatcher {
     }
     // 获取模型大小
     getSize(object3d) {
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             this._box3.setFromObject(object3d);
             this._box3.getSize(this._size);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.computeBoundingBox();
             object3d.boundingBox.getSize(this._size);
         }
@@ -132,7 +132,7 @@ class ThreeUtils extends EventDispatcher {
     }
     // 模型对齐底面
     alignBottom(object3d, y = 0) {
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             this._box3.setFromObject(object3d);
             this._box3.getCenter(this._center);
             this._box3.getSize(this._size);
@@ -140,20 +140,20 @@ class ThreeUtils extends EventDispatcher {
             object3d.position.y += y;
             object3d.updateMatrixWorld(true);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.computeBoundingBox();
             object3d.translate(0, -object3d.boundingBox.min.y + y, 0);
         }
     }
     // 居中对象
     centerObject3D(object3d) {
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             this._box3.setFromObject(object3d);
             this._box3.getCenter(this._center);
             object3d.position.sub(this._center);
             object3d.updateMatrixWorld(true);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.center();
         }
     }
@@ -161,15 +161,15 @@ class ThreeUtils extends EventDispatcher {
     center(object3d) {
         this.centerObject3D(object3d);
     }
-    // 使用指定的纬度计算, 缩放至指定大小
+    // 使用指定的维度(xyz)计算, 缩放至指定大小;
     scaleTo(object3d, size = 1, key = ["x", "y", "z"]) {
         const originSize = this.getSize(object3d);
         const scale = size / Math.max(...key.map(k => originSize[k]));
-        if (object3d instanceof Object3D) {
+        if (object3d.isObject3D) {
             object3d.scale.multiplyScalar(scale);
             object3d.updateMatrixWorld(true);
         }
-        else if (object3d instanceof BufferGeometry) {
+        else if (object3d.isBufferGeometry) {
             object3d.scale(scale, scale, scale);
         }
     }

package/threeUtils.ts

@@ -131,12 +131,12 @@ class ThreeUtils extends EventDispatcher {
 
     // 获取中心点
     getCenter(object3d: Object3D | BufferGeometry) {
-        if (object3d instanceof Object3D) {
-            this._box3.setFromObject(object3d);
+        if ((object3d as Object3D).isObject3D) {
+            this._box3.setFromObject(object3d as Object3D);
             this._box3.getCenter(this._center);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.computeBoundingBox();
-            object3d.boundingBox!.getCenter(this._center);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).computeBoundingBox();
+            (object3d as BufferGeometry).boundingBox!.getCenter(this._center);
         }
 
         return this._center;
@@ -144,12 +144,12 @@ class ThreeUtils extends EventDispatcher {
 
     // 获取模型大小
     getSize(object3d: Object3D | BufferGeometry) {
-        if (object3d instanceof Object3D) {
-            this._box3.setFromObject(object3d);
+        if ((object3d as Object3D).isObject3D) {
+            this._box3.setFromObject(object3d as Object3D);
             this._box3.getSize(this._size);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.computeBoundingBox();
-            object3d.boundingBox!.getSize(this._size);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).computeBoundingBox();
+            (object3d as BufferGeometry).boundingBox!.getSize(this._size);
         }
 
         return this._size;
@@ -157,28 +157,28 @@ class ThreeUtils extends EventDispatcher {
 
     // 模型对齐底面
     alignBottom(object3d: Object3D | BufferGeometry, y = 0) {
-        if (object3d instanceof Object3D) {
-            this._box3.setFromObject(object3d);
+        if ((object3d as Object3D).isObject3D) {
+            this._box3.setFromObject(object3d as Object3D);
             this._box3.getCenter(this._center);
             this._box3.getSize(this._size);
-            object3d.position.y -= (this._center.y - (this._size.y * 0.5));
-            object3d.position.y += y;
-            object3d.updateMatrixWorld(true);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.computeBoundingBox();
-            object3d.translate(0, -object3d.boundingBox!.min.y + y, 0);
+            (object3d as Object3D).position.y -= (this._center.y - (this._size.y * 0.5));
+            (object3d as Object3D).position.y += y;
+            (object3d as Object3D).updateMatrixWorld(true);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).computeBoundingBox();
+            (object3d as BufferGeometry).translate(0, -(object3d as BufferGeometry).boundingBox!.min.y + y, 0);
         }
     }
 
     // 居中对象
     centerObject3D(object3d: Object3D | BufferGeometry) {
-        if (object3d instanceof Object3D) {
-            this._box3.setFromObject(object3d);
+        if ((object3d as Object3D).isObject3D) {
+            this._box3.setFromObject(object3d as Object3D);
             this._box3.getCenter(this._center);
-            object3d.position.sub(this._center);
-            object3d.updateMatrixWorld(true);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.center();
+            (object3d as Object3D).position.sub(this._center);
+            (object3d as Object3D).updateMatrixWorld(true);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).center();
         }
     }
 
@@ -187,16 +187,16 @@ class ThreeUtils extends EventDispatcher {
         this.centerObject3D(object3d);
     }
 
-    // 使用指定的纬度计算, 缩放至指定大小
+    // 使用指定的维度(xyz)计算, 缩放至指定大小;
     scaleTo(object3d: Object3D | BufferGeometry, size: number = 1, key: Array<"x" | "y" | "z"> = ["x", "y", "z"]) {
         const originSize = this.getSize(object3d);
         const scale = size / Math.max(...key.map(k => originSize[k]));
 
-        if (object3d instanceof Object3D) {
-            object3d.scale.multiplyScalar(scale);
-            object3d.updateMatrixWorld(true);
-        } else if (object3d instanceof BufferGeometry) {
-            object3d.scale(scale, scale, scale);
+        if ((object3d as Object3D).isObject3D) {
+            (object3d as Object3D).scale.multiplyScalar(scale);
+            (object3d as Object3D).updateMatrixWorld(true);
+        } else if ((object3d as BufferGeometry).isBufferGeometry) {
+            (object3d as BufferGeometry).scale(scale, scale, scale);
         }
     }