webgl學習-babylon攝像機

在babylon中，場景並沒有什麼好說的，基本都是固定寫法：

//獲得畫布

 var canvas = document.getElementById('renderCanvas')

 // Load the 3D engine 加載

 var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true})

 // This creates a basic Babylon Scene object (non-mesh) 設置場景

 var scene = new BABYLON.Scene(engine); 

在babylon中提供了很多種相機，其中還包括vr相機。在這裡就不一一說了，具體大家可以看：

https://www.babylonjs.com.cn/babylon101/cameras.html

在接下來的場景中主要用到了弧形相機，基本用法為：

//創建相機，參數分別為：相機名稱，alpha, beta, radius, target position, scene

 var camera = new BABYLON.ArcRotateCamera('camera1', Math.PI / 2, Math.PI, 50, new BABYLON.Vector3(0, 0, 0), scene);

 // 將相機對準一個特地的位置

 camera.setTarget(BABYLON.Vector3.Zero());

 

 

 // 設置相機可控制

 camera.attachControl(canvas, true); 

同時我們可能還需要對相機進行一些特殊設置，這些設置有時候是非常有用的，比如你如果希望相機不要跑到地面一些，你就需要設置上下移動範圍，以及遠近移動範圍：

//對象上下移動範圍

 camera.lowerBetaLimit = Math.PI/2-Math.PI/6;

 camera.upperBetaLimit = Math.PI/2+Math.PI/6;

 //對象左右移動範圍

 camera.lowerAlphaLimit = -Math.PI/2-Math.PI/5;

 camera.upperAlphaLimit = -Math.PI/2+Math.PI/5;

 //對象遠近移動範圍

 camera.lowerRadiusLimit = -Math.PI/3;

 camera.upperRadiusLimit = Math.PI/3;

 

 camera.wheelPrecision = 0.5; //電腦滾輪速度 越小靈敏都越高

 camera.pinchPrecision = 1; //手機放大縮小速度 越小靈敏都越高