加入导出功能

src/OceanScene.js

@@ -6,6 +6,7 @@ import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
 import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+import Stats from 'three/addons/libs/stats.module.js';
 import { TerrainGenerator } from './TerrainGenerator.js';
 import { VegetationSystem } from './VegetationSystem.js';
 
@@ -35,6 +36,7 @@ export class OceanScene {
         this.bloomPass = null;
         this.rainPass = null;
         this.snowPass = null;
+        this.stats = null;
         this.cloudGroup = null;
         this.cloudMaterials = [];
         this.cloudLayers = [];
@@ -83,8 +85,6 @@ export class OceanScene {
         };
         
         this.clock = new THREE.Clock();
-        this.frameCount = 0;
-        this.lastTime = performance.now();
         this.lightningFlash = 0;
         this.lightningLocalFlash = 0;
         this.lightningBurstEnd = 0;
@@ -94,6 +94,7 @@ export class OceanScene {
     
     async init() {
         this.initRenderer();
+        this.initStats();
         this.initScene();
         this.initCamera();
         this.initControls();
@@ -123,6 +124,18 @@ export class OceanScene {
         this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
         this.container.appendChild(this.renderer.domElement);
     }
+
+    initStats() {
+        this.stats = new Stats();
+        this.stats.showPanel(0);
+        this.stats.dom.style.position = 'fixed';
+        this.stats.dom.style.left = '0';
+        this.stats.dom.style.top = '0';
+        this.stats.dom.style.bottom = 'auto';
+        this.stats.dom.style.margin = '0';
+        this.stats.dom.style.zIndex = '120';
+        this.container.appendChild(this.stats.dom);
+    }
     
     initScene() {
         this.scene = new THREE.Scene();
@@ -1535,6 +1548,7 @@ export class OceanScene {
     
     animate() {
         requestAnimationFrame(() => this.animate());
+        this.stats?.begin();
         
         const time = this.clock.getElapsedTime();
         this.updateLightning(time);
@@ -1589,18 +1603,7 @@ export class OceanScene {
         } else {
             this.renderer.render(this.scene, this.camera);
         }
-        
-        this.frameCount++;
-        const currentTime = performance.now();
-        if (currentTime - this.lastTime >= 1000) {
-            const fps = Math.round(this.frameCount * 1000 / (currentTime - this.lastTime));
-            const fpsElement = document.getElementById('fps');
-            if (fpsElement) {
-                fpsElement.textContent = fps;
-            }
-            this.frameCount = 0;
-            this.lastTime = currentTime;
-        }
+        this.stats?.end();
     }
     
     hideLoading() {