基础应用

引用

核心文件简介

• babylonjs ： babylon 核心库，下面的是功能补充库
• babylonjs-materials ： 集合了 babylon 提供的高级材质
• babylonjs-loaders ： 能够让 babylon 支持导入 OBJ, STL, glTF 等 3d 文件
• babylonjs-post-process ： 后期特效库，能够让场景展示电影级别的滤镜效果
• babylonjs-procedural-textures ： babylon 纹理贴图，可以展示更酷的效果
• babylonjs-serializers ： 能够把场景 Scene 、物体 mesh 等元素转化为 json 配置并导出
• babylonjs-gui ： 交互组件库，支持按钮、复选框、下拉列表等表单元素
• babylonjs-inspector ： 记录并显示 babylon 甚至 webGL 的运行情况
• babylonjs-viewer ： Babylon 查看器，几行代码就能让 3d 内容展示到网页上。

ES6 版本依赖

npm install --save-dev @babylonjs/core
npm install --save-dev @babylonjs/materials
npm install --save-dev @babylonjs/loaders
npm install --save-dev @babylonjs/post-processes
npm install --save-dev @babylonjs/procedural-textures
npm install --save-dev @babylonjs/serializers
npm install --save-dev @babylonjs/gui
npm install --save-dev @babylonjs/viewer

新建

1. 创建一个 canvas 画布

   <style>
     #renderCanvas {
       width: 100%;
       height: 100%;
       touch-action: none;
     }
   </style>
   <canvas id="renderCanvas" touch-action="none"></canvas>

2. 定义一个场景 scene

   var createScene = function () {
     var 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("light", new BABYLON.Vector3(0, 1, 0), scene);
     // 定义光照强度, 默认是1
     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;
   };

3. 初始化并渲染

   // 得到canvas对象的引用
   var canvas = document.getElementById("renderCanvas");
   // 初始化 BABYLON 3D engine
   var engine = new BABYLON.Engine(canvas, true);
   var scene = createScene(); //Call the createScene function
   
   // 循环渲染
   engine.runRenderLoop(function () {
     scene.render();
   });
   
   // 监听浏览器改变大小的事件，通过调用engine.resize()来自适应窗口大小
   window.addEventListener("resize", function () {
     engine.resize();
   });

添加三维坐标系

// 辅助三维坐标系
new BABYLON.AxesViewer(scene, 2);