【Babylonjs】起步

最新推荐文章于 2025-07-01 14:31:11 发布

翻译最新推荐文章于 2025-07-01 14:31:11 发布 · 6.7k 阅读

文章标签：

#Babylonjs

本文介绍如何使用BabylonJs构建3D场景，包括设置HTML页面、加载引擎、创建场景、添加相机、光源和3D物体等基本步骤。

一、如何使用BabylonJs

简介

babylon.js是由微软爸爸出品的WebGL框架，能够通过HTML5 canvas在网页构建一个3D的场景。使用的是左手坐标系，文档中还有部分使用TypeScript来编写当然他们都有对应的JS版本。相对于ThreeJs更适合用来做游戏，因为它的碰撞检测十分易用。它的场景中参数比ThreeJs更多一些，有好有坏吧。

起步

html, body {  
  overflow:hidden;  
  width:00%;  
  height:100%;  
  margin:0;  
  padding:0;  
}  
  
#renderCanvas {  
  width:100%;  
  height:100%;  
  touch-action:none;  
}

<script src="babylon.js"></script>  
<canvas id="renderCanvas"></canvas>

// 从上面的HTML中取得canvas元素
var canvas = document.getElementById("renderCanvas");       
//  加载BABYLON 3D 引擎
var engine = new BABYLON.Engine(canvas, true);

场景

这是构建你自己的场景的一个最快速易用的方式。创建一个3D场景是简单的，你只需要加入相机（camera）、光源（lights）以及 3D物体 (meshes) 。

你需要创建你自己的scene或者编辑一个现有的scene。

var createScene = function () {    
    // 创建场景 scene 
    var scene = new BABYLON.Scene(engine);    
    // 在场景中添加一个相机并将其和画布关联。
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);    
    // 在场景中添加光源，HemisphericLight是一种户外光源，PointLight是一种点光源
    var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);    
    var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);    
    //  添加一个3D物体，这里的Sphere是个球体
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);    
    return scene;

};
var scene = createScene();

再新建一个循环不停地渲染场景

engine.runRenderLoop(function() {  
    scene.render();  
});

新建监听事件使得场景自适应屏幕大小变化

window.addEventListener("resize", function () {     
    engine.resize();
});

尝试一下