webGL 3D babylon.js -- 02 形状

https://www.jianshu.com/p/0823474c4fd9
衔接上一个内容

接下来让我们来讨论一下形状
在three.js中有不少形状的实例 https://threejs.org/docs/ ，这里我们也看看babylon的简单形状

首先简化一下整个目录，使场景灯光和创建内容分割开来

image.png

首先在项目 js 文件夹中创建一个js文件夹，放入上次我们写的main.js，并创建一个新的Scene.js

首先在index.html中引入这两个内容

<script src="js/Scene.js"></script>
<script src="js/main.js"></script>

整个html基本没改变

image.png

新创建的 Scene.js 内容中删除了原本的创建球体和地板内容，简化后如下

const Scene = function (canvas) {

  let self = {}

  function init () {
    // 启动 3D 引擎
    const 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);

    // 创建一个 FreeCamera,设置位置到 (x:0, y:5, z:-10)
    // var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
    // camera.setTarget(BABYLON.Vector3.Zero()); //指向原点


    // 换成围绕相机
    const camera = new BABYLON.ArcRotateCamera("Camera", 1.0, 1.0, 12, BABYLON.Vector3.Zero(), scene);

    // 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);
    light.intensity = 0.4  // 调整灯光



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

    // the canvas/window resize event handler
    window.addEventListener('resize', function(){
      engine.resize();
    });

    //将内部值赋给外面
    self.engine = engine
    self.scene = scene

  }
  init()

  return self
}

而我上次写的main.js就可以简化成如下内容，等于用这个main来控制所有文件的启动顺序

let DB = {}  //全局可控内容 Databus

window.addEventListener('DOMContentLoaded', function() {
  var canvas = document.getElementById('renderCanvas'); // 获取html的元素
  start(canvas)
});


function start (canvas) {
  const s = new Scene(canvas)
  DB.engine = s.engine  //保存两个内容到全局
  DB.scene = s.scene

  new TestGeometries(DB.scene)

}

其中出现的 TestGeometries 这个function，我们就可以在其中试验各种模型

新建一个 TestGeometries.js 文件在 js 文件夹中，然后在html中引用

image.png

文件中内容如下

function TestGeometries (scene) {

  // 创建一个盒子
  //参数为: 名字,盒子大小, 它们将放到场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认表现那么最后两个参数可以忽略: BABYLON.Mesh.CreateBox("box", 6.0, scene);
  const box = BABYLON.Mesh.CreateBox("box", 1.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);
  // box.position.x = -1;  //移动一下它的默认位置，x轴移到-3的位置

  // 创建一个球体
//参数为: 名字, 细分段数 (高度细节或不需), 大小, 将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认的表现那么最后两个参数可以忽略: BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);
  const sphere = BABYLON.Mesh.CreateSphere("sphere", 8.0, 1.0, scene, false,  BABYLON.Mesh.DEFAULTSIDE);
  sphere.position.x = -1.5;  //移动一下x轴的默认位置


  // 创建一个平面 (注意这个面是竖立着的)
  //参数为: 名字, 大小, 和将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向
  const plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false, BABYLON.Mesh.DOUBLESIDE);  //这里怕看不出来用了双面贴图
  // const plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
  plane.position.y = -3;
  plane.rotation.x = Math.PI / 2  //转动x轴成平面


  // 创建一个盘片 或着一个规则多边形 这里创建了一个8边型
  const disc = BABYLON.Mesh.CreateDisc("disc", 1, 8, scene, false, BABYLON.Mesh.DOUBLESIDE);
  // 参数为: 名字, 半径, 边数, 场景, 可更新否和可选的朝向(参见下面). 如果你需要默认的表现,那么最后两个参数参数可以忽略:
  // const disc = BABYLON.Mesh.CreateDisc("disc", 1, 8, scene);
  disc.position.x = -3;
  disc.rotation.x = Math.PI / 2  //转动x轴成平面


  //创建一个圆柱体
  // 参数为: 名称, 高度, 顶直径, 底直径, 边数, 高向细分度, 场景, 可更新否和可选的朝向(参见下面). 如果你需要默认表现,那么最后两个参数可以忽略:
  const cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 1, 1, 6, 1, scene);
  cylinder.position.x = 1.5;

  // 创建一个环体
  // var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);
  // 参数为: 名称, 直径, 厚度, 边数(高度细节或不是), 场景, 可更新否和可选的朝向(参见下面). 如果你使用默认表现那么最后两个参数可忽略 :
  const torus = BABYLON.Mesh.CreateTorus("torus", 1, 0.5, 10, scene);
  torus.position.x = 3;

  // 创建一个结
  // const knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);
  // 参数为: 名称, 半径, tube, 半径上分段数, tubularSegments, p, q, 场景, 可更新否和可选的朝向(参见下面). 如果你使用默认的表现那么最后的两个参数可以忽略 :
  const knot = BABYLON.Mesh.CreateTorusKnot("knot", 1, 0.2, 64, 32, 2, 3, scene);
  knot.position.x = 5.5;


  // 创建线
  // 参数为: 名称, [都好分隔的向量数组], 场景.
  const lines = BABYLON.Mesh.CreateLines("lines", [
    new BABYLON.Vector3(-2, 0, 0),
    new BABYLON.Vector3(2, 0, 0),
    new BABYLON.Vector3(0, 0, -2),
    new BABYLON.Vector3(0, 0, 2),
    new BABYLON.Vector3(-2, 0, 0)
  ], scene);
  lines.position.y = 3


  //绘制点划线
  // 参数为 : 名称, [三元向量数组], 划线大小, 间隙大小, 段划线数, 场景. 作为许多线段, 每条段先都是以三元向量组的方式呈现在空间里. 上面函数设置了这条点划线里线段的数量, 每段都是由两个连续三元向量定义. 划线大小 和 间隙大小 是指点划线里每个划线和之间间隙的相对大小.
  const dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines",
    [
      new BABYLON.Vector3(-2, 0, 0),
      new BABYLON.Vector3(2, 0, 0),
      new BABYLON.Vector3(0, 0, -2),
      new BABYLON.Vector3(0, 0, 2)
    ]
    , 1, 1, 100, scene);
  dashedlines.position.x = -4
  dashedlines.position.y = 3

}

然后刷新一下网页就可以看到结果

image.png

嗯，虽然看起来灰灰的，但都显示出来了

这里只列出了常用的几个模型类型，还有一些不算常用，有兴趣的可以在官方深入研究一下
http://doc.babylonjs.com/babylon101/discover_basic_elements

下次我们介绍材质，这样东西就不会再灰灰的了