<!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. [Http] Difference between POST and GET?

    What is the difference between POST and GET HTTP requests? GET and POST are two different types of H ...

  2. 文件上传and富文本页面

    文件上传功能: 1.首先在index.jsp的界面上初始化一个表单. <body> <form enctype="multipart/form-data" act ...

  3. Linux系统封装成iso文件

    #安装所需软件包yum -y install createrepo mkisofs anaconda-runtime 根据root下的install.log文件,得到安装的软件包awk '/Insta ...

  4. shell-变量,字符串,数组,注释,参数传递

    Linux的Shell有很多种,常见的有Bourne Shell Bourne Again Shell C Shell K Shell Shell for Root 等,其中Bourne Again ...

  5. smoothscroll

    smoothscroll是一款jQuery插件,可以平滑地滚动到指定的地方. 可以解决chrome锚点失效的问题. 官方网站 http://iamdustan.com/smoothscroll/ gi ...

  6. 《ThinkPHP 5.0快速入门》 基础和路由

    一.基础: 创建项目:conposer create-project topthink/think tp5 --prefer-dist 创建项目模块:php think build --module ...

  7. char、varchar、nchar、nvarchar四种类型

    char,nchar是定长,如果没达到指定的长度时将自动以英文空格在其后面填充.优势在于速度较高.varchar,nvarchar属于变长,如果没有达到指定的长度时,不会将自动以英文空格在其后面填充. ...

  8. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一．GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二．querySelector( ...

  9. Python之Web前端Ajax

    Ajax: 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操 ...

  10. python中的类变量和对象变量，以及传值传引用的探究

    http://www.cnblogs.com/gtarcoder/p/5005897.html http://www.cnblogs.com/mexh/p/9967811.html