three.js之正投影摄像机与透视投影摄像机的区别

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Three框架</title><script src="../static/three.js-master/build/three.js"></script><style type="text/css">div#canvas-frame {border: none;cursor: pointer;width: 100%;height: 600px;background-color: #EEEEEE;}</style><script>var renderer;  // 渲染器function initThree() {width = window.innerWidth;  // 宽度height = window.innerHeight;  // 长度renderer = new THREE.WebGLRenderer({antialias : true  // 设置反锯齿
                });renderer.setSize(width, height);document.getElementById('canvas-frame').appendChild(renderer.domElement);renderer.setClearColor(0xFFFFFF, 1.0);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);  // 透视投影摄像机// camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 1000 );  // 正投影摄像机camera.position.x = 0;  // 设置相机的坐标camera.position.y = 0;camera.position.z = 600;camera.up.x = 0;camera.up.y = 1;  // 设置相机的上为y轴方向camera.up.z = 0;camera.lookAt(0, 0, 0);  // 相机lookAt的点一定显示在屏幕的正中央：利用这点，我们可以实现物体移动时，我们可以一直跟踪物体，让物体永远在屏幕的中央
}var scene;  // 创建场景function initScene() {scene = new THREE.Scene();}var light;  // 创建光源function initLight() {light = new THREE.AmbientLight(0xFF0000);  // 环境光源light.position.set(100, 100, 200);scene.add(light);light = new THREE.PointLight(0x00FF00);  // 点光源light.position.set(0, 0,300);scene.add(light);}var cube;function initObject() {var geometry = new THREE.CylinderGeometry( 70,100,200);  // 创建几何体  宽度  长度  深度var material = new THREE.MeshLambertMaterial( { color:0xFFFFFF} );  // 创建外表和设置颜色var mesh = new THREE.Mesh( geometry,material);  // Mesh是一个类，用来生成物体mesh.position = new THREE.Vector3(0,0,0);scene.add(mesh);  // 加到场景
            }function threeStart() {initThree();initCamera();initScene();initLight();initObject();animation();}function animation(){changeFov();renderer.render(scene, camera);requestAnimationFrame(animation);  // 循环调用
            }function setCameraFov(fov){camera.fov = fov;camera.updateProjectionMatrix();}function changeFov(){var txtFov = document.getElementById("txtFov").value;var val = parseFloat(txtFov);setCameraFov(val);}</script></head><body οnlοad="threeStart();"><div id="canvas-frame"></div><div>Fov:<input type="text" value="45" id="txtFov"/>(0到180的值)</div></body>
</html>

附带three.js代码，点击下载

上面代码是透视投影摄像机的效果，如下图所示：

正投影摄像机

camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 1000 );

它基本上各个方向大小都相同，没有透视的效果。如下图所示：

转载于:https://www.cnblogs.com/aaronthon/p/10984138.html

three.js之正投影摄像机与透视投影摄像机的区别相关推荐

Three.js - 摄像机的使用详解（透视投影摄像机、正交投影摄像机）
一.两种摄像机的区别与比较 Three.js 库提供了两种不同的摄像机:透视投影摄像机和正交投影摄像机. 透视投影摄像机:这种摄像机的效果更贴近真实世界.也就是物体离摄像机越远,它们就会被渲染得越小. ...
Three.js相机对象(正投影OrthographicCamera、透视投影PerspectiveCamera)
Three.js相机对象(正投影OrthographicCamera.透视投影PerspectiveCamera) Three.js相机对象(正投影OrthographicCamera.透视投影Per ...
unity中3dUI或者模型始终面向摄像机，跟随摄像机视角旋转丨视角跟随丨固定视角
视角跟随本脚本为一个目标跟随 unity中3dUI或者模型始终面向摄像机,跟随摄像机视角旋转使用方法超级简单,对于一个资深的Ctrl+cv程序极为友好不多讲解直接上代码代码模块 public ...
家用监控百科：什么是WiFi摄像机，WiFi摄像机都有哪些种类
什么是WiFi摄像机,WiFi摄像机都有哪些种类呢?今天速名网为大家带来家用监控摄像机的百科知识,关于WiFi摄像机很多人都不陌生,其实看名字就能知道大概的意思,就是连接WiFi之后,在手机或者电脑, ...
Node.js event loop 和 JS 浏览器环境下的事件循环的区别
Node.js event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...
js中onload和jQuery中的ready区别
js中onload和jQuery中的ready区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. ------>不能写多个(如果有多个,只会执行一个) $(do ...
Node.js: fs.readFile/writeFile 和 fs.createReadStream/writeStream 区别
1. 先说说各自的用法: How do I read files in node.js? fs = require('fs'); fs.readFile(file, [encoding], [call ...
css里面的let,js中let和var定义变量的区别
javascript 严格模式第一次接触let关键字,有一个要非常非常要注意的概念就是"javascript 严格模式",比如下述的代码运行就会报错: let hello = ' ...
JS放在head和放在body中的区别
JS放在head和放在body中的区别在HTML body部分中的JavaScripts会在页面加载的时候被执行. 在HTML head部分中的JavaScripts会在被调用的时候才执行.一.区别 ...

three.js之正投影摄像机与透视投影摄像机的区别

three.js之正投影摄像机与透视投影摄像机的区别相关推荐

最新文章

热门文章