three-base 2.0.21 → 2.0.22

package/ThreeBase.js

@@ -5,16 +5,16 @@
  * @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, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NoColorSpace, 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 glow_pass from "./pass/glow_pass";
+import stroke_pass from "./pass/stroke_pass";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
 import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
-import stroke_pass from "./pass/stroke_pass";
-import glow_pass from "./pass/glow_pass";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -64,6 +64,7 @@ export default class ThreeBase extends EventDispatcher {
         });
         renderer.domElement.id = generateUUID();
         renderer.localClippingEnabled = true;
+        renderer.outputColorSpace = NoColorSpace;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
@@ -95,9 +96,6 @@ export default class ThreeBase extends EventDispatcher {
             div.style.overflow = "hidden";
             div.innerHTML = "";
             div.append(this.renderer.domElement);
-            // this.renderer.forceContextLoss();
-            // await new Promise(resolve => requestAnimationFrame(resolve));
-            // await new Promise(resolve => requestAnimationFrame(resolve));
             this.renderer.forceContextRestore();
             this.renderer.domElement.style.opacity = "1";
             this.setSize(div.clientWidth, div.clientHeight);
@@ -114,7 +112,11 @@ export default class ThreeBase extends EventDispatcher {
         }
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
+        // 设置帧缓存区的尺寸
         this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
+        // 设置深度纹理的尺寸
+        this.baseDepthTexture.image.width = width * window.devicePixelRatio;
+        this.baseDepthTexture.image.height = height * window.devicePixelRatio;
         this.size.set(width, height);
         // 渲染场景
         // this.renderer.clear();
@@ -142,11 +144,11 @@ export default class ThreeBase extends EventDispatcher {
         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 + 0.01, y, z + 0.01)
-                .sub(this.controls.target)
-                .setLength(distance)
-                .add(this.controls.target);
+            // const distance = this.controlsDistance.get("distance");
+            this.camera.position.set(x + 0.01, y, z + 0.01);
+            // .sub(this.controls.target)
+            // .setLength(distance)
+            // .add(this.controls.target);
             // // 创建初始方向向量
             // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
             // const referenceVecB = new THREE.Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
@@ -303,14 +305,15 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        // this.renderer.setRenderTarget(this.baseRenderTarget);
+        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+        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.setRenderTarget(null);
+        this.renderer.clear();
         // this.renderer.setScissorTest(false);
-        // this.renderRendererTarget(this.baseRenderTarget);
+        this.renderRendererTarget(this.baseRenderTarget);
         // this.renderer.setScissorTest(true);
         // this.renderer.setScissor(0, 0, 800, 1000);
         // this.renderer.render(this.scene, this.camera);
@@ -442,7 +445,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderTargetgaussBlur(renderTarget, 1, 1);
         this.renderTargetgaussBlur(renderTarget, 1, 1);
     }
-    // 渲染 渲染目标
+    // TODO 需要做康锯齿处理 渲染 渲染目标
     renderRendererTarget(renderTarget, alpha = false) {
         coptyShader.uniforms.map.value = renderTarget.texture;
         coptyShader.uniforms.opacity.value = 1.0;

package/ThreeBase.ts

@@ -6,16 +6,16 @@
  */
 
 import { round } from "lodash";
-import { AxesHelper, BufferGeometry, Camera, DepthFormat, DepthTexture, DisplayP3ColorSpace, EventDispatcher, GridHelper, LinearEncoding, LinearFilter, LinearSRGBColorSpace, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NoColorSpace, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace, sRGBEncoding, Texture, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, BufferGeometry, Camera, DepthFormat, DepthTexture, DisplayP3ColorSpace, EventDispatcher, GridHelper, LinearDisplayP3ColorSpace, LinearFilter, LinearSRGBColorSpace, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NoColorSpace, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace, Texture, 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 glow_pass from "./pass/glow_pass";
+import stroke_pass from "./pass/stroke_pass";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
 import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
-import stroke_pass from "./pass/stroke_pass";
-import glow_pass from "./pass/glow_pass";
 
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
@@ -76,6 +76,7 @@ export default class ThreeBase extends EventDispatcher {
 
         renderer.domElement.id = generateUUID();
         renderer.localClippingEnabled = true;
+        renderer.outputColorSpace = NoColorSpace;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
@@ -113,9 +114,6 @@ export default class ThreeBase extends EventDispatcher {
             div.innerHTML = "";
             div.append(this.renderer.domElement);
 
-            // this.renderer.forceContextLoss();
-            // await new Promise(resolve => requestAnimationFrame(resolve));
-            // await new Promise(resolve => requestAnimationFrame(resolve));
             this.renderer.forceContextRestore();
             this.renderer.domElement.style.opacity = "1";
 
@@ -137,8 +135,13 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
 
+        // 设置帧缓存区的尺寸
         this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
 
+        // 设置深度纹理的尺寸
+        this.baseDepthTexture.image.width = width * window.devicePixelRatio;
+        this.baseDepthTexture.image.height = height * window.devicePixelRatio;
+
         this.size.set(width, height);
         // 渲染场景
         // this.renderer.clear();
@@ -169,11 +172,11 @@ export default class ThreeBase extends EventDispatcher {
         const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
         controlsPosition.setDuration(1000);
         controlsPosition.onChange(({ x, y, z }) => {
-            const distance = this.controlsDistance.get("distance");
+            // const distance = this.controlsDistance.get("distance");
             this.camera.position.set(x + 0.01, y, z + 0.01)
-                .sub(this.controls.target)
-                .setLength(distance)
-                .add(this.controls.target);
+                // .sub(this.controls.target)
+                // .setLength(distance)
+                // .add(this.controls.target);
 
             // // 创建初始方向向量
             // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
@@ -375,16 +378,17 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" } as never);
 
-        // this.renderer.setRenderTarget(this.baseRenderTarget);
+        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+        this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
 
-        // this.renderer.setRenderTarget(null);
-        // this.renderer.clear();
+        // 清空主画布
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
 
-        //TODO 渲染了2次, 还有优化空间
         // this.renderer.setScissorTest(false);
-        // this.renderRendererTarget(this.baseRenderTarget);
+        this.renderRendererTarget(this.baseRenderTarget);
         // this.renderer.setScissorTest(true);
         // this.renderer.setScissor(0, 0, 800, 1000);
         // this.renderer.render(this.scene, this.camera);
@@ -542,7 +546,7 @@ export default class ThreeBase extends EventDispatcher {
         this.renderTargetgaussBlur(renderTarget, 1, 1);
     }
 
-    // 渲染 渲染目标
+    // TODO 需要做康锯齿处理 渲染 渲染目标
     renderRendererTarget(renderTarget: WebGLRenderTarget, alpha: boolean = false) {
         coptyShader.uniforms.map.value = renderTarget.texture;
         coptyShader.uniforms.opacity.value = 1.0;

package/package.json

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