BabylonJS - 环境设置

Babylon.js - 环境搭建

搭建使用 Babylon.js 的开发环境非常简单。根据你的项目复杂度和偏好的工作流程，你有几种不同的选择。

选项 1: 使用 NPM 或 Yarn（推荐用于项目）

对于构建应用或大型项目，使用像 Node Package Manager (npm) 或 Yarn 这样的包管理器（package manager）是标准且推荐的方法。这让你能够轻松管理依赖（dependencies），使用构建工具（build tools）（如 Webpack, Vite, Rollup），并利用现代 JavaScript/TypeScript 特性。

初始化项目： 如果你还没有项目，创建一个项目文件夹，并使用 npm 或 yarn 初始化它：

mkdir my-babylon-app
cd my-babylon-app
npm init -y  # or yarn init -y

安装 Babylon.js 核心包： 安装核心引擎（engine）包。

npm install @babylonjs/core
# or
yarn add @babylonjs/core

安装加载器（可选但常用）： 如果你计划加载 glTF 模型等资源（assets），安装加载器（loaders）包：

npm install @babylonjs/loaders
# or
yarn add @babylonjs/loaders

安装其他模块（可选）： Babylon.js 具有模块化结构。你可能需要安装其他包，例如：

@babylonjs/gui 用于 GUI 系统
@babylonjs/materials 用于额外材质（materials）（例如 Lava, Water）
@babylonjs/inspector 用于调试检查器（debugging inspector）
@babylonjs/serializers 用于保存场景（scenes）/网格（meshes）

npm install @babylonjs/gui @babylonjs/inspector
# or
yarn add @babylonjs/gui @babylonjs/inspector

设置构建流程： 你需要一个模块打包器（module bundler），如 Webpack, Vite, Parcel, 或 Rollup，来为浏览器打包你的代码和 Babylon.js 模块。Vite 通常因其快速的开发服务器（development server）和简单的配置而被推荐。
在代码中导入： 在你的 JavaScript 或 TypeScript 文件中，导入所需的组件：

// 使用 ES6 导入的例子（TypeScript 或使用打包器的 JS）
import * as BABYLON from '@babylonjs/core';
import '@babylonjs/loaders'; // 如果加载器

const canvas = document.getElementById('renderCanvas');
const engine = new BABYLON.Engine(canvas, true);
// ... 场景的其他设置

选项 2: 使用 CDN 链接（简单示例，原型开发）

对于快速测试、简单的 HTML 页面或在线代码游乐场（code playgrounds）（如 CodePen, JSFiddle, Babylon.js Playground），使用内容分发网络（Content Delivery Network, CDN）链接是入门最简单的方式。你不需要 npm 或构建流程。

在你的 HTML 文件的 <head> 中或主脚本之前包含 <script> 标签。

<!DOCTYPE html>
<html>
<head>
    <title>Babylon.js CDN Example</title>
    <!-- Babylon.js 核心库 -->
    <script src="https://cdn.babylonjs.com/babylon.js"></script>

    <!-- 可选加载器 -->
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

    <!-- 可选 GUI -->
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>

    <style>
        /* 基本样式 */
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script type="text/javascript">
        // 通过全局 BABYLON 对象访问 Babylon.js
        const canvas = document.getElementById('renderCanvas');
        const engine = new BABYLON.Engine(canvas, true);

        const createScene = function() {
            const scene = new BABYLON.Scene(engine);
            // ... 使用 BABYLON.* 类进行场景设置 ...
            const camera = new BABYLON.ArcRotateCamera(...);
            const light = new BABYLON.HemisphericLight(...);
            const sphere = BABYLON.MeshBuilder.CreateSphere(...);
            return scene;
        }

        const scene = createScene();
        engine.runRenderLoop(() => scene.render());
        window.addEventListener('resize', () => engine.resize());
    </script>
</body>
</html>

你可以在 Babylon.js 官方文档网站上找到最新的 CDN 链接。

开发工具

代码编辑器： 强烈推荐使用现代代码编辑器，如 Visual Studio Code (VS Code), WebStorm, Sublime Text, 或 Atom。VS Code 具有出色的 TypeScript 支持、调试能力和相关扩展。
浏览器开发者工具： 对于调试 JavaScript、检查 HTML/CSS、监控网络请求和分析性能至关重要。（在大多数浏览器中按 F12）。
Babylon.js 检查器： 一个内置的调试工具。你可以在代码中激活它 (scene.debugLayer.show();)，以便直接在运行中的应用内检查场景层级（scene hierarchy）、对象属性（object properties）、材质设置（material settings）、性能指标（performance metrics）等。它对于故障排除（troubleshooting）非常宝贵。
Babylon.js 游乐场： 一个在线编辑器 (playground.babylonjs.com)，非常适合无需本地设置即可试验代码片段（code snippets）、测试功能和分享示例。
Babylon.js 沙盒： 一个在线工具 (sandbox.babylonjs.com)，用于轻松查看和检查 3D 模型（特别是 glTF）并检查问题。

选择最适合你的项目需求的设置方法。对于超出简单示例的任何情况，结合打包器（bundler）和 TypeScript 的 NPM/Yarn 方法提供了更强大和可扩展的开发体验。