<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>

    <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>

    <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>

    <style>

        body {

            margin: 0;

            overflow: hidden;

        }

    </style>

</head>

<body>

<div id="Stats-output">

</div>

<div id="WebGL-output">

</div>

<script type="text/javascript">

    // 初始化

    function init() {

        var stats = initStats();

        // 创建一个场景

        var scene = new THREE.Scene();

        // 创建一个相机

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        camera.position.x = 120;

        camera.position.y = 60;

        camera.position.z = 180;

        // 创建渲染器

        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));

        renderer.setSize(window.innerWidth, window.innerHeight);

        // 创建地面

        var planeGeometry = new THREE.PlaneGeometry(180, 180);

        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // 地面保持水平

        plane.rotation.x = -0.5 * Math.PI;

        plane.position.x = 0;

        plane.position.y = 0;

        plane.position.z = 0;

        // 地面添加到场景中去

        scene.add(plane);

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

        for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {

            for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {

                var rnd = Math.random() * 0.75 + 0.25;

                var cubeMaterial = new THREE.MeshLambertMaterial();

                cubeMaterial.color = new THREE.Color(rnd, 0, 0);

                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);

                cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);

                cube.position.y = 2;

                scene.add(cube);

            }

        }

        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);

        directionalLight.position.set(-20, 40, 60);

        scene.add(directionalLight);

        // 添加自然光

        var ambientLight = new THREE.AmbientLight(0x292929);

        scene.add(ambientLight);

        // 添加场景到DOM元素中去

        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        var step = 0;

        //perspective透视摄像机 和   orthographic正交摄像机 替换函数

        var controls = new function () {

            this.perspective = "Perspective";

            this.switchCamera = function () {

                if (camera instanceof THREE.PerspectiveCamera) {

                    camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);

                    camera.position.x = 120;

                    camera.position.y = 60;

                    camera.position.z = 180;

                    camera.lookAt(scene.position);

                    this.perspective = "Orthographic";

                } else {

                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

                    camera.position.x = 120;

                    camera.position.y = 60;

                    camera.position.z = 180;

                    camera.lookAt(scene.position);

                    this.perspective = "Perspective";

                }

            };

        };

        var gui = new dat.GUI();

        gui.add(controls, 'switchCamera');

        gui.add(controls, 'perspective').listen();

           //相机看向场景

        camera.lookAt(scene.position);

        render();

        function render() {

            stats.update();

            requestAnimationFrame(render);

            renderer.render(scene, camera);

        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            stats.domElement.style.position = 'absolute';

            stats.domElement.style.left = '0px';

            stats.domElement.style.top = '0px';

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;

        }

    }

    window.onload = init

</script>

</body>

</html>

对于这两个相机官方有一个示例更容易让人理解

https://threejs.org/examples/#webgl_camera

按O和P两个按钮切换相机

10-THREE.JS perspective透视摄像机和orthographic正交摄像机区别的更多相关文章

  1. 10.15 JS日记

    1.JS 介绍 js的全称是JavaScript,它是一门前台语言 Java是一门后台语言 ,它们两个之间毫无关系 JavaScript的作者是布兰登,艾奇 前台语言:运行在客户端 后台语言:与数据库 ...

  2. 深入理解Three.js中正交摄像机OrthographicCamera

    前言 在深入理解Three.js中透视投影照相机PerspectiveCamera那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答,那篇文章中也说了会单独讲解Three.js中另一种常用 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. MySql 自适应哈希索引

    一.介绍 哈希(hash)是一种非常快的查找方法,一般情况下查找的时间复杂度为O(1).常用于连接(join)操作,如Oracle中的哈希连接(hash join). InnoDB存储引擎会监控对表上 ...

  2. linux 后台进程管理利器supervisor

    Linux的后台进程运行有好几种方法,例如nohup,screen等,但是,如果是一个服务程序,要可靠地在后台运行,我们就需要把它做成daemon,最好还能监控进程状态,在意外结束时能自动重启.   ...

  3. GCE 创建一个Linux VM

    sudo yum install wget 安装Java sudo wget --no-check-certificate --no-cookies --header "Cookie: or ...

  4. 【整理学习Hadoop】H D F S 一个分布式文件系统

    Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(commodity hardware)上的分布式文件系统.它和现有的分布式文件系统有很多共同点.但同时,它和其他的分布式文件系统的区别 ...

  5. OC自动释放池autoreleasepool介绍

    自动释放池的机制是:它使得应用在创建新对象时,系统能够有效地管理应用所使用的内存. @autoreleasepool { statements } 在创建新对象时,并且系统未启动ARC特性,那么在使用 ...

  6. window.name跨域

    window.name? 每一个页面都有一个自己的window,而window.name是window的名字. window.name跨域原理 window对象有个name属性,该属性有个特征:即在一 ...

  7. 基于R语言的数据分析和挖掘方法总结——描述性统计

    1.1 方法简介 描述性统计包含多种基本描述统计量,让用户对于数据结构可以有一个初步的认识.在此所提供之统计量包含: 基本信息:样本数.总和 集中趋势:均值.中位数.众数 离散趋势:方差(标准差).变 ...

  8. nodejs安装，配置环境，使用express建立一个新项目

    1.下载nodejs安装包 去nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包, 下载下来安装包 ...

  9. VCS 常用命令速查

      VCS是编译型Verilog模拟器,它完全支持OVI标准的Verilog HDL语言.PLI和SDF.VCS具有目前行业中最高的模拟性能,其出色的内存管理能力足以支持千万门级的ASIC设计,而其模 ...

  10. awk的getline命令

    原文出处:生活费的博客,http://www.cnblogs.com/276815076/archive/2011/12/05/2276625.html#undefined  两种情况:getline ...