2. 技术
    3. Babylon.js - 起步

    Babylon.js - 起步

    技术2025-05-30  12

    相关网站

    Babylon.js 官方网站 Babylon.js 中文网 Babylon.js Github地址

    CDN

    https://cdn.babylonjs.com/babylon.jshttps://cdn.babylonjs.com/babylon.max.js

    可以在https://cdn.babylonjs.com/xxx上找到其他参考，其中xxx是可以在/dist文件夹中找到的文件夹结构，如下所示：

    https://cdn.babylonjs.com/gui/babylon.gui.min.js

    对于预览版本，可以使用以下URL链接：

    https://preview.babylonjs.com/babylon.jshttps://preview.babylonjs.com/babylon.max.js

    其他参考资料可在https://preview.babylonjs.com/xxx上找到，其中xxx是可以在/dist/预览版文件夹（如https://preview.babylonjs.com/gui/babylon.gui.min.js）中找到的文件夹结构

    <!--- 使用cdn提供的url链接 ---> <!--- Link to the last version of BabylonJS ---> <script src="https://cdn.babylonjs.com/babylon.js"></script>

    npm

    使用npm来为项目安装BabylonJS：

    npm install babylonjs --save

    使用以下命令导入BabylonJS：

    import * as BABYLON from 'babylonjs';

    或加载特定的类：

    import { Scene, Engine } from 'babylonjs';

    Start

    /第一步从HTML文档中获取canvas元素的引用：

    var canvas = document.getElementById('renderCanvas');

    然后，加载 Babylon 3D 引擎：

    var engine = new BABYLON.Engine(canvas, true);

    创建名为 createScene 的 function，并返回 scene ：

    var createScene = function(){ // Create a basic BJS Scene object. var scene = new BABYLON.Scene(engine); var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5, -10), scene); // Target the camera to scene origin. camera.setTarget(BABYLON.Vector3.Zero()); // Attach the camera to the canvas. camera.attachControl(canvas, false); ... // Return the created scene. return scene; }

    注意: 其中的 camera 是必须的。

    接下来渲染场景：

    // 调用createScene var scene = createScene(); // 注册一个渲染循环来重复渲染画布上的场景： engine.runRenderLoop(function () { scene.render(); });

    以上便创建了一个最基本的BabylonJS场景，不过场景中还未添加任何物体，之后的文章中再来介绍如何添加物体。

    完整代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Babylon - Getting Started</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <!--- Link to the last version of BabylonJS ---> <script src="https://cdn.babylonjs.com/babylon.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function () { var canvas = document.getElementById('renderCanvas'); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { // Create a basic BJS Scene object. var scene = new BABYLON.Scene(engine); // Create a FreeCamera, and set its position to (x:0, y:5, z:-10). var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5, -10), scene); // Target the camera to scene origin. camera.setTarget(BABYLON.Vector3.Zero()); // Attach the camera to the canvas. camera.attachControl(canvas, false); // Return the created scene. return scene; } // 调用createScene var scene = createScene(); // 注册一个渲染循环来重复渲染画布上的场景： engine.runRenderLoop(function () { scene.render(); }); // 最后，您应该实现一个canvas/window resize 事件处理程序，如下所示： window.addEventListener('resize', function () { engine.resize(); }); }); </script> </body> </html>
    Processed: 0.010, SQL: 9