当前位置：首页 > news >正文

WebXR教学 03 项目1 旋转彩色方块

news 2025/9/18 15:22:10

在这里插入图片描述

一、项目结构

webgl-cube/
├── index.html
├── main.js
├── package.json
└── vite.config.js

二、详细实现步骤

初始化项目

npm init -y
npm install three vite --save-dev

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>旋转彩色立方体</title><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style>
</head>
<body><script type="module" src="./main.js"></script>
</body>
</html>

main.js

// 导入Three.js核心库
import * as THREE from 'three';// ---------- 场景初始化 ----------
// 创建三维场景容器
const scene = new THREE.Scene();// ---------- 相机配置 ----------
// 创建透视相机（模拟人眼视角）
const camera = new THREE.PerspectiveCamera(75, // 视野角度（FOV）window.innerWidth / window.innerHeight, // 宽高比0.1, // 近裁剪面（最近可见距离）1000  // 远裁剪面（最远可见距离）
);// ---------- 渲染器配置 ----------
// 创建WebGL渲染器（启用抗锯齿）
const renderer = new THREE.WebGLRenderer({antialias: true,  // 开启抗锯齿alpha: true       // 开启透明背景（可选）
});
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置像素比（适配高清屏）
renderer.setPixelRatio(window.devicePixelRatio);
// 将画布添加到页面
document.body.appendChild(renderer.domElement);// ---------- 立方体创建 ----------
// 创建立方体几何体（单位立方体）
const geometry = new THREE.BoxGeometry(1, 1, 1);// 创建六面材质（颜色配置）
const materials = [new THREE.MeshBasicMaterial({ color: 0xff0000 }), // 右（+X）new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // 左（-X）new THREE.MeshBasicMaterial({ color: 0x0000ff }), // 上（+Y）new THREE.MeshBasicMaterial({ color: 0xffff00 }), // 下（-Y）new THREE.MeshBasicMaterial({ color: 0xff00ff }), // 前（+Z）new THREE.MeshBasicMaterial({ color: 0x00ffff })  // 后（-Z）
];// 组合几何体与材质生成网格对象
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);// 设置相机初始位置（沿Z轴后移）
camera.position.z = 5;// ---------- 动画循环 ----------
function animate() {requestAnimationFrame(animate);// 旋转动画（每秒约60帧）cube.rotation.x += 0.01;  // X轴旋转cube.rotation.y += 0.01;  // Y轴旋转// 渲染场景renderer.render(scene, camera);
}// 启动动画
animate();// ---------- 窗口响应式处理 ----------
window.addEventListener('resize', () => {// 更新相机参数camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();// 更新渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);
});

vite.config.js

import { defineConfig } from 'vite'export default defineConfig({base: './',server: {port: 3000,open: true}
})

三、核心概念解析

Three.js三大核心要素：

Scene（场景）：所有3D对象的容器

Camera（相机）：观察场景的视角

Renderer（渲染器）：负责将3D场景渲染到2D画布

坐标系系统：

X轴：水平方向（右正左负）

Y轴：垂直方向（上正下负）

Z轴：深度方向（屏幕外正，屏幕内负）

材质类型：

MeshBasicMaterial：基础材质（不受光照影响）

MeshPhongMaterial：光泽材质（受光照影响）

MeshStandardMaterial：PBR材质（物理渲染）

四、运行项目

npx vite

五、常见问题解决

页面空白问题：

检查控制台报错（F12打开开发者工具）

确保相机位置正确（camera.position.z = 5）

验证材质颜色值是否合法（0x开头十六进制）

性能优化建议：

// 在初始化渲染器时添加
renderer.shadowMap.enabled = true;  // 启用阴影
renderer.outputEncoding = THREE.sRGBEncoding;  // 颜色空间优化

进阶功能扩展：

// 添加轨道控制器（需额外安装）
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);