×
文章路径: 翻译 > babylonjs

01-创建一个基础场景

发表于1年前(Mar 23, 2017 7:49:00 PM)  阅读 1439  评论 0

分类: 翻译 babylonjs

标签: babylonjs

在本教程,我们将会使用Babylon.js创建一个基础的3D场景。

在上面基础场景里面有两个基础图形。

在开始前,请您确认您的浏览器是否支持WebGL特性(Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+等等是支持的)。

HTML代码部分

首先,创建一个基本的HTML5 web页面:

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

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

   <body>
   </body>

</html>

CSS样式代码部分

为了让canvas最大化显示,我们在head标签中添加CSS样式代码:

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

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

框架JavaScript代码引入部分

现在我们加载我们框架需要的文件。在CSS代码后面,(但是依然在head标签内)加入下面代码:

<script src="babylon.js"></script>
<script src="hand.js"></script>
<script src="cannon.js"></script>  <!-- optional physics engine -->
<!-- <script src="Oimo.js"></script>  New physics engine -->

(如果您还没有上面的文件,您可以在下面地址找到他们:https://github.com/BabylonJS/Babylon.js,  http://handjs.codeplex.com/

接下来,我们在body内添加HTML5的canvas元素,用来绘制我们的场景。

<canvas id="renderCanvas"></canvas>

现在,我们开始写JavaScript代码。依然是在body代码内部,我们添加:

<script>

  // Get the canvas element from our HTML above
  var canvas = document.getElementById("renderCanvas");

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

接下来,我们将添加创建场景的代码。为了使您的应用更灵活,我们建议先创建createScene方法。除了创建一个Babylon的Scene场景对象,createScene方法还添加了一个场景的基本要求:一个Camera摄像机,一个light光源,还有一些图形和物体。

所以现在我们已经将整个createScene方法加入到了web页面:

  // This begins the creation of a function that we will 'call' just after it's built
  var createScene = function () {

    // Now create a basic Babylon Scene object 
    var scene = new BABYLON.Scene(engine);

    // Change the scene background color to green.
    scene.clearColor = new BABYLON.Color3(0, 1, 0);

    // This creates and positions a free camera
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

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

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

    // This creates a light, aiming 0,1,0 - to the sky.
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    // Dim the light a small amount
    light.intensity = .5;

    // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

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

    // Let's try our built-in 'ground' shape.  Params: name, width, depth, subdivisions, scene
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);

    // Leave this function
    return scene;

  };  // End of createScene function

确实,上面的方法有点复杂,但是不要被它吓到。在接下来的教程中,我们会学习创建lights(光源),cameras(摄像头)的参数和属性,以及如何创建图形等等。现在最主要的是记住createScene方法已经包含了创建场景的必要条件,包括:

  • 一个Babylon Scene(场景)对象
  • 一个绑定好的camera(摄像头)对象
  • 一个对好焦点的light(光源)对象
  • 一个坐标为0,1,0的球体(我们将它往y轴正方向移动了)
  • 一个坐标为0,0,0(默认坐标)的平面

接下来还有三件事我们需要做。首先,在刚刚完成的代码后面添加调用createScene方法的代码:

  // Now, call the createScene function that you just finished creating
  var scene = createScene();

然后,最重要的是添加循环渲染:

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

最后,添加canvas/window的重置大小处理事件,这个是可选的,但是非常有用:

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

现在,所有的JavaScript代码应添加完毕,确保您正确关闭了script,body和html标签。HTML5页面的最后三行代码应该是:

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

如果您完成了,保存您的文件(同babylon.js,hand.js和cannon.js在同一目录)用您开始准备的支持WebGL的浏览器打开。您会看到一个新的场景以3D的方式展现在canvas里面。

您可以在这里找到本章createScene方法代码的精确复制。同时您可以在线实时的进行查看。还可以使用Get.zip选项来下载整个index.html文件。

遇到了问题?

下面是整个web页面的代码:

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>Babylon - Basic scene</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="babylon.js"></script>
   <script src="hand.js"></script>
   <script src="cannon.js"></script> <!-- optional physics engine -->
</head>
<body>
   <canvas id="renderCanvas"></canvas>
   <script type="text/javascript">
      // Get the canvas element from our HTML below
      var canvas = document.querySelector("#renderCanvas");
      // Load the BABYLON 3D engine
      var engine = new BABYLON.Engine(canvas, true);
      // -------------------------------------------------------------
      // Here begins a function that we will 'call' just after it's built
      var createScene = function () {
         // Now create a basic Babylon Scene object
         var scene = new BABYLON.Scene(engine);
         // Change the scene background color to green.
         scene.clearColor = new BABYLON.Color3(0, 1, 0);
         // This creates and positions a free camera
         var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
         // This targets the camera to scene origin
         camera.setTarget(BABYLON.Vector3.Zero());
         // This attaches the camera to the canvas
         camera.attachControl(canvas, false);
         // This creates a light, aiming 0,1,0 - to the sky.
         var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
         // Dim the light a small amount
         light.intensity = .5;
         // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
         var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
         // Move the sphere upward 1/2 its height
         sphere.position.y = 1;
         // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene
         var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
         // Leave this function
         return scene;
      }; // End of createScene function
      // -------------------------------------------------------------
      // Now, call the createScene function that you just finished creating
      var scene = createScene();
      // 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>

更深入一步

在基础场景教程里,我们主要讨论的东西都包含在createScene方法里面(上面虚线之间的代码)。我们假定您已经知道如何将createScene方法加入到HTML5文档里(就如上面)。

记住这个页面代码布局,createScene方法是核心部分。当您使用过一段时间的Babylon.js Playground,您会发现createScene方法非常好用,您可以很容易的复制或者粘贴他到playground的编辑窗口,这样可以很方便然别人来帮助你解决问题,同样,您也可以很方便的帮助别人解决问题。

下一步

现在我们将进一步学习如何创建更多的元素,像球体,圆柱体,盒子等等。

下一章节-基础元素

ps:2.5版本以后应该是已经没有hand.js这个文件,可能已经合并到babylon.js文件里面了。(译者注)

发表评论