初学WebGL引擎-BabylonJS：第1篇-基础构造

继续上篇随笔

步骤如下：

一：http://www.babylonjs.com/中下载源码。获取其中babylon.2.2.js。建立gulp项目

二：参见http://doc.babylonjs.com/部分，建立第一个demo

以下是个人完成后的demo分享

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
    <title>Babylon - Getting Started</title>
    <!-- link to the last version of babylon -->
    <script src="babylon.2.2.max.js"></script>
</head>
<style>
    html, body {
        overflow: hidden;
        width   : 100%;
        height  : 100%;
        margin  : 0;
        padding : 0;
    }

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

<body>
    <canvas id="renderCanvas"></canvas>
    <script>
    window.addEventListener('DOMContentLoaded', function() {
        //获取画布对象
       var canvas = document.getElementById('renderCanvas');
       //加载巴比伦3D引擎
       var engine = new BABYLON.Engine(canvas, true);
       //创建场景
       var createScene = function() {
            // 通过引擎创建基本场景
            var scene = new BABYLON.Scene(engine);

            // 创建一个开放免费的相机，地点位于x:0(横向距离), y:5(高度), z:-10(纵向距离)
            var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 5,-10), scene);

            // 相机到场景的起源
            camera.setTarget(BABYLON.Vector3.Zero());

            // 相机放置画布
            camera.attachControl(canvas, false);

            // 创建基本光源, 目标位于 x:0,y:1,z:0 -(由天空出现)
            var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

            // 创建一个内置的“球”的形状,它的构造函数包括5个参数:名称、宽度、深度、细分,场景(例子中仅4个参数)
            var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

            // 球向上移动高的二分之一距离
            sphere.position.y = 1;

            // 创建一个内置的“地面”，它的构造函数包括5个参数:名称、宽度、深度、细分,场景
            var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

            // 返回该场景
            return scene;
        }
        //赋予该场景于变量
        var scene = createScene();
        //在引擎中循环运行这个场景
        engine.runRenderLoop(function(){
            scene.render();
        });
        //追加事件：帆布与大小调整程序
        window.addEventListener('resize', function(){
            engine.resize();
        });
    });

</script>
</body>
</html>

---

完成这个后，一个初步的思路达成。

一个基础构造分为了：镜头+渲染+场景。辅助部分包括光源+模型+画布

坐标点的三部分：X（长）,Y（高度）,Z（深度）

BABYLON对象下拥有相机的定义，光源的定义

BABYLON.Mesh对象下有个简单物体的定义

---

接着便发现了更合适的学习方式：http://www.babylonjs-playground.com