00-入门 | babylonjs | 苍之涛工作室

babylonjs

一个基于webGL和JavaScript的开源3D引擎。

快速安装

使用BdbylonJS开发应用并不需要在您电脑上额外安装其他软件。同样客户运行您的应用也不需要安装任何东西。您待会可以在下面的入门教程中看到这一切。您可以通过查看文档结构图来了解一个大概，或者查看更详细的内容。

WebGL

Web图形库，也可以说它是一个JavsScript的API，用来在一些兼容WebGL的浏览器上展现可交互的3D图形以及2D图形，而且不需要别的任何插件。

JavaScript

同ECMAScript，JavaScript是一个动态的、基于原型的脚本语言，功能非常强大。广泛用于客户端（有时甚至用于服务端，本站就是）。BabylonJS就是基于JavsScript语言的。

快速入门

首先，我们下载最新版本的BabylonJS，然后，检查一下您的浏览器是否支持WebGL特性（支持的有Internet Explorer 11+/Firefox 4+/Google Chrome 9+/ Opera 15+...）。创建一个工程目录来放置刚下载的BabylonJS，并创建一个index.html文件，目录结构如下：

yourAwesomeProject
    |- index.html
    |- babylon.2.3.js

我们只在index.html文件里面写几句代码，以保证这个例子足够简单和简洁。HTML文件内容如下：

<!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.3.debug.js"></script>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

正如你所看到的，我们在body标签内插入了一个canvas标签，这个canvas标签将用来展示我们3D渲染的结果。我们再插入几句样式代码到head标签内：

<style>
    html, body {
        overflow: hidden;
        width   : 100%;
        height  : 100%;
        margin  : 0;
        padding : 0;
    }

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

现在我们还需要编写几句必要的javascript代码来运行我们的例子。将下面代码插入到body标签结束之前：

<script>
    window.addEventListener('DOMContentLoaded', function() {
        // your code here
    });
</script>

你可以看到，我们在DOMContentLoaded时间处理函数里面留下了一块地方，待会我们将在这块地方编写代码，以确保这些代码是在这个DOM加载完成后再执行。

下面编写的代码对于BabylonJS应用来说非常基础，就是创建一个场景，插入和显示一些物体（在这里，我们插入两个基础图形，球体和地面）。我们将一步步来实现。

首先我们需要拿到HTML文档中canvas元素的引用：

var canvas = document.getElementById('renderCanvas');

然后，加载Babylon 3D引擎：

var engine = new BABYLON.Engine(canvas, true);

然后，我们创建一个场景。为了使您的应用更灵活，我们建议先创建createScene方法。除了创建一个Babylon的Scene场景对象，createScene方法还添加了一个场景的基本要求：一个Camera摄像机，一个light光源，还有两个基础图形（球体和地面）。

var createScene = function() {
    // create a basic BJS Scene object
    var scene = new BABYLON.Scene(engine);

    // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

    // target the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());

    // attach the camera to the canvas
    camera.attachControl(canvas, false);

    // create a basic light, aiming 0,1,0 - meaning, to the sky
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

    // create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

    // move the sphere upward 1/2 of its height
    sphere.position.y = 1;

    // create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

    // return the created scene
    return scene;
}

现在，我们的createScene方法应准备好了，我们要做的就是去调用它：

var scene = createScene();

接下来的三行代码非常重要，他们用来告诉canvas，反复循环渲染上面的场景：

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

最后，我们来添加一点代码，以确保在canvas或window大小变化时，我们的场景也会跟着变化：

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

所有的工作都已完成，现在保存您的文件，然后用你最喜欢的浏览器打开index.html文件，您将会看到如下效果：

您可以点击上面的图片，看到一个BabylonJS平台提供的实时例子。

如果您的演示文档无法正常运行，您可以将下面的代码重新复制到您的index.html文件中：

<!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.3.debug.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width   : 100%;
            height  : 100%;
            margin  : 0;
            padding : 0;
        }

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
    <script>
        window.addEventListener('DOMContentLoaded', function(){
            // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, true);

            // createScene function that creates and return the scene
            var createScene = function(){
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);

                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);

                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());

                // attach the camera to the canvas
                camera.attachControl(canvas, false);

                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);

                // create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);

                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;

                // create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);

                // return the created scene
                return scene;
            }

            // call the createScene function
            var scene = createScene();

            // run the render loop
            engine.runRenderLoop(function(){
                scene.render();
            });

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
        });
    </script>
</body>
</html>

babylonjs

快速安装

WebGL

JavaScript

快速入门

发表评论