babylon101

第一步


目录

第一步

Babylon.JS是使用HTML5 canvas元素在Web上编写3D环境的好方法。

操场

这是制作自己场景的最快捷，最简单的方法。创建一个3D场景很简单，只需添加一个摄像头，灯光和3D形状（网格）就可以了。

该 游乐场 是一个网站，其中有你需要创建自己的场景或编辑现有的一切。更多关于游乐场。 更多关于游乐场.

在操场内创建场景的模板是：

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
    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

在编写自己的HTML时，您只需要将createScene函数嵌入到带有 < script > 标记的HTML页面结构中，以及其他一些项目。您需要加载BabylonJS JavaScript代码。还可以在平板电脑和手机上使用BabylonJS使用指针事件而不是鼠标事件，因此也需要加载PEP事件系统。

此外，必须将canvas元素添加到body中，因为这是渲染3D场景的位置，并在代码中添加了引用变量canvas。您还需要在创建场景的函数之前生成BabylonJS引擎。

最后，添加代码来调用场景。这使得引擎能够在循环中连续渲染场景，并在浏览器调整大小时调整其大小。

HTML 模板

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>

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

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

        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>

   <body>

    <canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP

    <script>
        var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
        var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        /******* Add the create scene function ******/
        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
            var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), 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);

            // Add and manipulate meshes in the scene
            var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);

            return scene;
        };
        /******* End of the create scene function ******/    

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

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () { 
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () { 
                engine.resize();
        });
    </script>

   </body>

</html>

笔记

  1. 上面的示例使用较新的MeshBuilder方法创建形状，其中形状的变量在options对象参数中设置，并且比旧形式的BABYLON.Mesh.Create ....具有一些优势，它使用形状变量的参数列表。大多数Playground都使用旧方法，因为许多是在MeshBuilder存在之前创建的。

  2. PEP用于指针事件是最近的建议，较早的建议是使用名为hand.js的系统。尽管hand.js不再维护，但两者都有效。您仍然可以在文档中找到对hand.js的引用。

下一步

现在，您已准备好进一步了解如何通过访问 Set Shapes创建更多形状，如球体，圆柱体，盒子等

进一步阅读外部

BabylonJS 论坛
PEP 和 hand.js

有用的链接外部

BabylonJS 主要网站
BabylonJS Playground
PEP Github
hand.js Github