babylon101| 01. first steps （入门）

Babylonjs是利用HTML5中的canvas元素进行3D场景搭建的方法

• Playground 游乐场

在线搭建babylon三维场景，快速简便，既可以构建自己的场景，也可以查看别人的实例

一个模板:

var createScene = function () {

    // Create the scene space 创建场景
    var scene = new BABYLON.Scene(engine);

    // Add a camera to the scene and attach it to the canvas 添加相机，把场景绑定到canvas元素上
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    // Add lights to the scene 添加光线
    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);

    // This is where you create and manipulate meshes 添加场景中的实体
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {}, scene);

    return scene;

};

• 在自己的HTML页面中使用babylonjs

构建自己的场景需要引用BabylonJS JavaScript 脚本，为了支持移动设备的操作还需要加载PEP事件系统

在 //touch-action="none" for best results from PEP

效果如下：

• 注意：

1. MeshBuilder方法利用可选的参数设置形状实体，比原有的Mesh.Create()函数更加简便快捷
2. PEP事件框架是最新的触控响应框架，也可以使用hand.js框架（已经停止维护）

参考资料：https://doc.babylonjs.com/babylon101/first