曲靖網(wǎng)站制作今日新聞?wù)?/h1>
👨??? 主頁： gis分享者
👨??? 感謝各位大佬 點贊👍 收藏? 留言📝 加關(guān)注?!
👨??? 收錄于專欄：threejs gis工程師
文章目錄
- 一、🍀前言
- 1.1 ??THREE.PerspectiveCamera透視相機(jī)
- 1.2 ??THREE.OrthographicCamera正交相機(jī)
- 二、🍀PerspectiveCamera透視相機(jī)和OrthographicCamera正交相機(jī)對比
- 1. ??實現(xiàn)思路
- 2. ??代碼樣例
一、🍀前言
本文詳細(xì)介紹如何基于threejs在三維場景中PerspectiveCamera透視相機(jī)和OrthographicCamera正交相機(jī)進(jìn)行對比，親測可用。希望能幫助到您。一起學(xué)習(xí)，加油！加油！
1.1 ??THREE.PerspectiveCamera透視相機(jī)
THREE.PerspectiveCamera這一投影模式被用來模擬人眼所看到的景象，它是3D場景的渲染中使用得最普遍的投影模式。
構(gòu)造函數(shù)：
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 攝像機(jī)視錐體垂直視野角度
aspect — 攝像機(jī)視錐體長寬比
near — 攝像機(jī)視錐體近端面
far — 攝像機(jī)視錐體遠(yuǎn)端面
這些參數(shù)一起定義了攝像機(jī)的viewing frustum（視錐體）。
屬性：
方法：
1.2 ??THREE.OrthographicCamera正交相機(jī)
THREE.OrthographicCamera正交相機(jī)在這種投影模式下，無論物體距離相機(jī)距離遠(yuǎn)或者近，在最終渲染的圖片中物體的大小都保持不變。
這對于渲染2D場景或者UI元素是非常有用的。
構(gòu)造函數(shù)：
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — 攝像機(jī)視錐體左側(cè)面。
right — 攝像機(jī)視錐體右側(cè)面。
top — 攝像機(jī)視錐體上側(cè)面。
bottom — 攝像機(jī)視錐體下側(cè)面。
near — 攝像機(jī)視錐體近端面。
far — 攝像機(jī)視錐體遠(yuǎn)端面。
這些參數(shù)一起定義了攝像機(jī)的viewing frustum（視錐體）。
屬性：
方法：
二、🍀PerspectiveCamera透視相機(jī)和OrthographicCamera正交相機(jī)對比
1. ??實現(xiàn)思路
- 1、初始化renderer渲染器
- 2、初始化Scene三維場景scene。
- 3、初始化PerspectiveCamera透視相機(jī)camera，定義相機(jī)位置 camera.position。
- 4、初始化THREE.AmbientLight環(huán)境光源，scene場景加入環(huán)境光源。創(chuàng)建THREE.DirectionalLight平行光源directionalLight，設(shè)置平行光源位置，scene場景加入平行光源。
- 5、加載幾何模型：創(chuàng)建THREE.PlaneGeometry平面幾何體planeGeometry，創(chuàng)建THREE.MeshLambertMaterial漫反射材質(zhì)planeMaterial，傳入?yún)?shù)planeGeometry和planeMaterial創(chuàng)建平面幾何體網(wǎng)格對象plane，設(shè)置plane投影，設(shè)置plane的位置和旋轉(zhuǎn)角度，場景scene中加入plane。在plane上循環(huán)創(chuàng)建立方體網(wǎng)格對象cube，將plane鋪滿，具體代碼參考代碼樣例。
- 6、加入gui控制，實現(xiàn)PerspectiveCamera透視相機(jī)和OrthographicCamera正交相機(jī)的切換，進(jìn)行效果對比。加入stats監(jiān)控器，監(jiān)控幀數(shù)信息。
2. ??代碼樣例
<!DOCTYPE html><html><head><title>PerspectiveCamera透視相機(jī)和OrthographicCamera正交相機(jī)對比</title><script type="text/javascript" src="../libs/three.js"></script><script type="text/javascript" src="../libs/stats.js"></script><script type="text/javascript" src="../libs/dat.gui.js"></script><style>body {/* set margin to 0 and overflow to hidden, to go fullscreen */margin: 0;overflow: hidden;}</style>
</head>
<body><div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div><!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">// once everything is loaded, we run our Three.js stuff.function init() {var stats = initStats();// create a scene, that will hold all our elements such as objects, cameras and lights.var scene = new THREE.Scene();// create a camera, which defines where we're looking at.var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = 120;camera.position.y = 60;camera.position.z = 180;// create a render and set the sizevar renderer = new THREE.WebGLRenderer();renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));renderer.setSize(window.innerWidth, window.innerHeight);// create the ground planevar planeGeometry = new THREE.PlaneGeometry(180, 180);var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});var plane = new THREE.Mesh(planeGeometry, planeMaterial);// rotate and position the planeplane.rotation.x = -0.5 * Math.PI;plane.position.x = 0;plane.position.y = 0;plane.position.z = 0;// add the plane to the scenescene.add(plane);var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {var rnd = Math.random() * 0.75 + 0.25;var cubeMaterial = new THREE.MeshLambertMaterial();cubeMaterial.color = new THREE.Color(rnd, 0, 0);var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);cube.position.y = 2;scene.add(cube);}}var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);directionalLight.position.set(-20, 40, 60);scene.add(directionalLight);// add subtle ambient lightingvar ambientLight = new THREE.AmbientLight(0x292929);scene.add(ambientLight);// add the output of the renderer to the html elementdocument.getElementById("WebGL-output").appendChild(renderer.domElement);// call the render functionvar step = 0;var controls = new function () {this.perspective = "Perspective";this.switchCamera = function () {if (camera instanceof THREE.PerspectiveCamera) {camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);camera.position.x = 120;camera.position.y = 60;camera.position.z = 180;camera.lookAt(scene.position);this.perspective = "Orthographic";} else {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.x = 120;camera.position.y = 60;camera.position.z = 180;camera.lookAt(scene.position);this.perspective = "Perspective";}};};var gui = new dat.GUI();gui.add(controls, 'switchCamera');gui.add(controls, 'perspective').listen();// make sure that for the first time, the// camera is looking at the scenecamera.lookAt(scene.position);render();function render() {stats.update();// render using requestAnimationFramerequestAnimationFrame(render);renderer.render(scene, camera);}function initStats() {var stats = new Stats();stats.setMode(0); // 0: fps, 1: ms// Align top-leftstats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';document.getElementById("Stats-output").appendChild(stats.domElement);return stats;}}window.onload = init</script>
</body>
</html>
效果如下：
