<!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. open-falcon 前端代码在windows上运行

    1: 下载代码git clone https://github.com/open-falcon/dashboard.git 2:在代码\dashboard-0.2.0 的根目录下安装 python虚拟 ...

  2. Autonomous System

        自治系统(Autonomous System).在互联网中,一个自治系统(AS)是一个有权自主地决定在本系统中应采用何种路由协 议的小型单位.这个网络单位可以是一个简单的网络也可以是一个由一个 ...

  3. windows8.1电话激活密钥

    请断网安装Windows 8.1核心版:334NH-RXG76-64THK-C7CKG-D3VPT Windows 8.1专业版:XHQ8N-C3MCJ-RQXB6-WCHYG-C9WKB

  4. PAT 天梯赛 L1-040. 最佳情侣身高差 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-040 AC代码 #include <iostream> #include <cstdio&g ...

  5. loadrunner之脚本篇——代理录制

    版本:Loadruner 11.0 A.PC端录制Web应用程序 步骤1:根据实际情况,选择对应的协议 本例中选择Web(HTTP/HTML),如下 步骤2:找到代理设置界面 点击 Start Rec ...

  6. ES6 随记（1）-- let 与 const

    1. const(声明一个只读的常量) 这个是很好理解的,且声明时就必须赋值而不能以后再赋,不然会报错. 而个人认为它最大的用处还是在于 {} 和 [] 上,const 保证了它的内存地址(指针)不变 ...

  7. 【Flask】Sqlalchemy 子查询

    ### subquery:子查询可以让多个查询变成一个查询,只要查找一次数据库,性能相对来讲更加高效一点.不用写多个sql语句就可以实现一些复杂的查询.那么在sqlalchemy中,要实现一个子查询, ...

  8. java Web 文件上传

    注意:请求实体过大的问题,请修改Nginx服务器的大小(百度参考413 Request Entity Too Large 的解决方法)jsp:<input type="file&quo ...

  9. codeforces 155D 质数

    题意:有编号1到n的n台机器,有m次操作,操作为开启或关闭机器,成功开启机器k的条件为k和所有已经开启的机器编号互质. 思路:vis[i]数组存放占领i这个位置的机器编号,因为所有开启的机器的编号互质 ...

  10. 如何隐藏tomcat命令窗口

    有两种方法: 一.修改tomcat中的文件参数,达到隐藏目的: 引用:TOMCAT_HOME\bin\setclasspath.bat 在文件的底部找到以下内容: set _RUNJAVA=" ...