Babylon.js开发代码片段 1

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

camera关键代码

一、平面相机和透视相机

方便相机从三维转换为二维平面
2D代码如下（示例）：

      //模型位置
 	  camera.setTarget(new BABYLON.Vector3(-3.8, 0, -3.8));
      // This attaches the camera to the canvas
      camera.attachControl(canvas, false);
      //禁止场景
      scene.detachControl();
      //开启相机的弹跳行为
      camera.useBouncingBehavior = false;
      //开启相机的自动旋转行为
      camera.useAutoRotationBehavior = false;
      //开启相机的Framing行为
      camera.useFramingBehavior = false;
      //平行投影ORTHOGRAPHIC_CAMERA  透视投影PERSPECTIVE_CAMERA   关键参数
      camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
      ratio = window.innerHeight / window.innerWidth; //计算屏幕宽高比
      camera.orthoLeft = -13; //设置近平面的左侧边界
      camera.orthoRight = 13; //设置近平面的右侧边界
      camera.orthoTop = 13 * ratio; //设置近平面的顶部边界
      camera.orthoBottom = -13 * ratio; //设置近平面的底部边界 
      //设置为俯视图
      scene.activeCamera.beta = 0;
      scene.activeCamera.alpha = 0;

3D代码如下（示例）：

      //解除场景
     scene.attachControl();
      // This targets the camera to scene origin
      camera.setTarget(new BABYLON.Vector3(-3.8, 0, -3.8));
      // This attaches the camera to the canvas
      camera.attachControl(canvas, true);
      //开启相机的弹跳行为
      camera.useBouncingBehavior = true;
      //开启相机的自动旋转行为
      camera.useAutoRotationBehavior = true;
      //开启相机的Framing行为
      camera.useFramingBehavior = true;
      camera.minZ = -10;
      camera.maxZ = 100;
      camera.lowerBetaLimit = 0;
      camera.upperBetaLimit = Math.PI / 2.5
      camera.mode = BABYLON.Camera.PERSPECTIVE_CAMERA;

二、场景相机

代码如下：

     var Printers = function () {

      var speed1 = 45;
      var speed2 = 45;
      var frameCount = 200;

      //Animation Camera position
      var animateCameraToPosition = function (cam, speed, frameCount, newPos) {
        var ease = new BABYLON.CubicEase();
        ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
        BABYLON.Animation.CreateAndStartAnimation('at5', cam, 'position', speed, frameCount, cam.position, newPos,
          0, ease);
      }

      animateCameraToPosition(camera, speed1, frameCount, new BABYLON.Vector3(-4, 3, -1));

      //Animation Camera target
      var animateCameraTargetToPosition = function (cam, speed, frameCount, newPos) {

        var ease = new BABYLON.CubicEase();
        ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
        BABYLON.Animation.CreateAndStartAnimation('at5', cam, 'target', speed, frameCount, cam.target, newPos, 0,
          ease);
      }
      animateCameraTargetToPosition(camera, speed2, frameCount, new BABYLON.Vector3(player.position.x, player.position
        .y, player.position.z));

      // 这段代码可以打开渲染
      // scene.meshes.forEach(function(mesh){
      //     if(mesh.name.indexOf("") != -1){
      //         mesh.renderOverlay = false;
      //     }
      // });

      // 关闭渲染
      // var StudyArea = scene.getNodeByName("palyer");
      // StudyArea.renderOverlay = true;

    }

总结

通过camera可以实现场景的变换，借助Blender建模工具能很好的实现产品展示和虚拟场景的展示。