update

Author: leyi

demogorgon.html

@@ -43,6 +43,37 @@
       margin-top: 10px;
       display: inline-block;
     }
+
+    #settings-panel {
+      position: absolute;
+      right: 20px;
+      top: 20px;
+      background: rgba(0, 0, 0, 0.8);
+      border: 1px solid #ff0000;
+      padding: 15px;
+      color: #ff0000;
+      font-family: 'Courier New', monospace;
+      z-index: 100;
+      pointer-events: auto;
+      width: 220px;
+      font-size: 12px;
+      box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
+    }
+
+    .control-group {
+      margin-bottom: 15px;
+    }
+
+    .control-group label {
+      display: block;
+      margin-bottom: 5px;
+    }
+
+    .control-group input {
+      width: 100%;
+      cursor: pointer;
+      accent-color: #ff0000;
+    }
   </style>
 </head>
 
@@ -52,6 +83,28 @@ <h1>WARNING: GATE OPEN</h1>
     <p>LOCATION: HAWKINS NATIONAL LABORATORY</p>
     <a href="index.html">RUN BACK HOME</a>
   </div>
+
+  <div id="settings-panel">
+    <div style="border-bottom: 1px solid #ff0000; margin-bottom: 10px; padding-bottom: 5px; font-weight: bold;">RENDER
+      CONSOLE</div>
+    <div class="control-group">
+      <label>EXPOSURE (曝光度)</label>
+      <input type="range" id="exposure-slider" min="0" max="5" step="0.1" value="1.5">
+    </div>
+    <div class="control-group">
+      <label>AMBIENT (环境光)</label>
+      <input type="range" id="ambient-slider" min="0" max="5" step="0.1" value="1.2">
+    </div>
+    <div class="control-group">
+      <label>MAIN LIGHT (主灯)</label>
+      <input type="range" id="main-light-slider" min="0" max="10" step="0.1" value="2.0">
+    </div>
+    <div class="control-group">
+      <label>FLICKER BASE (闪烁基准)</label>
+      <input type="range" id="flicker-slider" min="0" max="500" step="10" value="50">
+    </div>
+  </div>
+
   <div id="loading" class="loading">Locating Demogorgon...</div>
 
   <script type="importmap">
@@ -68,8 +121,8 @@ <h1>WARNING: GATE OPEN</h1>
     import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
     import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-    let scene, camera, renderer, controls, model;
-    let flashLight;
+    let scene, camera, renderer, controls, model, ambientLight, mainLight, flashLight;
+    let flickerBase = 50;
 
     function init() {
       scene = new THREE.Scene();
@@ -83,16 +136,24 @@ <h1>WARNING: GATE OPEN</h1>
       renderer.setSize(window.innerWidth, window.innerHeight);
       renderer.setPixelRatio(window.devicePixelRatio);
       renderer.shadowMap.enabled = true;
+      // 开启色调映射，让模型亮度更自然
+      renderer.toneMapping = THREE.ACESFilmicToneMapping;
+      renderer.toneMappingExposure = 1.5;
       document.body.appendChild(renderer.domElement);
 
       controls = new OrbitControls(camera, renderer.domElement);
       controls.enableDamping = true;
 
       // 灯光设置
-      const ambientLight = new THREE.AmbientLight(0x404040, 0.5); // 极弱的环境光
+      ambientLight = new THREE.AmbientLight(0xffffff, 1.2);
       scene.add(ambientLight);
 
-      flashLight = new THREE.PointLight(0xff0000, 100, 10);
+      // 增加一个强力的主方向光，从斜上方照亮模型
+      mainLight = new THREE.DirectionalLight(0xffffff, 2.0);
+      mainLight.position.set(5, 10, 7.5);
+      scene.add(mainLight);
+
+      flashLight = new THREE.PointLight(0xff0000, 150, 15);
       flashLight.position.set(2, 3, 2);
       flashLight.castShadow = true;
       scene.add(flashLight);
@@ -134,6 +195,20 @@ <h1>WARNING: GATE OPEN</h1>
       // 添加 Upside Down 的灰烬粒子
       createParticles();
 
+      // 绑定控制台事件
+      document.getElementById('exposure-slider').addEventListener('input', (e) => {
+        renderer.toneMappingExposure = parseFloat(e.target.value);
+      });
+      document.getElementById('ambient-slider').addEventListener('input', (e) => {
+        ambientLight.intensity = parseFloat(e.target.value);
+      });
+      document.getElementById('main-light-slider').addEventListener('input', (e) => {
+        mainLight.intensity = parseFloat(e.target.value);
+      });
+      document.getElementById('flicker-slider').addEventListener('input', (e) => {
+        flickerBase = parseFloat(e.target.value);
+      });
+
       window.addEventListener('resize', onWindowResize);
       animate();
     }
@@ -163,7 +238,7 @@ <h1>WARNING: GATE OPEN</h1>
       if (Math.random() > 0.9) {
         flashLight.intensity = Math.random() * 150;
       } else {
-        flashLight.intensity = 50;
+        flashLight.intensity = flickerBase;
       }
 
       if (model) model.rotation.y += 0.005;