<!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. P2P-BT对端管理协议（附BT协议1.0）

    对端管理 指的是远端peer集合的管理(尽管自身client也能够视为一个peer.但对端管理不包括自身peer) 一个client(client)必须维持与每一个远程peer连接的状态信息,即1V1 ...

  2. Latex技巧：插入参考文献

    LaTeX插入参考文献,可以使用BibTex,也可以不使用BibTex. 方法一:不使用BibTeX 先在文章文章末尾写好需要插入的参考文献,逐一写出,例如: \begin{thebibliograp ...

  3. Java基础—复用类

    复用代码是Java众多引人注目的功能之一. 一般而言,实现代码重用java提供了两种方式:组合以及继承. 组合:新的类由现有类的对象所组成.(复用现有代码的功能,而非它的形式) 继承:按照现有类的类型 ...

  4. F110 参数保存和重新运行录屏

    **初始界面回车 PERFORM frm_dynpro USING ' 'X'. PERFORM frm_dynpro USING '' 'BDC_CURSOR' 'F110V-LAUFD'. PER ...

  5. Python traps and pitfalls

    @1: >>> def func(a, L=[]): ... L.append(a) ... print(L) ... >>> func(10) [10] > ...

  6. Python基础（13）_python模块之re模块(正则表达式)

    8.re模块:正则表达式 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节 ...

  7. SpringMVC:学习笔记(9)——文件下载

    SpringMVC—文件下载 说明 两个案例 1.为登录用户提供下载服务. 2.阻止仅通过输入网址即可获取下载. 文件下载概览 为了将文件发送给浏览器,我们需要在控制器中完成以下操作: 对请求处理方法 ...

  8. CENTOS 搭建SVN服务器(附自动部署到远程WEB)

    安装subversion服务端 # 安装 yum install -y subversion # 测试是否安装成功 如果显示了版本信息则表示安装成功 svnserve --version;sleep ...

  9. 【转载】格式化存储装置成为 Ext2/Ext3/Ext4 档案系统

    格式化 用系统管理员帐户 (即 root) 身份打「mkfs -t ext2|ext3|ext4 储存装置」: mkfs -t ext3 /dev/sdb5 要格式化档案系统为 Ext2,亦可以直接使 ...

  10. [转载]Runtime详解

      Runtime的特性主要是消息(方法)传递,如果消息(方法)在对象中找不到,就进行转发,具体怎么实现的呢.我们从下面几个方面探寻Runtime的实现机制. Runtime介绍 Runtime消息传 ...