拥抱新一代 Web 3D 引擎，Three.js 项目快速升级 Galacean 指南
随着 Web 3D 技术的飞速发展，前端开发者对渲染引擎的需求不再局限于“能跑起来”，而是追求更高的性能、更简洁的 API 以及更好的跨平台支持。Three.js 作为过去十年间最流行的 WebGL 库，虽已功勋卓著，但在大型项目优化、移动端适配和现代图形特性支持上逐渐显露疲态。Galacean 作为新一代国产 Web 3D 引擎，凭借其基于 TypeScript 的现代化架构、内置的物理引擎和高效的渲染流水线，正在成为开发者升级项目的首选。本文将带你从基础概念出发，循序渐进地完成从 Three.js 到 Galacean 的项目迁移。## 基础概念对比：从 Three.js 到 Galacean在开始迁移前，我们需要理解两者在核心设计上的差异。Three.js 采用“场景-相机-渲染器”的经典模式，所有对象通过add()方法添加到场景中。Galacean 则引入了实体-组件系统（ECS），其中每个可见物体都是“实体”，通过挂载不同的“组件”来控制其行为（如网格、材质、灯光等）。这种设计让代码更模块化，便于维护和扩展。此外，Galacean 内置了更先进的渲染管线，支持 PBR（基于物理的渲染）、阴影贴图优化以及更高效的资源管理。迁移时，我们不需要手动管理内存释放——引擎会自动处理。## 环境搭建与第一个示例我们先从一个简单的旋转立方体开始，感受 Galacean 的语法。首先，通过 npm 安装引擎：bashnpm install @galacean/engine然后，创建一个 HTML 文件，引入引擎并初始化画布。以下是完整代码，注释解释了每一步的作用：typescript// 1. 导入核心模块import { WebGLEngine, Camera, MeshRenderer, PrimitiveMesh, Entity, Vector3 } from "@galacean/engine";// 2. 创建引擎实例，传入 canvas 元素 ID 或 DOM 元素const engine = new WebGLEngine("canvas-id");// 3. 获取场景的根实体（所有对象的父节点）const rootEntity = engine.sceneManager.activeScene.createRootEntity();// 4. 创建一个立方体实体const cubeEntity = new Entity(engine, "cube");// 5. 为立方体添加网格渲染组件，并指定几何体为立方体const renderer = cubeEntity.addComponent(MeshRenderer);renderer.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1); // 长宽高各为1// 6. 将立方体添加到场景中rootEntity.addChild(cubeEntity);// 7. 创建相机实体并设置位置const cameraEntity = new Entity(engine, "camera");cameraEntity.addComponent(Camera);cameraEntity.transform.setPosition(0, 0, 5); // 将相机放在Z轴正方向// 8. 将相机添加到场景rootEntity.addChild(cameraEntity);// 9. 在每一帧更新时旋转立方体engine.on("update", (deltaTime: number) => { cubeEntity.transform.rotate(new Vector3(0, 1, 0), 60 * deltaTime); // 每秒旋转60度});// 10. 启动引擎循环engine.run();在这个例子中，我们看到了 Galacean 的核心思想：一切皆是实体，实体通过添加组件获得能力。相比 Three.js 的scene.add(cube)，这里的rootEntity.addChild(cubeEntity)更清晰地表达了父子层级关系。## 高级功能：从 Three.js 迁移物理和动画系统Three.js 中实现物理通常需要第三方库（如 Cannon.js），而 Galacean 内置了物理引擎。下面我们演示如何创建一个带重力的小球，并让它弹跳。这对应了 Three.js 中需要手动计算velocity的复杂操作。首先，安装物理扩展包：bashnpm install @galacean/engine-physics接着，编写代码：typescriptimport { WebGLEngine, Camera, MeshRenderer, PrimitiveMesh, Entity, Vector3 } from "@galacean/engine";import { PhysicsManager, Collider, RigidBody, BoxColliderShape, SphereColliderShape } from "@galacean/engine-physics";// 1. 初始化引擎const engine = new WebGLEngine("canvas-id");const rootEntity = engine.sceneManager.activeScene.createRootEntity();// 2. 启用物理引擎（需传入重力向量）engine.physicsManager = new PhysicsManager(engine, new Vector3(0, -9.81, 0));// 3. 创建一个地面实体（长方体）const groundEntity = new Entity(engine, "ground");const groundRenderer = groundEntity.addComponent(MeshRenderer);groundRenderer.mesh = PrimitiveMesh.createCuboid(engine, 10, 0.5, 10);groundEntity.transform.setPosition(0, -2, 0);// 4. 为地面添加碰撞体（静态物体）const groundCollider = groundEntity.addComponent(Collider);groundCollider.addShape(new BoxColliderShape(10, 0.5, 10)); // 大小与网格匹配rootEntity.addChild(groundEntity);// 5. 创建一个球体实体const ballEntity = new Entity(engine, "ball");const ballRenderer = ballEntity.addComponent(MeshRenderer);ballRenderer.mesh = PrimitiveMesh.createSphere(engine, 0.5); // 半径0.5ballEntity.transform.setPosition(0, 3, 0); // 放在空中// 6. 为球体添加刚体（动态物体）和碰撞体const ballRigid = ballEntity.addComponent(RigidBody);ballRigid.mass = 1; // 质量1千克const ballCollider = ballEntity.addComponent(Collider);ballCollider.addShape(new SphereColliderShape(0.5)); // 碰撞体形状与球体匹配rootEntity.addChild(ballEntity);// 7. 添加相机，与之前相同const cameraEntity = new Entity(engine, "camera");cameraEntity.addComponent(Camera);cameraEntity.transform.setPosition(0, 2, 6);rootEntity.addChild(cameraEntity);// 8. 启动引擎engine.run();这段代码展示了如何在 Galacean 中实现物理模拟。与 Three.js 相比，我们不再需要手动计算重力加速度和碰撞检测——引擎的物理系统会处理这些。此外，Galacean 的Collider和RigidBody组件分离了碰撞体形状和物理行为，更符合游戏引擎的设计模式。## 性能优化：资源管理与批处理大型 Three.js 项目常面临内存泄漏和绘制调用过多的问题。Galacean 通过内置的纹理压缩、GPU 实例化（Instancing）和自动垃圾回收来优化。例如，当你需要渲染大量相同几何体时（如森林中的树木），Galacean 的实例化功能可以显著提升性能。在 Three.js 中，你需手动创建InstancedMesh；而在 Galacean 中，只需设置MeshRenderer的isInstancing属性为true，并传入实例化数据即可。typescript// 假设已有 1000 个相同的小球实体const instances: Matrix[] = [];for (let i = 0; i < 1000; i++) { const mat = new Matrix(); mat.setPosition(Math.random() * 10 - 5, 0, Math.random() * 10 - 5); instances.push(mat);}// 在渲染器上启用实例化renderer.isInstancing = true;renderer.instances = instances; // 传入变换矩阵数组此外，Galacean 的资源管理采用引用计数机制。当你移除实体时，其所有组件和关联资源会自动释放，无需手动调用dispose()。## 总结从 Three.js 迁移到 Galacean 并非简单的 API 替换，而是一次架构升级。Galacean 通过实体-组件系统、内置物理引擎和现代化资源管理，降低了开发复杂度，同时提升了渲染性能和可维护性。本文从基础的环境搭建、旋转立方体，到高级的物理模拟和实例化优化，逐步展示了迁移的关键步骤。对于已有 Three.js 基础的项目，建议从核心逻辑的模块化重构开始，逐步替换旧代码。拥抱 Galacean，意味着拥抱更高效、更强大的 Web 3D 开发体验。
