三维空间

了解三维空间及其坐标系是三维图形学的基础，它可以帮助我们理解三维场景的构成和物体在场景中的位置。本文将使用 JavaScript 和 Three.js 来实现三维场景，并详细介绍三维空间的基本概念，包括 X 轴、Y 轴、Z 轴和坐标系。阅读本文，你将对三维空间及其在图形学中的应用有更深入的了解。

X 轴、Y 轴和 Z 轴

在三维空间中，X 轴、Y 轴和 Z 轴是三个相互垂直的坐标轴，它们共同构成了一个三维坐标系。X 轴指向右方，Y 轴指向上方，Z 轴指向屏幕外。

// 创建一个三维场景
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);

// 将立方体添加到场景中
scene.add(cube);

// 将相机添加到场景中
scene.add(camera);

// 设置相机的初始位置
camera.position.z = 5;

// 渲染场景
renderer.render(scene, camera);

坐标系

坐标系是用来物体在三维空间中的位置的工具。在 Three.js 中，坐标系是以相机为中心的。这意味着相机的原点位于场景的中心，X 轴指向右方，Y 轴指向上方，Z 轴指向屏幕外。

// 获取相机的坐标
const position = camera.position;

// 获取相机的旋转角度
const rotation = camera.rotation;

// 获取相机的缩放比例
const scale = camera.scale;

三维场景

三维场景是用来展示三维对象的容器。在 Three.js 中，场景是一个对象，它可以包含灯光、相机和模型。

// 创建一个场景
const scene = new THREE.Scene();

// 将场景添加到渲染器中
renderer.render(scene, camera);

总结

三维空间、坐标系和三维场景是三维图形学的基础。通过对这些概念的理解，我们可以创建出令人惊叹的三维场景。