webGL 3D 从 three.js 到 babylon.js -- 01

试了多个月的three.js，已经做出一个多人在线的游戏，可经历了多次写入新功能，对于这个渲染引擎做一个游戏，实在需要太多劳心的内容，决定从今天开始试试微软的babylon.js

最初级的babylon教程可以看这个
http://ljzc002.github.io/BABYLON/HTML/001Basic_scene.html

html 中的内容很简单了

然后自己写的main.js的内容如下

window.addEventListener('DOMContentLoaded', function() {
  // All the following code is entered here.
  var canvas = document.getElementById('renderCanvas');
  start(canvas)
});


function start (canvas) {
  // get the canvas DOM element

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

    // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
    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;
    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();
  });
}

把上面的代码码出来就有了一个最简单的场景

对于从three切换过来的我，这样的相机控制实在不舒服
那就把camera的内容切换成

    var camera = new BABYLON.ArcRotateCamera("Camera", 1.0,
    1.0, 12, BABYLON.Vector3.Zero(), scene);

image.png

做到这里你应该就和我一样看到这个基本球配面的内容，这里就可以用鼠标自由转动了～～