three-base 2.0.31 → 2.0.33

package/MeshBase.ts

@@ -82,7 +82,7 @@ export default class MeshBase extends Group {
         if (MeshBase.models.get(url)) {
 
             this.clear();
-            const mesh = MeshBase.models.get(url);
+            const mesh = MeshBase.models.get(url)!;
             // 判断是否有动画
             this.hasAnimation = mesh.animations.length > 0;
 
@@ -92,7 +92,7 @@ export default class MeshBase extends Group {
 
                 this.animationActions = {};
                 mesh.animations.map(animation => {
-                    const animationAction = this.mixer.clipAction(animation).play();
+                    const animationAction = this.mixer!.clipAction(animation).play();
                     animationAction.weight = 0;
                     this.animationActions[animation.name] = animationAction;
                 });

package/ThreeBase.d.ts

@@ -1,4 +1,4 @@
-import { AxesHelper, BufferGeometry, Camera, DepthTexture, EventDispatcher, GridHelper, Object3D, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, BufferGeometry, 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";
@@ -12,7 +12,11 @@ export default class ThreeBase extends EventDispatcher {
     tempVector3: Vector3;
     size: Vector2;
     renderer: WebGLRenderer;
-    camera: Camera;
+    perspectiveCamera: PerspectiveCamera;
+    orthographicCamera: OrthographicCamera;
+    cameraType: "perspectiveCamera" | "orthographicCamera";
+    setCameraType(cameraType: "perspectiveCamera" | "orthographicCamera"): void;
+    getCamera(): PerspectiveCamera | OrthographicCamera;
     scene: Scene;
     threeMouse: ThreeMouse;
     controls: OrbitControls;

package/ThreeBase.js

@@ -5,17 +5,17 @@
  * @Last Modified time: 2024-01-20 05:33:28
  */
 import { round } from "lodash";
-import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, 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 { generateUUID } from "three/src/math/MathUtils";
+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 { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
+import FXAAShaderMaterial from "./shaders/FXAAShaderMaterial";
 import threeLoader from "./threeLoader";
-import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
-import Transition from "./Transition";
-import FXAAShaderMaterial from "./shaders/FXAAShaderMaterial";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -72,14 +72,39 @@ export default class ThreeBase extends EventDispatcher {
         return renderer;
     })();
     //透视相机
-    camera = new PerspectiveCamera(45, 1, 0.0001, 1000000);
+    perspectiveCamera = new PerspectiveCamera(45, 1, 0.0001, 1000000);
+    //正交相机
+    orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0.0001, 1000000);
+    //相机的类型
+    cameraType = "perspectiveCamera";
+    setCameraType(cameraType) {
+        if (this.cameraType !== cameraType) {
+            this.cameraType = cameraType;
+            if (this.cameraType === "perspectiveCamera") {
+                this.threeMouse._camera = this.perspectiveCamera;
+                this.controls.object = this.perspectiveCamera;
+            }
+            else if (this.cameraType === "orthographicCamera") {
+                this.threeMouse._camera = this.orthographicCamera;
+                this.controls.object = this.orthographicCamera;
+            }
+        }
+    }
+    //获取当前使用的的相机
+    getCamera() {
+        //判断需要使用那个相机
+        const camera = ((this.cameraType === "perspectiveCamera") ?
+            this.perspectiveCamera :
+            this.orthographicCamera);
+        return camera;
+    }
     // 场景对象
     scene = new Scene();
     ///鼠标事件对象
-    threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
+    threeMouse = new ThreeMouse(this.renderer, this.perspectiveCamera, this.scene);
     // 轨道控制器
     controls = (() => {
-        const controls = new OrbitControls(this.camera, this.renderer.domElement);
+        const controls = new OrbitControls(this.perspectiveCamera, this.renderer.domElement);
         controls.addEventListener("change", () => {
             this.needRender = true;
         });
@@ -106,10 +131,14 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 修改尺寸
     setSize(width, height) {
-        if (this.camera.type == 'PerspectiveCamera') {
-            this.camera.aspect = width / height;
-            this.camera.updateProjectionMatrix();
-        }
+        //修改透视相机的比例
+        this.perspectiveCamera.aspect = width / height;
+        this.perspectiveCamera.updateProjectionMatrix();
+        //修改正交相机的比例
+        // this.orthographicCamera.top = height / width;
+        // this.orthographicCamera.bottom = -height / width;
+        this.orthographicCamera.left = -width / height;
+        this.orthographicCamera.right = width / height;
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
         // 设置帧缓存区的尺寸
@@ -134,7 +163,8 @@ export default class ThreeBase extends EventDispatcher {
         controlsCenter.setDuration(1000);
         controlsCenter.onChange(({ x, y, z }) => {
             this.controls.target.set(x, y, z);
-            this.camera.lookAt(this.controls.target);
+            this.perspectiveCamera.lookAt(this.controls.target);
+            this.orthographicCamera.lookAt(this.controls.target);
             this.needRender = true;
         });
         return controlsCenter;
@@ -145,7 +175,7 @@ export default class ThreeBase extends EventDispatcher {
         controlsPosition.setDuration(1000);
         controlsPosition.onChange(({ x, y, z }) => {
             // const distance = this.controlsDistance.get("distance");
-            this.camera.position.set(x + 0.01, y, z + 0.01);
+            this.perspectiveCamera.position.set(x + 0.01, y, z + 0.01);
             // .sub(this.controls.target)
             // .setLength(distance)
             // .add(this.controls.target);
@@ -162,7 +192,14 @@ export default class ThreeBase extends EventDispatcher {
             // directionVecA.applyAxisAngle(axis, angle);
             // // 输出旋转后的方向向量
             // console.log(directionVecA);
-            this.camera.lookAt(this.controls.target);
+            this.perspectiveCamera.lookAt(this.controls.target);
+            //计算正交相机的缓动
+            this.orthographicCamera.position
+                .set(x + 0.01, y, z + 0.01)
+                .sub(this.controls.target)
+                .setLength(250000)
+                .add(this.controls.target);
+            this.orthographicCamera.lookAt(this.controls.target);
             this.needRender = true;
         });
         return controlsPosition;
@@ -197,7 +234,7 @@ export default class ThreeBase extends EventDispatcher {
         });
     }
     // 重置控制器的位置
-    resetLookAt({ position = this.camera.position, center = this.controls.target, }) {
+    resetLookAt({ position = this.perspectiveCamera.position, center = this.controls.target, }) {
         // 停止控制器的惯性
         this.controls.enableDamping = false;
         this.controls.saveState();
@@ -210,19 +247,19 @@ export default class ThreeBase extends EventDispatcher {
         this.needRender = true;
     }
     // 设置控制器的位置 以动画的方式移动控制器
-    async setLookAt({ position = this.camera.position, center = this.controls.target, duration = 1000 }) {
+    async setLookAt({ position = this.perspectiveCamera.position, center = this.controls.target, duration = 1000 }) {
         // 停止控制器的惯性
         this.controls.enableDamping = false;
         this.controls.saveState();
         this.controls.update();
         this.controls.reset();
         this.controls.enableDamping = true;
-        let currentPosition = this.camera.position.clone();
+        let currentPosition = this.perspectiveCamera.position.clone();
         let currentCenter = this.controls.target.clone();
         // 等待动画执行完成
         await Promise.all([
             new Promise(async (resolve, reject) => {
-                this.controlsDistance.setDuration(duration).reset({ distance: this.camera.position.distanceTo(this.controls.target) });
+                this.controlsDistance.setDuration(duration).reset({ distance: this.perspectiveCamera.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();
             }),
@@ -240,7 +277,8 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 获取控制的位置和朝向 保留3位小数
     getLookAt() {
-        const position = this.camera.position.toArray().map(v => round(v, 3));
+        //判断需要使用那个相机
+        const position = this.perspectiveCamera.position.toArray().map(v => round(v, 3));
         const center = this.controls.target.toArray().map(v => round(v, 3));
         return {
             center: new Vector3(...center),
@@ -250,7 +288,9 @@ export default class ThreeBase extends EventDispatcher {
     }
     // 三维向量转化成屏幕上的2维向量
     v3tov2(v3) {
-        v3.project(this.camera);
+        //判断需要使用那个相机
+        const camera = this.getCamera();
+        v3.project(camera);
         const v2 = new Vector2((v3.x + 1) * this.size.x * 0.5, (-v3.y + 1) * this.size.y * 0.5);
         return v2;
     }
@@ -304,6 +344,24 @@ export default class ThreeBase extends EventDispatcher {
             this.stopRender();
             return;
         }
+        //透视相机和正交相机参数的时时转换
+        if (this.cameraType === "perspectiveCamera") {
+            const { center } = this.getLookAt();
+            const { fov } = this.perspectiveCamera;
+            const distaned = this.perspectiveCamera.position.clone().sub(center).length();
+            const zoom = 1 / (Math.tan(degToRad(fov) / 2) * distaned);
+            this.orthographicCamera.zoom = zoom;
+            this.orthographicCamera.position.copy(this.perspectiveCamera.position.clone().sub(center)).setLength(250000).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);
+            this.perspectiveCamera.position.copy(this.orthographicCamera.position.clone().sub(center)).setLength(distaned).add(center);
+        }
+        //判断需要使用那个相机
+        const camera = this.getCamera();
         //判断尺寸发生改变时重置尺寸
         const parentNode = this.renderer.domElement.parentNode;
         if (parentNode.clientWidth !== this.size.x || parentNode.clientHeight !== this.size.y) {
@@ -326,17 +384,17 @@ export default class ThreeBase extends EventDispatcher {
             // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
             this.renderer.setRenderTarget(this.baseRenderTarget);
             this.renderer.clear();
-            this.renderer.render(this.scene, this.camera);
+            this.renderer.render(this.scene, camera);
             this.renderer.setRenderTarget(null);
         }
         // 清空主画布
         this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
+        this.renderer.render(this.scene, camera);
         if (has_stroke_or_pass) {
             // 查找需要绘制描边的对象,并且绘制描边
             this.scene.traverse(obj => {
-                stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-                glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+                stroke_pass(this.renderer, camera, obj, this.baseDepthTexture);
+                glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
             });
         }
         this.dispatchEvent({ type: "afterRender" });
@@ -365,7 +423,7 @@ export default class ThreeBase extends EventDispatcher {
             const originRenderTarget = this.renderer.getRenderTarget();
             this.renderer.setRenderTarget(this._preRT);
             this._preMesh.material.map = texture;
-            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.render(this._preMesh, this.perspectiveCamera);
             this.renderer.setRenderTarget(originRenderTarget);
         });
     }
@@ -376,7 +434,7 @@ export default class ThreeBase extends EventDispatcher {
             const originRenderTarget = this.renderer.getRenderTarget();
             this.renderer.setRenderTarget(this._preRT);
             this._preMesh.geometry = geometry;
-            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.render(this._preMesh, this.perspectiveCamera);
             this.renderer.setRenderTarget(originRenderTarget);
         });
     }
@@ -411,7 +469,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.setRenderTarget(rendererTarget);
         this.renderer.getSize(this.tempVector2);
         rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
-        this.renderer.render(obj, this.camera);
+        this.renderer.render(obj, this.getCamera());
         this.renderer.setRenderTarget(originTarget);
     }
     // 给渲染目标的内容加描边

package/ThreeBase.ts

@@ -5,18 +5,18 @@
  * @Last Modified time: 2024-01-20 05:33:28
  */
 
-import { round } from "lodash";
-import { AxesHelper, BufferGeometry, Camera, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { add, round } from "lodash";
+import { AxesHelper, BufferGeometry, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, MOUSE, Mesh, MeshBasicMaterial, NoBlending, NormalBlending, Object3D, OrthographicCamera, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Texture, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
-import { generateUUID } from "three/src/math/MathUtils";
+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 { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
+import FXAAShaderMaterial from "./shaders/FXAAShaderMaterial";
 import threeLoader from "./threeLoader";
-import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
-import Transition from "./Transition";
-import FXAAShaderMaterial from "./shaders/FXAAShaderMaterial";
 
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
@@ -85,17 +85,42 @@ export default class ThreeBase extends EventDispatcher {
     })();
 
     //透视相机
-    camera: Camera = new PerspectiveCamera(45, 1, 0.0001, 1000000);
+    perspectiveCamera = new PerspectiveCamera(45, 1, 0.0001, 1000000);
+    //正交相机
+    orthographicCamera = new OrthographicCamera(- 1, 1, 1, - 1, 0.0001, 1000000);
+
+    //相机的类型
+    cameraType: "perspectiveCamera" | "orthographicCamera" = "perspectiveCamera";
+    setCameraType(cameraType: "perspectiveCamera" | "orthographicCamera") {
+        if (this.cameraType !== cameraType) {
+            this.cameraType = cameraType;
+            if (this.cameraType === "perspectiveCamera") {
+                this.threeMouse._camera = this.perspectiveCamera;
+                this.controls.object = this.perspectiveCamera;
+            } else if (this.cameraType === "orthographicCamera") {
+                this.threeMouse._camera = this.orthographicCamera;
+                this.controls.object = this.orthographicCamera;
+            }
+        }
+    }
+    //获取当前使用的的相机
+    getCamera() {
+        //判断需要使用那个相机
+        const camera = ((this.cameraType === "perspectiveCamera") ?
+            this.perspectiveCamera :
+            this.orthographicCamera);
+        return camera;
+    }
 
     // 场景对象
     scene = new Scene();
 
     ///鼠标事件对象
-    threeMouse = new ThreeMouse(this.renderer, this.camera, this.scene);
+    threeMouse = new ThreeMouse(this.renderer, this.perspectiveCamera, this.scene);
 
     // 轨道控制器
     controls = (() => {
-        const controls = new OrbitControls(this.camera, this.renderer.domElement);
+        const controls = new OrbitControls(this.perspectiveCamera, this.renderer.domElement);
         controls.addEventListener("change", () => {
             this.needRender = true;
         });
@@ -127,10 +152,15 @@ export default class ThreeBase extends EventDispatcher {
 
     // 修改尺寸
     setSize(width: number, height: number) {
-        if ((this.camera as PerspectiveCamera).type == 'PerspectiveCamera') {
-            (this.camera as PerspectiveCamera).aspect = width / height;
-            (this.camera as PerspectiveCamera).updateProjectionMatrix();
-        }
+        //修改透视相机的比例
+        this.perspectiveCamera.aspect = width / height;
+        this.perspectiveCamera.updateProjectionMatrix();
+
+        //修改正交相机的比例
+        // this.orthographicCamera.top = height / width;
+        // this.orthographicCamera.bottom = -height / width;
+        this.orthographicCamera.left = -width / height;
+        this.orthographicCamera.right = width / height;
 
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
@@ -161,7 +191,8 @@ export default class ThreeBase extends EventDispatcher {
         controlsCenter.setDuration(1000);
         controlsCenter.onChange(({ x, y, z }) => {
             this.controls.target.set(x, y, z);
-            this.camera.lookAt(this.controls.target);
+            this.perspectiveCamera.lookAt(this.controls.target);
+            this.orthographicCamera.lookAt(this.controls.target);
             this.needRender = true;
         });
         return controlsCenter;
@@ -173,7 +204,7 @@ export default class ThreeBase extends EventDispatcher {
         controlsPosition.setDuration(1000);
         controlsPosition.onChange(({ x, y, z }) => {
             // const distance = this.controlsDistance.get("distance");
-            this.camera.position.set(x + 0.01, y, z + 0.01)
+            this.perspectiveCamera.position.set(x + 0.01, y, z + 0.01)
             // .sub(this.controls.target)
             // .setLength(distance)
             // .add(this.controls.target);
@@ -197,8 +228,16 @@ export default class ThreeBase extends EventDispatcher {
             // // 输出旋转后的方向向量
             // console.log(directionVecA);
 
+            this.perspectiveCamera.lookAt(this.controls.target);
+
+            //计算正交相机的缓动
+            this.orthographicCamera.position
+                .set(x + 0.01, y, z + 0.01)
+                .sub(this.controls.target)
+                .setLength(250000)
+                .add(this.controls.target)
+            this.orthographicCamera.lookAt(this.controls.target);
 
-            this.camera.lookAt(this.controls.target);
             this.needRender = true;
         });
         return controlsPosition;
@@ -231,7 +270,7 @@ export default class ThreeBase extends EventDispatcher {
             this.dispatchEvent({ type: "loadding" } as never);
             this.needRender = true;
         });
-        
+
         threeLoader.addEventListener("onLoad", () => {
             this.dispatchEvent({ type: "onLoad" } as never);
             this.needRender = true;
@@ -241,7 +280,7 @@ export default class ThreeBase extends EventDispatcher {
 
     // 重置控制器的位置
     resetLookAt({
-        position = this.camera.position,
+        position = this.perspectiveCamera.position,
         center = this.controls.target,
     }: { position: Vector3, center: Vector3 }) {
 
@@ -260,7 +299,7 @@ export default class ThreeBase extends EventDispatcher {
 
     // 设置控制器的位置 以动画的方式移动控制器
     async setLookAt({
-        position = this.camera.position,
+        position = this.perspectiveCamera.position,
         center = this.controls.target,
         duration = 1000
     }: { position: Vector3, center: Vector3, duration?: number }) {
@@ -272,13 +311,13 @@ export default class ThreeBase extends EventDispatcher {
         this.controls.reset();
         this.controls.enableDamping = true;
 
-        let currentPosition = this.camera.position.clone();
+        let currentPosition = this.perspectiveCamera.position.clone();
         let currentCenter = this.controls.target.clone();
 
         // 等待动画执行完成
         await Promise.all([
             new Promise<void>(async (resolve, reject) => {
-                this.controlsDistance.setDuration(duration).reset({ distance: this.camera.position.distanceTo(this.controls.target) });
+                this.controlsDistance.setDuration(duration).reset({ distance: this.perspectiveCamera.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();
             }),
@@ -298,7 +337,8 @@ export default class ThreeBase extends EventDispatcher {
 
     // 获取控制的位置和朝向 保留3位小数
     getLookAt() {
-        const position = this.camera.position.toArray().map(v => round(v, 3));
+        //判断需要使用那个相机
+        const position = this.perspectiveCamera.position.toArray().map(v => round(v, 3));
         const center = this.controls.target.toArray().map(v => round(v, 3));
         return {
             center: new Vector3(...center),
@@ -309,7 +349,9 @@ export default class ThreeBase extends EventDispatcher {
 
     // 三维向量转化成屏幕上的2维向量
     v3tov2(v3: Vector3) {
-        v3.project(this.camera);
+        //判断需要使用那个相机
+        const camera = this.getCamera();
+        v3.project(camera);
         const v2 = new Vector2((v3.x + 1) * this.size.x * 0.5, (-v3.y + 1) * this.size.y * 0.5);
         return v2;
     }
@@ -375,6 +417,25 @@ export default class ThreeBase extends EventDispatcher {
             return;
         }
 
+        //透视相机和正交相机参数的时时转换
+        if (this.cameraType === "perspectiveCamera") {
+            const { center } = this.getLookAt();
+            const { fov } = this.perspectiveCamera;
+            const distaned = this.perspectiveCamera.position.clone().sub(center).length();
+            const zoom = 1 / (Math.tan(degToRad(fov) / 2) * distaned);
+            this.orthographicCamera.zoom = zoom;
+            this.orthographicCamera.position.copy(this.perspectiveCamera.position.clone().sub(center)).setLength(250000).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);
+            this.perspectiveCamera.position.copy(this.orthographicCamera.position.clone().sub(center)).setLength(distaned).add(center);
+        }
+
+        //判断需要使用那个相机
+        const camera = this.getCamera();
+
         //判断尺寸发生改变时重置尺寸
         const parentNode = this.renderer.domElement.parentNode as HTMLDivElement;
         if (parentNode.clientWidth !== this.size.x || parentNode.clientHeight !== this.size.y) {
@@ -403,19 +464,19 @@ export default class ThreeBase extends EventDispatcher {
             // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
             this.renderer.setRenderTarget(this.baseRenderTarget);
             this.renderer.clear();
-            this.renderer.render(this.scene, this.camera);
+            this.renderer.render(this.scene, camera);
             this.renderer.setRenderTarget(null);
         }
 
         // 清空主画布
         this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
+        this.renderer.render(this.scene, camera);
 
         if (has_stroke_or_pass) {
             // 查找需要绘制描边的对象,并且绘制描边
             this.scene.traverse(obj => {
-                stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-                glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+                stroke_pass(this.renderer, camera, obj, this.baseDepthTexture);
+                glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
             });
         }
 
@@ -450,7 +511,7 @@ export default class ThreeBase extends EventDispatcher {
             const originRenderTarget = this.renderer.getRenderTarget();
             this.renderer.setRenderTarget(this._preRT);
             (this._preMesh.material as MeshBasicMaterial).map = texture;
-            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.render(this._preMesh, this.perspectiveCamera);
             this.renderer.setRenderTarget(originRenderTarget);
         });
     }
@@ -463,7 +524,7 @@ export default class ThreeBase extends EventDispatcher {
             const originRenderTarget = this.renderer.getRenderTarget();
             this.renderer.setRenderTarget(this._preRT);
             this._preMesh.geometry = geometry;
-            this.renderer.render(this._preMesh, this.camera);
+            this.renderer.render(this._preMesh, this.perspectiveCamera);
             this.renderer.setRenderTarget(originRenderTarget);
         });
     }
@@ -501,7 +562,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.setRenderTarget(rendererTarget);
         this.renderer.getSize(this.tempVector2);
         rendererTarget.setSize(this.tempVector2.x, this.tempVector2.y);
-        this.renderer.render(obj, this.camera);
+        this.renderer.render(obj, this.getCamera());
         this.renderer.setRenderTarget(originTarget);
     }
 

package/package.json

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