Update index.html

index.html

@@ -43,7 +43,7 @@
     </form>
     <div id="settings">
         <label>
-            背景色: <input type="color" id="bgColorPicker" value="#222222" onchange="updateBackgroundColor()">
+            シーン背景色: <input type="color" id="bgColorPicker" value="#222222" onchange="updateSceneBackgroundColor()">
         </label>
         <label>
             カメラ X: <input type="range" id="cameraX" min="-500" max="500" value="-100" oninput="updateCameraPosition()">
@@ -105,6 +105,7 @@
             document.getElementById('scene-container').innerHTML = ''; // 既存のcanvasを削除
             document.getElementById('scene-container').appendChild(renderer.domElement);
 
+            updateSceneBackgroundColor(); // シーンの背景色を初期設定
             createCubesFromImage();
             animate();
         }
@@ -161,9 +162,9 @@
             create3DScene();
         }
 
-        function updateBackgroundColor() {
+        function updateSceneBackgroundColor() {
             const color = document.getElementById('bgColorPicker').value;
-            document.body.style.backgroundColor = color;
+            scene.background = new THREE.Color(color); // シーンの背景色を更新
         }
 
         function updateCameraPosition() {