<!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. CentOS7或CentOS8 开机自动启用网卡的设置方法

    sudo nano /etc/sysconfig/network-scripts/ifcfg-enp0s3(p0s3是网卡,名字不同环境会有差异,输入时可按tab自动补全.) 将最后一行的 ONBOO ...

  2. coreseek(sphinx) 全文检索

    转自: http://blog.csdn.net/aidandai/article/details/50464793 编译错误解决--sphinx-0.9.9 I tried to install t ...

  3. flask(1.0)

    目录 一. 关于KeyError和IndexError 二. Python三大主流框架对比 三. flask基础 1.安装flask 2.用flask写出的第一个页面 3.Flask的Response ...

  4. [SOME_MUTATION] (state) {// mutate state}Vuex中使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名

    使用常量替代 Mutation 事件类型 使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式.这样可以使 linter 之类的工具发挥作用,同时把这些常量放在单独的文件中可 ...

  5. VS Code 的插件位置更改

    --extensions-dir 你的目标文件夹 原来的目标位置:"E:\Program Files\VSCode\Code.exe" 更改后的位置:"E:\Progra ...

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

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

  7. Python3 Selenium自动化web测试 ==> 第六节 WebDriver高级应用 -- 操作web页面的滚动条

    学习目的: 掌握页面元素定位以外的其他重要知识点. 正式步骤: 测试Python3代码 # -*- coding:utf-8 -*- from selenium import webdriver fr ...

  8. 《精通并发与Netty》学习笔记（03 - 客户端程序编写）

    上节我们编写了netty服务端的程序,这节我们来写客户端程序 第一步:改造服务端程序为: (1)MyServer类: package com.ssy.netty.demo01; import io.n ...

  9. JAVA -----------交互式程序

    2.6交互式程序 如果程序能在执行期间交互地从用户输入中读取数据,就可使程序每执行一次时计算出新结果,并且新结果取决于输入数据.这样的程序才具有实用性. 2.6.1 Scanner类 Scanner类 ...

  10. jQuery 虚拟数字键盘代码

    先上效果:    js直接应用:  $('input').mynumkb(); 就出来效果 HTML: <input maxlength="4" type="tex ...