<!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之正投影摄像机与透视投影摄像机的区别的更多相关文章

  1. 关于js中for in和foreach in的区别

    js 中for in 和foreach in的区别 两个的作用都用来遍历对象,但为什么有了for in语句了还要foreach in语句呢,后来看了下foreach in开发的文档,foreach i ...

  2. JavaScript进阶(七)JS截取字符串substr 和 substring方法的区别

    JS截取字符串substr 和 substring方法的区别 substr方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参 ...

  3. js正则表达式中test,exec,match方法的区别说明

    js正则表达式中test,exec,match方法的区别说明 test test 返回 Boolean,查找对应的字符串中是否存在模式.var str = "1a1b1c";var ...

  4. js中加“var”和不加“var”的区别

    JavaScript 拥有动态类型.这意味着相同的变量可用作不同的类型: var x // x 为 undefined var x = 6; // x 为数字 var x = "Bill&q ...

  5. JS ,substr、 substring、charAt方法的区别

    JS 截取字符串substr 和 substring方法的区别,需要的朋友可以参考下,根据需要自行选择. substr 方法 返回一个从指定位置开始的指定长度的子字符串. stringvar.subs ...

  6. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  7. JS和PHP和JAVA的正则表达式的区别（java没有分解符，java中的转义字符是\\）

    JS和PHP和JAVA的正则表达式的区别(java没有分解符,java中的转义字符是\\) 一.总结 js正则:var patrn=/^[0-9]{1,20}$/; php正则:$pattern='/ ...

  8. JS中构造函数和普通函数有什么区别

    JS中构造函数有普通函数有什么区别? 1.一般规则 构造函数都应该以 一个大写字母开头,eg: function Person(){...} 而非构造函数则应该以一个小写字母开头,eg: functi ...

  9. Node.js event loop 和 JS 浏览器环境下的事件循环的区别

    Node.js  event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...

随机推荐

  1. Nginx日志中的金矿

    http://www.infoq.com/cn/articles/nignx-log-goldmine/

  2. Java泛型(3)：泛型方法

    泛型还可以同样运用在方法.是否拥有泛型方法与其所在的类是否是泛型类没有关系. 无论何时,只要你能做到,都应该尽量使用泛型方法,如果泛型方法可以取代将整个类整个类泛型化,那么就应该只使用泛型方法. 下面 ...

  3. charles修改请求体内容

    charles修改请求体内容 问:什么是请求体?答:客户端向服务端发出的请求简称请求体,请求体中包含有许许多多的参数,每一个参数都有其特定的意义.多一个或者少一个则服务端给你返回的响应体就会不一样 一 ...

  4. VMware中为CentOS配置静态ip并可访问网络-windows下的VMware

    首先确保虚拟网卡(VMware Network Adapter VMnet8)是开启的,然后在windows的命令行里输入“ipconfig /all”,找到VMware Network Adapte ...

  5. 【HANA系列】SAP HANA SQL IFNULL和NULLIF用法与区别

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL IFN ...

  6. Web后台管理系统

    开发语言:C# 数据库:sql2008 登录页面 后台管理首页 部分操作页面 后台管理系统,界面简洁,大方,操作简单,所有功能可定制开发. 后台管理系统制作 如果您有需要后台管理系统制作,请扫描添加微 ...

  7. k8s nginx-ingress 上传文件大小限制

    k8s集群中,将图片或是文件上传到文件服务器上, 可是大于1M是就会报错 413 Request Entity Too Large 以前用的是:    # ingress.kubernetes.io/ ...

  8. Redis的大白话解释

    Redis的官方解释可以百度,这里讲redis缓存为啥速度非常快! 这么说吧,别人问你什么是“redis”,如果你知道,你可以直接吧啦吧啦一大堆,其实这个时候你的大脑就类似redis缓存,别人问的“r ...

  9. 【VS开发】list控件的InsertColumn方法出错

    今天在写一个获取磁盘信息的小程序,通过list控件显示各磁盘信息.我在属性页(CPropertyPage)的构造函数中,调用list控件的InsertColumn方法,编译链接都通过了,但运行时冒出了 ...

  10. 论文阅读 | HotFlip: White-Box Adversarial Examples for Text Classification

    [code] [pdf] 白盒 beam search 基于梯度 字符级