亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

ThreeJs 認識相機

標簽:
Html5 JavaScript

一、前言

3D 世界中的相机是一个抽象的描述,其模拟了我们在真实世界中透过相机来看世界的这么一个场景。当我们透过相机来看这个世界时,在相机的镜头可见范围内的物体就仍然被我们所见到,而不在其范围内的物体则好像被裁剪出去了。最后,当我们按下拍照按钮后,原本我们所见的真实的 3 维世界则变成了一张 2D 的相片。

我们在选择不同相机的镜头时,所得到的效果是不一样的。在 3D 世界中,选择不同的相机,就可以看成是选择不同的相机镜头,其得到的效果也是不一样的。

二、概述

图片描述

相机本身就是一个 Object3D 对象。一般我们常用的是 PerspectiveCamera 和 OrthographicCamera。

三、认识相机

1.Camera

图片描述

2.OrthographicCamera

图片描述

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );

图片描述

3.PerspectiveCamera

图片描述

var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );

图片描述

4.StereoCamera

图片描述

图片描述

5.CubeCamera

图片描述

// Create cube camera
var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
scene.add( cubeCamera );

// Create car
var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget } );
var car = new Mesh( carGeometry, chromeMaterial );
scene.add( car );

// Update the render target cube
car.setVisible( false );
cubeCamera.position.copy( car.position );
cubeCamera.update( renderer, scene );

// Render the scene
car.setVisible( true );
renderer.render( scene, camera );

图片描述

6.ArrayCamera

图片描述

var cameras = [];

				for ( var y = 0; y < AMOUNT; y ++ ) {

					for ( var x = 0; x < AMOUNT; x ++ ) {

						var subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
						subcamera.bounds = new THREE.Vector4( x / AMOUNT, y / AMOUNT, SIZE, SIZE );
						subcamera.position.x = ( x / AMOUNT ) - 0.5;
						subcamera.position.y = 0.5 - ( y / AMOUNT );
						subcamera.position.z = 1.5;
						subcamera.position.multiplyScalar( 2 );
						subcamera.lookAt( 0, 0, 0 );
						subcamera.updateMatrixWorld();
						cameras.push( subcamera );

					}

				}

				camera = new THREE.ArrayCamera( cameras );
				camera.position.z = 3;

图片描述

四、总结

在目前的实际项目中,一般使用的就是 PerspectiveCamera,其他相机几乎没有用过。因此,先掌握好 PerspectiveCamera 应该就能应会大部分需求了。

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
移動開發工程師
手記
粉絲
4
獲贊與收藏
29

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消