用JavaScript构建3D程序

用JavaScript构建3D程序

概述

使用 JavaScript 构建 3D 程序通常依赖于现成的库或框架来实现高效开发。JavaScript可用的主流 3D 库有Three.js、Babylon.js等

两者对比

特性	Three.js	Babylon.js
核心功能	专注于渲染	渲染 + 内置物理引擎
物理引擎支持	需要集成第三方库（如 Cannon.js）	内置 Cannon.js / Oimo.js / Ammo.js
灵活性	高（开发者可以自由选择物理引擎）	较低（依赖内置的物理引擎）
学习曲线	较低（API 简洁）	较高（API 更复杂，功能更多）
适用场景	WebGL/WebXR、轻量级项目	WebGL/WebXR、游戏开发

学习路径的差异

• Three.js 的学习路径更线性：从基础几何体、材质、光照到高级功能（如着色器、后期处理）。
• Babylon.js 的学习路径更广泛：除了渲染功能，还需要学习物理引擎、动画系统、GUI 系统等

Three.js 和 Babylon.js的坐标系比较

Three.js 坐标系

Three.js 使用的是 左手坐标系（Left-Handed Coordinate System）。具体特点如下：

• X轴：水平方向，指向右侧。
• Y轴：垂直方向，指向上方。
• Z轴：深度方向，指向屏幕外（从相机的角度来看，即远离你）。

在 Three.js 中，原点 (0, 0, 0) 通常位于场景的中心，物体的位置是相对于这个原点的坐标来设定的。

Babylon.js 坐标系

Babylon.js 使用的是 右手坐标系（Right-Handed Coordinate System）。其特点与 Three.js 有一些不同，具体如下：

• X轴：水平方向，指向右侧。
• Y轴：垂直方向，指向上方。
• Z轴：深度方向，指向屏幕内（从相机的角度来看，即靠近你）。

在 Babylon.js 中，原点(0, 0, 0)也通常位于场景的中心，物体的坐标是相对于这个原点来设定的。与 Three.js 不同的是，Babylon.js 的 Z 轴朝向相机方向。

说明：大多数图形硬件（如 OpenGL）使用的是左手坐标系，因此 Three.js 选择使用左手坐标系。而 Babylon.js 是为了与 DirectX 兼容，DirectX 使用的是右手坐标系。

Three.js

Three.js是最流行的 Web 3D 库，文档丰富，适合快速原型开发。

英文文档 https://threejs.org/docs/

中文文档 https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

核心概念