@chocozhang/three-model-render 1.0.3 → 1.0.4

package/dist/core/index.d.ts

@@ -2,6 +2,17 @@ import * as THREE from 'three';
 import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
 
+/**
+ * @file labelManager.ts
+ * @description
+ * Manages HTML labels attached to 3D objects. Efficiently updates label positions based on camera movement.
+ *
+ * @best-practice
+ * - Use `addChildModelLabels` to label parts of a loaded model.
+ * - Labels are HTML elements overlaid on the canvas.
+ * - Supports performance optimization via caching and visibility culling.
+ */
+
 interface LabelOptions {
     fontSize?: string;
     color?: string;
@@ -18,23 +29,34 @@ interface LabelManager {
     isRunning: () => boolean;
 }
 /**
- * 给子模型添加头顶标签（支持 Mesh 和 Group）- 优化版
+ * Add overhead labels to child models (supports Mesh and Group)
  *
- * ✨ 性能优化：
- * - 缓存包围盒，避免每帧重复计算
- * - 支持暂停/恢复更新
- * - 可配置更新间隔，降低 CPU 占用
- * - 只在可见时更新，隐藏时自动暂停
+ * Features:
+ * - Caches bounding boxes to avoid repetitive calculation every frame
+ * - Supports pause/resume
+ * - Configurable update interval to reduce CPU usage
+ * - Automatically pauses when hidden
  *
- * @param camera THREE.Camera - 场景摄像机
- * @param renderer THREE.WebGLRenderer - 渲染器，用于屏幕尺寸
- * @param parentModel THREE.Object3D - FBX 根节点或 Group
- * @param modelLabelsMap Record<string,string> - 模型 name → 标签文字 映射表
- * @param options LabelOptions - 可选标签样式配置
- * @returns LabelManager - 包含 pause/resume/dispose 的管理接口
+ * @param camera THREE.Camera - Scene camera
+ * @param renderer THREE.WebGLRenderer - Renderer, used for screen size
+ * @param parentModel THREE.Object3D - FBX root node or Group
+ * @param modelLabelsMap Record<string,string> - Map of model name to label text
+ * @param options LabelOptions - Optional label style configuration
+ * @returns LabelManager - Management interface containing pause/resume/dispose
  */
 declare function addChildModelLabels(camera: THREE.Camera, renderer: THREE.WebGLRenderer, parentModel: THREE.Object3D, modelLabelsMap: Record<string, string>, options?: LabelOptions): LabelManager;
 
+/**
+ * @file hoverEffect.ts
+ * @description
+ * Singleton highlight effect manager. Uses OutlinePass to create a breathing highlight effect on hovered objects.
+ *
+ * @best-practice
+ * - Initialize once in your setup/mounted hook.
+ * - Call `updateHighlightNames` to filter which objects are interactive.
+ * - Automatically handles mousemove throttling and cleanup on dispose.
+ */
+
 type HoverBreathOptions = {
     camera: THREE.Camera;
     scene: THREE.Scene;
@@ -47,13 +69,13 @@ type HoverBreathOptions = {
     throttleDelay?: number;
 };
 /**
- * 创建单例高亮器 —— 推荐在 mounted 时创建一次
- * 返回 { updateHighlightNames, dispose, getHoveredName } 接口
+ * Create a singleton highlighter - Recommended to create once on mount
+ * Returns { updateHighlightNames, dispose, getHoveredName } interface
  *
- * ✨ 性能优化：
- * - 无 hover 对象时自动暂停动画
- * - mousemove 节流处理，避免过度计算
- * - 使用 passive 事件监听器提升滚动性能
+ * Features:
+ * - Automatically pauses animation when no object is hovered
+ * - Throttles mousemove events to avoid excessive calculation
+ * - Uses passive event listeners to improve scrolling performance
  */
 declare function enableHoverBreath(opts: HoverBreathOptions): {
     updateHighlightNames: (names: string[] | null) => void;
@@ -63,7 +85,18 @@ declare function enableHoverBreath(opts: HoverBreathOptions): {
 };
 
 /**
- * 后期处理配置选项
+ * @file postProcessing.ts
+ * @description
+ * Manages the post-processing chain, specifically for Outline effects and Gamma correction.
+ *
+ * @best-practice
+ * - call `initPostProcessing` after creating your renderer and scene.
+ * - Use the returned `composer` in your render loop instead of `renderer.render`.
+ * - Handles resizing automatically via the `resize` method.
+ */
+
+/**
+ * Post-processing configuration options
  */
 interface PostProcessingOptions {
     edgeStrength?: number;
@@ -74,7 +107,7 @@ interface PostProcessingOptions {
     resolutionScale?: number;
 }
 /**
- * 后期处理管理接口
+ * Post-processing management interface
  */
 interface PostProcessingManager {
     composer: EffectComposer;
@@ -83,18 +116,18 @@ interface PostProcessingManager {
     dispose: () => void;
 }
 /**
- * 初始化描边相关信息（包含 OutlinePass）- 优化版
+ * Initialize outline-related information (contains OutlinePass)
  *
- * ✨ 功能增强：
- * - 支持窗口 resize 自动更新
- * - 可配置分辨率缩放提升性能
- * - 完善的资源释放管理
+ * Capabilities:
+ * - Supports automatic update on window resize
+ * - Configurable resolution scale for performance improvement
+ * - Comprehensive resource disposal management
  *
  * @param renderer THREE.WebGLRenderer
  * @param scene THREE.Scene
  * @param camera THREE.Camera
- * @param options PostProcessingOptions - 可选配置
- * @returns PostProcessingManager - 包含 composer/outlinePass/resize/dispose 的管理接口
+ * @param options PostProcessingOptions - Optional configuration
+ * @returns PostProcessingManager - Management interface containing composer/outlinePass/resize/dispose
  */
 declare function initPostProcessing(renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, options?: PostProcessingOptions): PostProcessingManager;
 

package/dist/core/index.js

@@ -27,25 +27,35 @@ function _interopNamespaceDefault(e) {
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
 /**
- * 给子模型添加头顶标签（支持 Mesh 和 Group）- 优化版
+ * @file labelManager.ts
+ * @description
+ * Manages HTML labels attached to 3D objects. Efficiently updates label positions based on camera movement.
  *
- * ✨ 性能优化：
- * - 缓存包围盒，避免每帧重复计算
- * - 支持暂停/恢复更新
- * - 可配置更新间隔，降低 CPU 占用
- * - 只在可见时更新，隐藏时自动暂停
+ * @best-practice
+ * - Use `addChildModelLabels` to label parts of a loaded model.
+ * - Labels are HTML elements overlaid on the canvas.
+ * - Supports performance optimization via caching and visibility culling.
+ */
+/**
+ * Add overhead labels to child models (supports Mesh and Group)
+ *
+ * Features:
+ * - Caches bounding boxes to avoid repetitive calculation every frame
+ * - Supports pause/resume
+ * - Configurable update interval to reduce CPU usage
+ * - Automatically pauses when hidden
  *
- * @param camera THREE.Camera - 场景摄像机
- * @param renderer THREE.WebGLRenderer - 渲染器，用于屏幕尺寸
- * @param parentModel THREE.Object3D - FBX 根节点或 Group
- * @param modelLabelsMap Record<string,string> - 模型 name → 标签文字 映射表
- * @param options LabelOptions - 可选标签样式配置
- * @returns LabelManager - 包含 pause/resume/dispose 的管理接口
+ * @param camera THREE.Camera - Scene camera
+ * @param renderer THREE.WebGLRenderer - Renderer, used for screen size
+ * @param parentModel THREE.Object3D - FBX root node or Group
+ * @param modelLabelsMap Record<string,string> - Map of model name to label text
+ * @param options LabelOptions - Optional label style configuration
+ * @returns LabelManager - Management interface containing pause/resume/dispose
  */
 function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, options) {
-    // 防御性检查：确保 parentModel 已加载
+    // Defensive check: ensure parentModel is loaded
     if (!parentModel || typeof parentModel.traverse !== 'function') {
-        console.error('parentModel 无效，请确保 FBX 模型已加载完成');
+        console.error('parentModel invalid, please ensure the FBX model is loaded');
         return {
             pause: () => { },
             resume: () => { },
@@ -53,48 +63,48 @@ function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, opti
             isRunning: () => false
         };
     }
-    // 配置项
+    // Configuration
     const enableCache = (options === null || options === void 0 ? void 0 : options.enableCache) !== false;
     const updateInterval = (options === null || options === void 0 ? void 0 : options.updateInterval) || 0;
-    // 创建标签容器，绝对定位，放在 body 中
+    // Create label container, absolute positioning, attached to body
     const container = document.createElement('div');
     container.style.position = 'absolute';
     container.style.top = '0';
     container.style.left = '0';
-    container.style.pointerEvents = 'none'; // 避免阻挡鼠标事件
+    container.style.pointerEvents = 'none'; // Avoid blocking mouse events
     container.style.zIndex = '1000';
     document.body.appendChild(container);
     const labels = [];
-    // 状态管理
+    // State management
     let rafId = null;
     let isPaused = false;
     let lastUpdateTime = 0;
-    // 遍历所有子模型
+    // Traverse all child models
     parentModel.traverse((child) => {
         var _a;
-        // 只处理 Mesh 或 Group
+        // Only process Mesh or Group
         if ((child.isMesh || child.type === 'Group')) {
-            // 动态匹配 name，防止 undefined
+            // Dynamic matching of name to prevent undefined
             const labelText = (_a = Object.entries(modelLabelsMap).find(([key]) => child.name.includes(key))) === null || _a === void 0 ? void 0 : _a[1];
             if (!labelText)
-                return; // 没有匹配标签则跳过
-            // 创建 DOM 标签
+                return; // Skip if no matching label
+            // Create DOM label
             const el = document.createElement('div');
             el.innerText = labelText;
-            // 样式直接在 JS 中定义，可通过 options 覆盖
+            // Styles defined in JS, can be overridden via options
             el.style.position = 'absolute';
             el.style.color = (options === null || options === void 0 ? void 0 : options.color) || '#fff';
             el.style.background = (options === null || options === void 0 ? void 0 : options.background) || 'rgba(0,0,0,0.6)';
             el.style.padding = (options === null || options === void 0 ? void 0 : options.padding) || '4px 8px';
             el.style.borderRadius = (options === null || options === void 0 ? void 0 : options.borderRadius) || '4px';
             el.style.fontSize = (options === null || options === void 0 ? void 0 : options.fontSize) || '14px';
-            el.style.transform = 'translate(-50%, -100%)'; // 让标签在模型正上方
+            el.style.transform = 'translate(-50%, -100%)'; // Position label directly above the model
             el.style.whiteSpace = 'nowrap';
             el.style.pointerEvents = 'none';
             el.style.transition = 'opacity 0.2s ease';
-            // 加入容器
+            // Append to container
             container.appendChild(el);
-            // 初始化缓存
+            // Initialize cache
             const cachedBox = new THREE__namespace.Box3().setFromObject(child);
             const center = new THREE__namespace.Vector3();
             cachedBox.getCenter(center);
@@ -109,7 +119,7 @@ function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, opti
         }
     });
     /**
-     * 更新缓存的包围盒（仅在模型变换时调用）
+     * Update cached bounding box (called only when model transforms)
      */
     const updateCache = (labelData) => {
         labelData.cachedBox.setFromObject(labelData.object);
@@ -119,18 +129,18 @@ function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, opti
         labelData.needsUpdate = false;
     };
     /**
-     * 获取对象顶部世界坐标（使用缓存）
+     * Get object top world coordinates (using cache)
      */
     const getObjectTopPosition = (labelData) => {
         if (enableCache) {
-            // 检查对象是否发生变换
+            // Check if object has transformed
             if (labelData.needsUpdate || labelData.object.matrixWorldNeedsUpdate) {
                 updateCache(labelData);
             }
             return labelData.cachedTopPos;
         }
         else {
-            // 不使用缓存，每次都重新计算
+            // Do not use cache, recalculate every time
             const box = new THREE__namespace.Box3().setFromObject(labelData.object);
             const center = new THREE__namespace.Vector3();
             box.getCenter(center);
@@ -138,15 +148,15 @@ function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, opti
         }
     };
     /**
-     * 更新标签位置函数
+     * Update label positions function
      */
     function updateLabels(timestamp = 0) {
-        // 检查是否暂停
+        // Check pause state
         if (isPaused) {
             rafId = null;
             return;
         }
-        // 检查更新间隔
+        // Check update interval
         if (updateInterval > 0 && timestamp - lastUpdateTime < updateInterval) {
             rafId = requestAnimationFrame(updateLabels);
             return;
@@ -156,22 +166,22 @@ function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, opti
         const height = renderer.domElement.clientHeight;
         labels.forEach((labelData) => {
             const { el } = labelData;
-            const pos = getObjectTopPosition(labelData); // 使用缓存的顶部坐标
-            pos.project(camera); // 转到屏幕坐标
-            const x = (pos.x * 0.5 + 0.5) * width; // 屏幕 X
-            const y = (-(pos.y * 0.5) + 0.5) * height; // 屏幕 Y
-            // 控制标签显示/隐藏（摄像机后方隐藏）
+            const pos = getObjectTopPosition(labelData); // Use cached top position
+            pos.project(camera); // Convert to screen coordinates
+            const x = (pos.x * 0.5 + 0.5) * width; // Screen X
+            const y = (-(pos.y * 0.5) + 0.5) * height; // Screen Y
+            // Control label visibility (hidden when behind camera)
             const isVisible = pos.z < 1;
             el.style.opacity = isVisible ? '1' : '0';
             el.style.display = isVisible ? 'block' : 'none';
-            el.style.transform = `translate(-50%, -100%) translate(${x}px, ${y}px)`; // 屏幕位置
+            el.style.transform = `translate(-50%, -100%) translate(${x}px, ${y}px)`; // Screen position
         });
-        rafId = requestAnimationFrame(updateLabels); // 循环更新
+        rafId = requestAnimationFrame(updateLabels); // Loop update
     }
-    // 启动更新
+    // Start update
     updateLabels();
     /**
-     * 暂停更新
+     * Pause updates
      */
     const pause = () => {
         isPaused = true;
@@ -181,7 +191,7 @@ function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, opti
         }
     };
     /**
-     * 恢复更新
+     * Resume updates
      */
     const resume = () => {
         if (!isPaused)
@@ -190,11 +200,11 @@ function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, opti
         updateLabels();
     };
     /**
-     * 检查是否正在运行
+     * Check if running
      */
     const isRunning = () => !isPaused;
     /**
-     * 清理函数：卸载所有 DOM 标签，取消动画，避免内存泄漏
+     * Cleanup function: Remove all DOM labels, cancel animation, avoid memory leaks
      */
     const dispose = () => {
         pause();
@@ -216,36 +226,45 @@ function addChildModelLabels(camera, renderer, parentModel, modelLabelsMap, opti
     };
 }
 
-// src/utils/hoverBreathEffectByNameSingleton.ts
 /**
- * 创建单例高亮器 —— 推荐在 mounted 时创建一次
- * 返回 { updateHighlightNames, dispose, getHoveredName } 接口
+ * @file hoverEffect.ts
+ * @description
+ * Singleton highlight effect manager. Uses OutlinePass to create a breathing highlight effect on hovered objects.
  *
- * ✨ 性能优化：
- * - 无 hover 对象时自动暂停动画
- * - mousemove 节流处理，避免过度计算
- * - 使用 passive 事件监听器提升滚动性能
+ * @best-practice
+ * - Initialize once in your setup/mounted hook.
+ * - Call `updateHighlightNames` to filter which objects are interactive.
+ * - Automatically handles mousemove throttling and cleanup on dispose.
+ */
+/**
+ * Create a singleton highlighter - Recommended to create once on mount
+ * Returns { updateHighlightNames, dispose, getHoveredName } interface
+ *
+ * Features:
+ * - Automatically pauses animation when no object is hovered
+ * - Throttles mousemove events to avoid excessive calculation
+ * - Uses passive event listeners to improve scrolling performance
  */
 function enableHoverBreath(opts) {
-    const { camera, scene, renderer, outlinePass, highlightNames = null, minStrength = 2, maxStrength = 5, speed = 4, throttleDelay = 16, // 默认约 60fps
+    const { camera, scene, renderer, outlinePass, highlightNames = null, minStrength = 2, maxStrength = 5, speed = 4, throttleDelay = 16, // Default ~60fps
      } = opts;
     const raycaster = new THREE__namespace.Raycaster();
     const mouse = new THREE__namespace.Vector2();
     let hovered = null;
     let time = 0;
     let animationId = null;
-    // highlightSet: null 表示 all; empty Set 表示 none
+    // highlightSet: null means all; empty Set means none
     let highlightSet = highlightNames === null ? null : new Set(highlightNames);
-    // 节流相关
+    // Throttling related
     let lastMoveTime = 0;
     let rafPending = false;
     function setHighlightNames(names) {
         highlightSet = names === null ? null : new Set(names);
-        // 如果当前 hovered 不在新名单中，及时清理 selection
+        // If current hovered object is not in the new list, clean up selection immediately
         if (hovered && highlightSet && !highlightSet.has(hovered.name)) {
             hovered = null;
             outlinePass.selectedObjects = [];
-            // 暂停动画
+            // Pause animation
             if (animationId !== null) {
                 cancelAnimationFrame(animationId);
                 animationId = null;
@@ -253,13 +272,13 @@ function enableHoverBreath(opts) {
         }
     }
     /**
-     * 节流版本的 mousemove 处理
+     * Throttled mousemove handler
      */
     function onMouseMove(ev) {
         const now = performance.now();
-        // 节流：如果距上次处理时间小于阈值，跳过
+        // Throttle: if time since last process is less than threshold, skip
         if (now - lastMoveTime < throttleDelay) {
-            // 使用 RAF 延迟处理，避免丢失最后一次事件
+            // Use RAF to process the latest event later, ensuring the last event isn't lost
             if (!rafPending) {
                 rafPending = true;
                 requestAnimationFrame(() => {
@@ -273,24 +292,24 @@ function enableHoverBreath(opts) {
         processMouseMove(ev);
     }
     /**
-     * 实际的 mousemove 逻辑
+     * Actual mousemove logic
      */
     function processMouseMove(ev) {
         const rect = renderer.domElement.getBoundingClientRect();
         mouse.x = ((ev.clientX - rect.left) / rect.width) * 2 - 1;
         mouse.y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
         raycaster.setFromCamera(mouse, camera);
-        // 深度检测 scene 的所有子对象（true）
+        // Deep detect all children of the scene (true)
         const intersects = raycaster.intersectObjects(scene.children, true);
         if (intersects.length > 0) {
             const obj = intersects[0].object;
-            // 判断是否允许被高亮
+            // Determine if it is allowed to be highlighted
             const allowed = highlightSet === null ? true : highlightSet.has(obj.name);
             if (allowed) {
                 if (hovered !== obj) {
                     hovered = obj;
                     outlinePass.selectedObjects = [obj];
-                    // 启动动画（如果未运行）
+                    // Start animation (if not running)
                     if (animationId === null) {
                         animate();
                     }
@@ -300,7 +319,7 @@ function enableHoverBreath(opts) {
                 if (hovered !== null) {
                     hovered = null;
                     outlinePass.selectedObjects = [];
-                    // 停止动画
+                    // Stop animation
                     if (animationId !== null) {
                         cancelAnimationFrame(animationId);
                         animationId = null;
@@ -312,7 +331,7 @@ function enableHoverBreath(opts) {
             if (hovered !== null) {
                 hovered = null;
                 outlinePass.selectedObjects = [];
-                // 停止动画
+                // Stop animation
                 if (animationId !== null) {
                     cancelAnimationFrame(animationId);
                     animationId = null;
@@ -321,10 +340,10 @@ function enableHoverBreath(opts) {
         }
     }
     /**
-     * 动画循环 - 只在有 hovered 对象时运行
+     * Animation loop - only runs when there is a hovered object
      */
     function animate() {
-        // 如果没有 hovered 对象，停止动画
+        // If no hovered object, stop animation
         if (!hovered) {
             animationId = null;
             return;
@@ -334,11 +353,11 @@ function enableHoverBreath(opts) {
         const strength = minStrength + ((Math.sin(time) + 1) / 2) * (maxStrength - minStrength);
         outlinePass.edgeStrength = strength;
     }
-    // 启动（只调用一次）
-    // 使用 passive 提升滚动性能
+    // Start (called only once)
+    // Use passive to improve scrolling performance
     renderer.domElement.addEventListener('mousemove', onMouseMove, { passive: true });
-    // 注意：不在这里启动 animate，等有 hover 对象时再启动
-    // refresh: 如果你在某些情况下需要强制清理 selectedObjects
+    // Note: Do not start animate here, wait until there is a hover object
+    // refresh: Forcibly clean up selectedObjects if needed
     function refreshSelection() {
         if (hovered && highlightSet && !highlightSet.has(hovered.name)) {
             hovered = null;
@@ -359,7 +378,7 @@ function enableHoverBreath(opts) {
             animationId = null;
         }
         outlinePass.selectedObjects = [];
-        // 清空引用
+        // Clear references
         hovered = null;
         highlightSet = null;
     }
@@ -372,23 +391,33 @@ function enableHoverBreath(opts) {
 }
 
 /**
- * 初始化描边相关信息（包含 OutlinePass）- 优化版
+ * @file postProcessing.ts
+ * @description
+ * Manages the post-processing chain, specifically for Outline effects and Gamma correction.
+ *
+ * @best-practice
+ * - call `initPostProcessing` after creating your renderer and scene.
+ * - Use the returned `composer` in your render loop instead of `renderer.render`.
+ * - Handles resizing automatically via the `resize` method.
+ */
+/**
+ * Initialize outline-related information (contains OutlinePass)
  *
- * ✨ 功能增强：
- * - 支持窗口 resize 自动更新
- * - 可配置分辨率缩放提升性能
- * - 完善的资源释放管理
+ * Capabilities:
+ * - Supports automatic update on window resize
+ * - Configurable resolution scale for performance improvement
+ * - Comprehensive resource disposal management
  *
  * @param renderer THREE.WebGLRenderer
  * @param scene THREE.Scene
  * @param camera THREE.Camera
- * @param options PostProcessingOptions - 可选配置
- * @returns PostProcessingManager - 包含 composer/outlinePass/resize/dispose 的管理接口
+ * @param options PostProcessingOptions - Optional configuration
+ * @returns PostProcessingManager - Management interface containing composer/outlinePass/resize/dispose
  */
 function initPostProcessing(renderer, scene, camera, options = {}) {
-    // 默认配置
+    // Default configuration
     const { edgeStrength = 4, edgeGlow = 1, edgeThickness = 2, visibleEdgeColor = '#ffee00', hiddenEdgeColor = '#000000', resolutionScale = 1.0 } = options;
-    // 获取渲染器实际尺寸
+    // Get renderer actual size
     const getSize = () => {
         const width = renderer.domElement.clientWidth;
         const height = renderer.domElement.clientHeight;
@@ -398,12 +427,12 @@ function initPostProcessing(renderer, scene, camera, options = {}) {
         };
     };
     const size = getSize();
-    // 创建 EffectComposer
+    // Create EffectComposer
     const composer = new EffectComposer.EffectComposer(renderer);
-    // 基础 RenderPass
+    // Basic RenderPass
     const renderPass = new RenderPass.RenderPass(scene, camera);
     composer.addPass(renderPass);
-    // OutlinePass 用于模型描边
+    // OutlinePass for model outlining
     const outlinePass = new OutlinePass.OutlinePass(new THREE__namespace.Vector2(size.width, size.height), scene, camera);
     outlinePass.edgeStrength = edgeStrength;
     outlinePass.edgeGlow = edgeGlow;
@@ -411,34 +440,34 @@ function initPostProcessing(renderer, scene, camera, options = {}) {
     outlinePass.visibleEdgeColor.set(visibleEdgeColor);
     outlinePass.hiddenEdgeColor.set(hiddenEdgeColor);
     composer.addPass(outlinePass);
-    // Gamma 校正
+    // Gamma correction
     const gammaPass = new ShaderPass.ShaderPass(GammaCorrectionShader.GammaCorrectionShader);
     composer.addPass(gammaPass);
     /**
-     * resize 处理函数
-     * @param width 可选宽度，不传则使用 renderer.domElement 的实际宽度
-     * @param height 可选高度，不传则使用 renderer.domElement 的实际高度
+     * Handle resize
+     * @param width Optional width, uses renderer.domElement actual width if not provided
+     * @param height Optional height, uses renderer.domElement actual height if not provided
      */
     const resize = (width, height) => {
         const actualSize = width !== undefined && height !== undefined
             ? { width: Math.floor(width * resolutionScale), height: Math.floor(height * resolutionScale) }
             : getSize();
-        // 更新 composer 尺寸
+        // Update composer size
         composer.setSize(actualSize.width, actualSize.height);
-        // 更新 outlinePass 分辨率
+        // Update outlinePass resolution
         outlinePass.resolution.set(actualSize.width, actualSize.height);
     };
     /**
-     * 释放资源
+     * Dispose resources
      */
     const dispose = () => {
-        // 释放所有 passes
+        // Dipose all passes
         composer.passes.forEach(pass => {
             if (pass.dispose) {
                 pass.dispose();
             }
         });
-        // 清空 passes 数组
+        // Clear passes array
         composer.passes.length = 0;
     };
     return {