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 onload="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 );
它基本上各个方向大小都相同,没有透视的效果。如下图所示:
three.js之正投影摄像机与透视投影摄像机的区别的更多相关文章
- 关于js中for in和foreach in的区别
js 中for in 和foreach in的区别 两个的作用都用来遍历对象,但为什么有了for in语句了还要foreach in语句呢,后来看了下foreach in开发的文档,foreach i ...
- JavaScript进阶(七)JS截取字符串substr 和 substring方法的区别
JS截取字符串substr 和 substring方法的区别 substr方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参 ...
- js正则表达式中test,exec,match方法的区别说明
js正则表达式中test,exec,match方法的区别说明 test test 返回 Boolean,查找对应的字符串中是否存在模式.var str = "1a1b1c";var ...
- js中加“var”和不加“var”的区别
JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill&q ...
- JS ,substr、 substring、charAt方法的区别
JS 截取字符串substr 和 substring方法的区别,需要的朋友可以参考下,根据需要自行选择. substr 方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.subs ...
- C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?
C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...
- JS和PHP和JAVA的正则表达式的区别(java没有分解符,java中的转义字符是\\)
JS和PHP和JAVA的正则表达式的区别(java没有分解符,java中的转义字符是\\) 一.总结 js正则:var patrn=/^[0-9]{1,20}$/; php正则:$pattern='/ ...
- JS中构造函数和普通函数有什么区别
JS中构造函数有普通函数有什么区别? 1.一般规则 构造函数都应该以 一个大写字母开头,eg: function Person(){...} 而非构造函数则应该以一个小写字母开头,eg: functi ...
- Node.js event loop 和 JS 浏览器环境下的事件循环的区别
Node.js event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...
随机推荐
- 视图push和presentViewController注意点
presentViewController: - (void)publishClick{ NSLog(@"发布按钮被点击"); PublishViewController *pub ...
- OpenCV图像旋转
图像旋转是指图像按照某个位置转动一定角度的过程,旋转中图像仍保持这原始尺寸.图像旋转后图像的水平对称轴.垂直对称轴及中心坐标原点都可能会发生变换,因此需要对图像旋转中的坐标进行相应转换. 如下图: 假 ...
- python基础知识(继承)
继承的基本语法 class Class(继承那个基类如果有多个基类用逗号隔开,如果没有就继承object): """ 类的帮助信息""" ...
- JAVA是否适合非科班者自学入行?石油工程专业从培训到JAVA入门自学亲身经历
如今的我已经过了三十而立的年纪,虽然在三十岁我没有立下任何事业,相反,还在茫茫苦海中挣扎. 但是我并不是没有收获.当然,曾经在我拥有大好青春年华的时候选择了迷茫,以至于当我有所明悟的时候,却已经错过了 ...
- Leetcode之70. Climbing Stairs Easy
Leetcode 70 Climbing Stairs Easy https://leetcode.com/problems/climbing-stairs/ You are climbing a s ...
- 【miscellaneous】多播的实现和需要注意的问题
多播的实现和需要注意的问题 前段时间研究了一小段时间的网络多播问题,自己很有感触,把自己的经历写出来,希望有需要的可以少走一些弯路. 先说一下原理,我觉得这个还是需 ...
- 【ARM-Linux开发】Linux的SOCKET编程详解
Linux的SOCKET编程详解 1. 网络中进程之间如何通信 进 程通信的概念最初来源于单机系统.由于每个进程都在自己的地址范围内运行,为保证两个相互通信的进 程之间既互不干扰又协调一致工作,操作系 ...
- Linux三剑客之sed深度实践讲解(下)
2.3.4分组替换 \( \) 和\1的使用说明 echo I am dongdaxia yingxiong. |sed 's#^.*am \([a-z].*\) yin.*$#\1#g' echo ...
- Linux三剑客之sed深度实践讲解(上)
sed sed 是Stream Editor(流编辑器)缩写,是操 作过滤和转换文本内容的强大工具.常用功能有增删改查,过滤,取行. 2.增删改查 2.1 增 a 追加文本到指定行后 i 插入文本到指 ...
- [转帖]传输层安全协议TLS 1.3 RFC 8446使互联网更快、更安全
传输层安全协议TLS 1.3 RFC 8446使互联网更快.更安全 2018-08-12 11:38:19作者:LINUX人稿源:开源社区 https://ywnz.com/linuxyffq/261 ...