×
文章路径: 翻译 > babylonjs

00-入门

发表于1年前(Mar 23, 2017 12:25:00 PM)  阅读 935  评论 0

分类: 翻译 babylonjs

标签: 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>

 

发表评论