63 lines
2.1 KiB
HTML
63 lines
2.1 KiB
HTML
<!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 cube = new THREE.Mesh(
|
|
new THREE.BoxGeometry(1, 1, 1),
|
|
new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.5, metalness: 0.8 }) // 红色，中等粗糙度，高金属感
|
|
);
|
|
scene.add(cube);
|
|
|
|
// 添加地面
|
|
const plane = new THREE.Mesh(
|
|
new THREE.PlaneGeometry(10, 10), // 地面大小
|
|
new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.5, metalness: 0.8 }) // 红色，中等粗糙度，高金属感
|
|
);
|
|
plane.rotation.x = -Math.PI / 2; // 旋转地面，使其水平
|
|
plane.position.y = -1; // 将地面放置在立方体下方
|
|
scene.add(plane);
|
|
|
|
// 添加光源
|
|
scene.add(new THREE.AmbientLight(0x404040, 1)); // 环境光，柔和的白光
|
|
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> |