【Three.js】01-2 相機camera

常用的相機有:

  • PerspectiveCamera 透視相機
    perspective意為透視、遠景,應用于較現(xiàn)實的場景,會遵循近大遠小

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
參數(shù):
fov — 垂直視野角度
aspect — 長寬比(一般為渲染器、畫布長寬比)
near — 近距離
far — 遠距離

  • OrthographicCamera正交相機
    Orthographic意味正交、直角,應用于比較抽象的場景,不會因為投影改變物體大小比例

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
參數(shù):四個方位和遠近距離
一般定義一個控制三維場景范圍的系數(shù) s、渲染器的長寬比 k
left: -fru * asp
right: fru * asp
top: fru
bottom: -fru

PerspectiveCamera

var camera = new THREE.PerspectiveCamera(75, c_width/c_height, 1, 1000);

效果:


PerspectiveCamera透視相機.png

OrthographicCamera

var fru = 2;
var asp = c_width / c_height;
var camera = new THREE.OrthographicCamera(-fru*asp, fru*asp, fru, -fru, 1, 1000)

效果:


OrthograhicCamera正交相機.png

常用相機屬性方法:

  • camera.lookAt(x,y,z) 相機看向哪個坐標
    可以設置為場景對象的坐標
camera.lookAt(scene.position);
  • camera.position.set(x,y,z);相機位置設置
    分寫 camera.position.x = number...
camera.position.z = 4
//效果同上
//camera.position.set(0,0,4);
  • camera.up() 相機以哪個方向為上方,默認為y
//這里以z軸為上
camera.up.z = 1;

源代碼

var oCanvas = document.getElementById('canvas-wrap');
var c_width = 500;
var c_height = 500;
var scene = new THREE.Scene();

//透視相機
var camera = new THREE.PerspectiveCamera(75, c_width/c_height, 1, 1000);
//正交相機
// var fru = 2;
// var asp = c_width / c_height;
// var camera = new THREE.OrthographicCamera(-fru*asp, fru*asp, fru, -fru, 1, 1000)

//設置相機位置
camera.position.z = 4;
//效果同上
//camera.position.set(0,0,4);

//設置相機位置看向方向
camera.lookAt(scene.position);
// console.log(scene.position); //scene坐標為(0,0,0)

//設置相機所看方向,z軸為上
camera.up.set(0,0,1);

var renderer = new THREE.WebGLRenderer({canvas:  oCanvas});
renderer.setSize(c_width, c_height);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial({});
var cube = new THREE.Mesh(geometry, material);
var axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
cube.position.x = axesHelper.position.x = -1;
cube.position.y = axesHelper.position.y = -1;
scene.add(cube);
renderer.render(scene, camera);
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 今天的主題是three.js中用于觀察三維空間的攝像機。 1.認識camera 圖形學中的攝像機定義了三維空間到二...
    sakatayui醬閱讀 6,011評論 0 1
  • 本文主要是講解 Three.js 的相關概念,幫助大家對 Three.js 以及相關知識形成比較完整的理解。今年來...
    Simon王小白閱讀 8,744評論 2 9
  • 組成Three.js場景的基本組件 《創(chuàng)建場景》 場景中的基本組件:相機、光源和幾何體 THREE.Scene()...
    養(yǎng)薛定諤的貓閱讀 1,610評論 1 8
  • 對于我這個閑不住又閑得住的人,傲嬌的體質(zhì)難以言表。 通俗點說就是太以自我為中心,恨不得地球繞著自己轉。 經(jīng)常會主觀...
    RU小路路閱讀 144評論 0 0
  • 1、一進入社交網(wǎng)絡就直接引爆。一款受到歡迎的應用或服務、運營活動、信息,在進入社交網(wǎng)絡的一剎那就開始了自己的引爆歷...
    劉婷宇閱讀 214評論 0 0

友情鏈接更多精彩內(nèi)容