three.js

1、背景介绍 在网页显示出三维的效果，就要借助于视觉效果来实现，比如阴影、光照等。这里的Camera相当于人的眼睛，从坐标的那个视点去观察目标，相当于投影出立体感。这里首先说一下坐标。如下图所示： z轴正方向指向屏幕外，x，y平面在屏幕上。坐标原点（0,0,0）默认为场景中心。照相机就是在这个坐标系中定义的。有两种投影方式：正交投影和透视投影。对于这两种投影具体介绍， 请点击这里了解更多 。 透视投影图 正交投影图 2、正交投影照相机和透视投影照相机 2.1正交投影照相机 正交投影照相机（Orthographic Camera），构造函数： OrthographicCamera( left, right, top, bottom, near, far ) left — Camera frustum left plane. right — Camera frustum right plane. top — Camera frustum top plane. bottom — Camera frustum bottom plane. near — Camera frustum near plane. far — Camera frustum far plane. 实例演示： //创建场景 var scene=new THREE.Scene(); //创建相机 var camera_Or

前言 在 深入理解Three.js中透视投影照相机PerspectiveCamera 那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答，那篇文章中也说了会单独讲解 Three.js 中另一种常用的摄像机正交摄像机 OrthographicCamera ，这篇文章将会详细的讲解正交摄像机的工作原理和其对应参数的用法，当然，为了能够让读者更加直观的理解正交摄像机，我会制作一个与正交摄像机相关的 demo 来直观的让读者感受正交摄像机的魅力。 原理说明 深入理解Three.js中透视投影照相机PerspectiveCamera 文章中提到过正交摄像机和透视投影摄像机最大的区别是投影到的物体大小不受距离的影响，说直白点就是透视投影摄像机投影物体是通过点（下图a），相当于我们的眼睛，距离越远，能够看到的部分也就越小。正交摄像机投影物体是通过平面（下图b），无论距离有多远，投射到二维平面的线始终的是平行的，所以看上去就会感觉物体的大小没有受到任何影响。 正交摄像机参数说明 实现一个简单正交摄像机的代码如下： 1 var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 ); 2 scene.add( camera ); new THREE