视野角度示例：使用 Three.js 创建 3D 场景
在这篇文章中，我们将通过使用 Three.js 库来创建一个简单的 3D 场景，演示如何通过相机的视野角度设置、3D 对象的旋转、以及交互式操作来展示 3D 图形。Three.js 是一个非常流行的 3D 图形渲染库，它利用 WebGL 技术使得在浏览器中渲染 3D 图形成为可能。
目录
引言
本文展示了如何使用 Three.js 创建一个简单的 3D 场景，并在场景中加入立方体对象，同时通过设置不同的视野角度来控制摄像机的视角。通过 OrbitControls，我们还可以使得用户与场景进行交互，实时调整视角。
功能演示
在该示例中，我们实现了以下功能：
- 创建一个 3D 场景，并加入一个立方体。
- 使用相机的视野角度（FOV，Field of View）来控制视野范围。
- 在场景中添加坐标轴和文本标签，标明 X、Y、Z 轴。
- 使用
OrbitControls控制器允许用户通过拖动鼠标来旋转视图。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视野角度示例</title>
<style>
body {
margin: 0;
}
canvas {
display: block; /* 去除 canvas 的默认边距 */
}
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 立方体与坐标轴
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(5, 3, 1);
scene.add(cube);
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 创建文本标签
function createTextLabel(text, position) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = '32px Arial';
context.fillStyle = 'white';
context.fillText(text, 0, 32);
const texture = new THREE.CanvasTexture(canvas);
const spriteMaterial = new THREE.SpriteMaterial({ map: texture });
const sprite = new THREE.Sprite(spriteMaterial);
sprite.position.copy(position);
return sprite;
}
const xLabel = createTextLabel('X', new THREE.Vector3(5.5, 0, 0));
const yLabel = createTextLabel('Y', new THREE.Vector3(0, 5.5, 0));
const zLabel = createTextLabel('Z', new THREE.Vector3(0, 0, 5.5));
scene.add(xLabel);
scene.add(yLabel);
scene.add(zLabel);
// OrbitControls 控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
// 动画循环
function animate() {
requestAnimationFrame(animate);
controls.update();
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
// 自适应窗口大小
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
代码解析
1. 创建场景与相机
场景 (Scene)：const scene = new THREE.Scene(); 用来存放和管理所有的 3D 对象、光源等。
相机 (PerspectiveCamera)：const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); 这里设置了相机的视野角度为 75，视角越大，视野越宽。纵横比由 window.innerWidth / window.innerHeight 控制，确保浏览器窗口的比例。
2. 渲染器设置
渲染器 (WebGLRenderer)：const renderer = new THREE.WebGLRenderer(); 渲染器将 3D 场景转换为 2D 图像，并显示在页面上。renderer.setSize(window.innerWidth, window.innerHeight) 设置了渲染器的大小，以适应整个浏览器窗口。
3. 立方体与坐标轴
通过 THREE.BoxGeometry 创建一个立方体，并用 MeshBasicMaterial 为其上色。scene.add(cube) 将立方体加入场景。
使用 THREE.AxesHelper 创建一个简单的坐标轴，帮助用户直观了解 3D 场景中的方向。
4. 文本标签
createTextLabel 函数通过绘制文本到 canvas 上，再用 CanvasTexture 将其转化为材质，最终生成带有标签的 3D 精灵对象，显示在 X、Y、Z 坐标轴上。
5. 动画与交互
动画：使用 requestAnimationFrame(animate) 来创建一个动画循环，确保每次渲染更新立方体的旋转。
交互控制：通过 OrbitControls 来实现用户用鼠标控制视角，启用惯性和平滑拖动。
6. 响应式布局
监听 resize 事件，确保在窗口大小变化时，相机和渲染器能够自动调整，以保持合适的视图比例。
总结
本文通过一个完整的示例，展示了如何使用 Three.js 创建一个简单的 3D 场景。在此基础上，你可以尝试添加更多复杂的几何体、光源或纹理，进一步探索 WebGL 的强大功能。
参考资源
Three.js 官方文档
WebGL 学习资源
Three.js 示例