Babylon.js 中文文档教程

2024-08-21 12:13:18作者：郁楠烈Hubert

项目介绍

Babylon.js 是一个强大的 3D 游戏引擎，它允许开发者轻松创建复杂的 3D 场景和游戏。Babylon.js 基于 WebGL 技术，支持现代浏览器，无需任何插件即可运行。该项目的目标是提供一个简单易用、功能丰富的 API，使开发者能够快速构建高性能的 3D 应用。

项目快速启动

环境准备

在开始之前，请确保你已经安装了以下工具：

一个现代浏览器（如 Chrome 或 Firefox）
一个文本编辑器（如 VSCode 或 Sublime Text）

创建第一个 Babylon.js 项目

创建一个新的 HTML 文件，例如 index.html。
在 index.html 中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Babylon.js 快速启动</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script>
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);

        const createScene = function () {
            const scene = new BABYLON.Scene(engine);
            const camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
            camera.setTarget(BABYLON.Vector3.Zero());
            camera.attachControl(canvas, true);

            const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;

            const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);
            sphere.position.y = 1;

            const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);

            return scene;
        };

        const scene = createScene();
        engine.runRenderLoop(function () {
            scene.render();
        });

        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>