<!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. 解决vsftp &quot;上传 553 Could not create file&quot;

    这个问题仅仅要:       1. setsebool -P ftpd_disable_trans 1       2. service vsftpd restart       太纠结了,呵呵

  2. 转载：Linux下查看/修改系统时区、时间

    一.查看和修改Linux的时区 1. 查看当前时区 命令 : "date -R" 2. 修改设置Linux服务器时区 方法 A 命令 : "tzselect" ...

  3. 003 F-47创建预付定金请求检查增强-20150819.docx

    Enhancement SE38:LEINRF26   操作F-47,预付定金请求回车时,检查输入的采购订单项目发票视图,预付定金% 栏位,若为空,则报错,不为空可继续.   检查逻辑:检查采购凭证项 ...

  4. [笔记]一道C语言面试题：IPv4字符串转为UInt整数

    题目:输入一个IPv4字符串,如“1.2.3.4”,输出对应的无符号整数,如本例输出为 0x01020304. 来源:某500强企业面试题目 思路:从尾部扫描到头部,一旦发现无法转换,立即返回,减少无 ...

  5. windows下docker toolbox无法下载boot2docker.iso

    GitHub连不上导致自动更新失败.(网络形势严峻!) 通过别的途径手动下载了指定的最新的boot2docker.iso文件.(比方说迅雷!比方说迅雷!比方说迅雷!) https://github.c ...

  6. HDU 3449 Consumer

    这是一道依赖背包问题.背包问题通常的解法都是由0/1背包拓展过来的,这道也不例外.我最初想到的做法是,由于有依赖关系,先对附件做个DP,得到1-w的附件背包结果f[i]表示i花费得到的最大收益,然后把 ...

  7. Go CSP模型

    CSP 是 Communicating Sequential Process 的简称,中文可以叫做通信顺序进程,是一种并发编程模型,由 Tony Hoare 于 1977 年提出.简单来说,CSP 模 ...

  8. K8s ipvs mode kube-proxy

    IPVS vs. IPTABLES IPVS模式在Kubernetes 1.8中被引入,在1.9中进入beta测试. IPTABLES模式在1.1版本中被添加进来,在1.2开始就变成了默认的操作模式. ...

  9. 安装配置Apollo-Prota web中心平台

    首先要求2g以上内存哈,JDK1.8 搭建数据库 创建表 apollo-build-scripts-master 整个阿波罗环境包 使用一个命令启动整个阿波罗服务环境 创建两个数据库 分别为:apol ...

  10. 【bzoj5085】最大（二分+乱搞）

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=5085 这道题我们可以先二分答案,然后转化为判定是否有四角权值>=mid的矩形. ...