Release 0.11.0 (#2)

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+coverage
 
 node_modules
 dist

CHANGELOG.md

@@ -1,6 +1,11 @@
 Changelog
 =========
 
+0.11.0
+---
+* Add blur env map
+* Use new threedgizmo 0.6.0
+
 0.10.0
 ---
 * Make light optional

jest.config.js

@@ -12,6 +12,10 @@ export default {
       useESM: true,
     }],
   },
+  collectCoverage: true,
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
+  coverageDirectory: 'coverage',
+  coverageReporters: ['json', 'lcov', 'clover'],
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   testMatch: ['**/__tests__/**/*.ts?(x)', '**/?(*.)+(spec|test).ts?(x)'],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "threedviewer",
   "private": false,
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "A 3D viewer based on React and Three.js",
   "keywords": [
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "three-gpu-pathtracer": "^0.0.23",
-    "threedgizmo": "^0.2.1"
+    "threedgizmo": "^0.6.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",

src/ThreeSceneSetup/setupScene/EnvironmentMapManager.ts

@@ -0,0 +1,84 @@
+import * as THREE from 'three';
+import { PathTracingManager } from './PathTracingManager';
+import { importRaytracer } from '../importRaytracer';
+
+interface EnvironmentMapManagerParams {
+  renderer: THREE.WebGLRenderer;
+  scene: THREE.Scene;
+  camera: THREE.Camera;
+  envMapUrl?: string;
+  usePathTracing: boolean;
+  pathTracingManager: PathTracingManager | null;
+  backgroundBlurriness?: number; // 0.0 to 1.0
+  blurStrengthPathTracing?: number; // For BlurredEnvMapGenerator if path tracing is enabled
+}
+
+export class EnvironmentMapManager {
+  private renderer: THREE.WebGLRenderer;
+  private scene: THREE.Scene;
+  private camera: THREE.Camera;
+  private envMapUrl?: string;
+  private usePathTracing: boolean;
+  private pathTracingManager: PathTracingManager | null;
+  private backgroundBlurriness: number;
+  private blurStrengthPathTracing: number;
+
+  constructor(params: EnvironmentMapManagerParams) {
+    this.renderer = params.renderer;
+    this.scene = params.scene;
+    this.camera = params.camera;
+    this.envMapUrl = params.envMapUrl;
+    this.usePathTracing = params.usePathTracing;
+    this.pathTracingManager = params.pathTracingManager ?? null;
+    this.backgroundBlurriness = params.backgroundBlurriness ?? 0.4;
+    this.blurStrengthPathTracing = params.blurStrengthPathTracing ?? 0.4;
+  }
+
+  public load() {
+    if (!this.envMapUrl) return;
+
+    const loader = new THREE.TextureLoader();
+    loader.load(
+      this.envMapUrl,
+      (texture) => {
+        texture.mapping = THREE.EquirectangularReflectionMapping;
+
+        // Use PMREMGenerator for proper lighting environment
+        const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
+        pmremGenerator.compileEquirectangularShader();
+        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
+        pmremGenerator.dispose();
+        // Don't dispose original texture yet if we need it for blurred env map
+
+        // Assign environment map
+        this.scene.environment = envMap;
+        this.scene.background = envMap;
+
+        // Use backgroundBlurriness if supported (Three.js r153+)
+        this.scene.backgroundBlurriness = this.backgroundBlurriness;
+
+        // If using path tracing, generate a blurred environment map
+        if (this.usePathTracing && this.pathTracingManager) {
+          const { BlurredEnvMapGenerator } = importRaytracer();
+          const envMapGenerator = new BlurredEnvMapGenerator(this.renderer);
+
+          const blurredEnvMap = envMapGenerator.generate(texture, this.blurStrengthPathTracing);
+          this.scene.environment = blurredEnvMap;
+          this.scene.background = blurredEnvMap;
+
+          // Update the environment in the Path Tracer
+          this.pathTracingManager.ptRenderer.updateEnvironment();
+          texture.dispose();
+        } else {
+          // Render once to show the updated background (if no path tracing)
+          this.renderer.render(this.scene, this.camera);
+          texture.dispose();
+        }
+      },
+      undefined,
+      (error) => {
+        console.error('Error loading environment map:', error);
+      }
+    );
+  }
+}

src/ThreeSceneSetup/setupScene/SceneManager.ts

@@ -8,6 +8,7 @@ import { SceneInitializer } from '../SceneInitializer';
 import { PathTracingManager } from './PathTracingManager';
 import { AnimationManager } from './AnimationManager';
 import { THREEBase } from '../types';
+import { EnvironmentMapManager } from './EnvironmentMapManager';
 
 export class SceneManager {
   private mountRef;
@@ -22,6 +23,7 @@ export class SceneManager {
   private sceneInitializer: SceneInitializer;
   public readonly pathTracingManager: PathTracingManager | null;
   private animationManager: AnimationManager;
+  private environmentMapManager: EnvironmentMapManager | null = null;
 
   constructor(
     threeBase: THREEBase,
@@ -58,10 +60,6 @@ export class SceneManager {
     this.cameraRef.current = this.cameraManager.camera;
     this.sceneRef.current = this.sceneInitializer.scene;
 
-    this.loadEnvironmentMap();
-
-    this.mountRef.current.appendChild(this.rendererManager.renderer.domElement);
-
     if (this.options.usePathTracing) {
       this.pathTracingManager = new PathTracingManager(
         this.rendererManager.renderer,
@@ -74,6 +72,23 @@ export class SceneManager {
       this.pathTracingManager = null;
     }
 
+    // Initialize EnvironmentMapManager
+    this.environmentMapManager = new EnvironmentMapManager({
+      renderer: this.rendererManager.renderer,
+      scene: this.sceneInitializer.scene,
+      camera: this.cameraManager.camera,
+      envMapUrl: this.options.envMapUrl,
+      usePathTracing: this.options.usePathTracing,
+      pathTracingManager: this.pathTracingManager,
+      backgroundBlurriness: 0.4,
+      blurStrengthPathTracing: 0.4
+    });
+
+    // Load the environment map via the EnvironmentMapManager
+    this.environmentMapManager.load();
+
+    this.mountRef.current.appendChild(this.rendererManager.renderer.domElement);
+
     this.animationManager = new AnimationManager(
       this.rendererManager.renderer,
       this.sceneInitializer.scene,
@@ -102,42 +117,6 @@ export class SceneManager {
     }
   }
 
-  private loadEnvironmentMap() {
-    const envMapUrl = this.options.envMapUrl;
-    if (envMapUrl) {
-      const loader = new THREE.TextureLoader();
-      loader.load(
-        envMapUrl,
-        (texture) => {
-          texture.mapping = THREE.EquirectangularReflectionMapping;
-
-          // If Path Tracing is enabled, use BlurredEnvMapGenerator
-          if (this.options.usePathTracing && this.pathTracingManager) {
-            const { BlurredEnvMapGenerator } = importRaytracer();
-            const envMapGenerator = new BlurredEnvMapGenerator(this.rendererRef.current!);
-
-            // Generate a blurred environment map
-            const blurredEnvMap = envMapGenerator.generate(texture, 0.2); // The higher the value, the stronger the blur
-            this.sceneRef.current!.environment = blurredEnvMap;
-            this.sceneRef.current!.background = blurredEnvMap;
-            // Update the environment in the Path Tracer
-            this.pathTracingManager.ptRenderer.updateEnvironment();
-          } else {
-            // If Path Tracing is not enabled, simply use the standard environment map
-            this.sceneRef.current!.environment = texture;
-            this.sceneRef.current!.background = texture;
-            // Forcefully update the render
-            this.rendererRef.current!.render(this.sceneRef.current!, this.cameraRef.current!);
-          }
-        },
-        undefined,
-        (error) => {
-          console.error('Error loading environment map:', error);
-        }
-      );
-    }
-  }
-
   public getSceneElements() {
     return {
       scene: this.sceneInitializer.scene,