创建场景

2025-05-06 13:58:02 +08:00
parent f19079ef0c
commit 025403b3d0
4 changed files with 96 additions and 132 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<style>
+    body {
+        margin: 0;
+        overflow: hidden;
+        /* 隐藏滚动条 */
+    }
+
+    canvas {
+        display: block;
+        /* 使canvas充满整个窗口 */
+    }
+</style>
+<script type="module">
+    import * as THREE from 'three';
+
+    // 1. 初始化场景、相机和渲染器
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    // 2. 添加立方体
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5, metalness: 0.8 }); // 红色，中等粗糙度，高金属感
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    // 添加地面
+    const planeGeometry = new THREE.PlaneGeometry(10, 10); // 地面大小
+    const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.5, metalness: 0.8 }); // 红色，中等粗糙度，高金属感
+    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
+    plane.rotation.x = -Math.PI / 2; // 旋转地面，使其水平
+    plane.position.y = -1; // 将地面放置在立方体下方
+    scene.add(plane);
+
+    // 添加光源
+    const ambientLight = new THREE.AmbientLight(0x404040, 1); // 环境光，柔和的白光
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // 平行光
+    directionalLight.position.set(5, 5, 5); // 设置光源位置
+    scene.add(directionalLight);
+
+    camera.position.z = 5;
+
+    // 3. 动画循环
+    function animate() {
+        requestAnimationFrame(animate);
+        cube.rotation.x += 0.01;
+        cube.rotation.y += 0.01;
+        renderer.render(scene, camera);
+    }
+    animate();
+
+    // 4. 响应窗口大小变化
+    window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+</script>