Babylon.js-2 热身

参考链接：https://doc.babylonjs.com/babylon101/first

Babylon.js使用HTML5页面的<canvas>元素进行Web3D开发。

关于Babylon.js配置，以纯javascript与Vue.js为例

  • javascript

    1. 导入babylon.js

      1
      2
      3
      <script src="https://preview.babylonjs.com/babylon.js"></script> <!-- babylon.js源代码 -->
      <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> <!-- babylon.js加载器 (OBJ, STL, glTF)-->
      <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script> <!-- Pointer Event Polyfill 便携设备触碰事件处理 -->

      国内CDN

      1
      2
      <script src="https://cdn.bootcss.com/babylonjs/4.1.0-alpha.1/babylon.js"></script>
      <!-- <script src="https://cdn.bootcss.com/jquery.pep/0.4.0/jquery.pep.min.js"></script> 这个有点问题，不建议用 -->

    2. 创建一个<canvas>元素，设置其id

      1
      <canvas id="renderCanvas" touch-action="none"></canvas>

      将touch-action设置为"none"使其更适配PEP

  • Vue.js

    1. 安装必要依赖 @vue/cli @babylonjs/core
      Babylon 模块选择

    2. 新建一个Vue项目

      1
      vue create <yourprojectname>

    3. 静态导入PEP

    4. 在一个vue文件中的<templete>下新建一个<canvas>元素，设置其ref属性

      1
      <canvas ref="renderCanvas" touch-action="none"></canvas>

      将touch-action设置为"none"使其更适配PEP

    5. 在<script>中导入Babylon.js

      1
      import * as BABYLON from '@babylonjs/core'

接下来获取<canvas>元素。在javascript中使用

1
const canvas = document.getElementById('renderCanvas') // id与上面定义相同

在Vue中使用

1
const canvas = this.$refs.renderCanvas

得到<canvas>元素后创建Babylon引擎engine

1
const engine = new BABYLON.Engine(canvas,true) //第二个参数表示抗锯齿

通过引擎创建一个场景scene

1
const scene = new BABYLON.Scene(engine)

将一些摄像机（Camera），光源（Light），网格（Mesh）构成的物体等添加到场景中，例如

1
2
3
4
5
6
7
8
9
// 添加照相机
const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene)
// 设置照相机可以控制
camera.attachControl(canvas, true) // 第二个参数为noPreventDefault 不阻止默认行为
// 添加光源
const light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene)
const light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene)
// 添加网格图形
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene)

使用引擎的渲染方法进行实时渲染

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

为窗口添加resize事件

1
2
3
window.addEventListener('resize',()=>{
    engine.resize()
})

总结步骤如下

  • 由画布<canvas>创建引擎engine
  • 由引擎engine创建场景scene
  • 在场景scene中添加3D对象
  • 使用引擎engine的runRenderLoop方法对场景scene进行渲染
  • 添加窗口resize事件处理

使用以下代码进行测试

1
2
3
4
5
6
7
8
9
10
11
12
13
const canvas = document.getElementById('renderCanvas')
const engine = new BABYLON.Engine(canvas,true)
const scene = new BABYLON.Scene(engine)
// 添加照相机
const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene)
// 设置照相机可以控制
camera.attachControl(canvas, false)
// 添加光源
const light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
const light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene)
// 添加网格图形
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene)
engine.runRenderLoop(function(){scene.render()})

效果如下

经测试在不添加touch-action和PEP的情况下只有Chrome浏览器在移动端可以实现触屏操作