<!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. QQ群关系数据库处理

    1.附加数据库 EXEC sp_attach_single_file_db @dbname= 'GroupData1_Data' , @physname= '/media/disk4/share/Da ...

  2. Android OKHttp 可能你从来没用过的拦截器 【实用推荐】

    前言 在平时开发中,你有没有下面这样的困扰呢? 场景一 明明是服务端的接口数据错误,而QA(测试)第一个找到的可能是客户端开发的你,为什么这个页面出现错误了? 而作为客户端开发的你,可能要拿出测试机连 ...

  3. 使用mysqldump对mysql进行备份与恢复

    说明: 主参考:https://blog.csdn.net/fanren224/article/details/79693860 mysql数据全量备份 1.开启二进制日志,备份指定数据库 cat & ...

  4. 安装keystone

    在控制节点上执行 controllerHost='controller' MYSQL_PASSWD='m4r!adbOP' RABBIT_PASSWD='0penstackRMQ' ADMIN_PAS ...

  5. 使用sequelize-auto生成sequelize的Models

    一.全局安装sequelize-auto npm install -g sequelize-auto 二.全局安装对应数据库的驱动,此处使用的是mysql npm install -g mysql 三 ...

  6. python实用小功能

    正则匹配手机号码: regExp =r"^((13[0-9])|(15[^4])|(18[0-9])|(17[0-8])|(147)|(19[0-9]))\d{8}$"; 常用于用 ...

  7. Flash中的SLC/MLC/MLC--基础

    参考 1.http://www.upantool.com/jiaocheng/qita/2012/slc_mlc_tlc.html 2.http://www.2ic.cn/html/10/t-4324 ...

  8. poj2152 Fire（树形DP）

    题目链接:https://vjudge.net/problem/POJ-2152 题意:给定一颗大小为n的树,在每个结点建消防站花费为w[i],如果某结点没有消防站,只要在它距离<=d[i]的结 ...

  9. Spring4学习回顾之路06- IOC容器中Bean的生命周期方法

    SpringIOC容器可以管理Bean的生命周期,Spring允许在Bean生命周期的特定点执行特定的任务! Spring IOC容器对Bean的生命周期进行管理的过程: -通过构造器或者工厂方法创建 ...

  10. PAT B1020 月饼（25）

    题目描述 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部 ...