|
|
相关文章推荐
一、简单介绍
Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。
本节介绍， three.js （webgl）透视视角和正交视角，并且实现简单把当前透视角转为正交视角，然后在切换回来的透视视角的原理案例，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
二、实现原理
1、场景构建三要素，scene、camera 和 renderer
2、其中 camera ，会根据需要先创建一个透视camera，然后根据转换，切换到正交camera
3、然后通过 renderer 中 透视camera 或者 正交camera 视角渲染，从而实现透视视角转为正交视角 view 的渲染
三、正投影和透视投影简单解释
下面对正投影相机和透视投影相机的投影算法进行简单介绍，对于初学者你有一个印象就可以，如果想深入了解，可以学习图形学或者阅读threejs官方源码src目录下文件
OrthographicCamera.js
和
PerspectiveCamera.js
生活中的物体都是三维的，但是人的眼睛只能看到正面，不能看到被遮挡的背面，三维几何体在人眼睛中的效果就像一张相机拍摄的二维照片，你看到的是一个2D的投影图。 空间几何体转化为一个二维图的过程就是投影，不同的投影方式意味着投影尺寸不同的算法。
- 对于正投影而言，一条直线放置的角度不同，投影在投影面上面的长短不同；
- 对于透视投影而言，投影的结果除了与几何体的角度有关，还和距离相关， 人的眼睛观察世界就是透视投影，比如你观察一条铁路距离越远你会感到两条轨道之间的宽度越小。
无论正投影还是透视投影，three.js都对相关的投影算法进行了封装， 大家只需要根据不同的应用场景自行选择不同的投影方式。使用
OrthographicCamera
相机对象的时候，three.js会按照正投影算法自动计算几何体的投影结果； 使用
PerspectiveCamera
相机对象的时候，three.js会按照透视投影算法自动计算几何体的投影结果。
四、透视相机（PerspectiveCamera）
这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
1、构造 透视相机
new THREE.PerspectiveCamera(60, width / height, 1, 1000)
* 透视投影相机设置 var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 /**透视投影相机对象*/ var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000); camera.position.set(200, 300, 200); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象)| 参数 | 含义 | 默认值 |
|---|---|---|
| fov | fov表示视场，所谓视场就是能够看到的角度范围，人的眼睛大约能够看到180度的视场，视角大小设置要根据具体应用，一般游戏会设置60~90度 | 45 |
| aspect | aspect表示渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比 | window.innerWidth/window.innerHeight |
| near | near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 | 0.1 |
| far | far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小，会有部分场景看不到 | 1000 |
共有属性请参见其基类 Camera 。
请注意，在大多数属性发生改变之后，你将需要调用.updateProjectionMatrix来使得这些改变生效。
. aspect : Float
摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是 1 （正方形画布）。
. far : Float
摄像机的远端面，默认值是
2000
。
该值必须大于near plane（摄像机视锥体近端面）的值。
. filmGauge : Float
胶片尺寸，其默认值为35（毫米）。 这个参数不会影响摄像机的投影矩阵，除非.filmOffset被设置为了一个非零的值。
. filmOffset : Float
水平偏离中心偏移量，和.filmGauge单位相同。默认值为 0 。
. focus : Float
用于立体视觉和景深效果的物体的距离。 这个参数不会影响摄像机的投影矩阵，除非使用了StereoCamera。 默认值是 10 。
. fov : Float
摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示。默认值是 50 。
. isPerspectiveCamera : Boolean
Read-only flag to check if a given object is of type PerspectiveCamera.
. near : Float
摄像机的近端面，默认值是
0.1
。
其有效值范围是0到当前摄像机far plane（远端面）的值之间。 请注意，和OrthographicCamera不同，
0
对于PerspectiveCamera的近端面来说
不是
一个有效值。
. view : Object
Frustum window specification or null. 这个值使用.setViewOffset方法来进行设置，使用.clearViewOffset方法来进行清除。
. zoom : number
获取或者设置摄像机的缩放倍数，其默认值为 1 。
共有方法请参见其基类Camera。
. clearViewOffset () : undefined
清除任何由.setViewOffset设置的偏移量。
. getEffectiveFOV () : Float
结合.zoom（缩放倍数），以角度返回当前垂直视野角度。
. getFilmHeight () : Float
返回当前胶片上图像的高，如果.aspect小于或等于1（肖像格式、纵向构图），则结果等于.filmGauge。
. getFilmWidth () : Float
返回当前胶片上图像的宽，如果.aspect大于或等于1（景观格式、横向构图），则结果等于.filmGauge。
. getFocalLength () : Float
返回当前.fov（视野角度）相对于.filmGauge（胶片尺寸）的焦距。
. setFocalLength ( focalLength : Float ) : undefined
通过相对于当前.filmGauge的焦距，设置FOV。
默认情况下，焦距是为35mm（全画幅）摄像机而指定的。
. setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : undefined
fullWidth — 多视图的全宽设置
fullHeight — 多视图的全高设置
x — 副摄像机的水平偏移
y — 副摄像机的垂直偏移
width — 副摄像机的宽度
height — 副摄像机的高度
在较大的viewing frustum（视锥体）中设置偏移量，对于多窗口或者多显示器的设置是很有用的。
五、正交相机（OrthographicCamera）
这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。
这对于渲染2D场景或者UI元素是非常有用的。
1、构造 正交相机
OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
* 正投影相机设置 var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口宽高比 var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大 //创建相机对象 var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 300, 200); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象)| 参数(属性) | 含义 |
|---|---|
| left | 渲染空间的左边界 |
| right | 渲染空间的右边界 |
| top | 渲染空间的上边界 |
| bottom | 渲染空间的下边界 |
| near | near属性表示的是从距离相机多远的位置开始渲染，一般情况会设置一个很小的值。 默认值0.1 |
| far | far属性表示的是距离相机多远的位置截止渲染，如果设置的值偏小小，会有部分场景看不到。 默认值1000 |
共有属性请参见其基类Camera。
请注意，在大多数属性发生改变之后，你将需要调用.updateProjectionMatrix来使得这些改变生效。
. bottom : Float
摄像机视锥体下侧面。
.far : Float
摄像机视锥体远端面，其默认值为
2000
。
该值必须大于near plane（摄像机视锥体近端面）的值。
. isOrthographicCamera : Boolean
Read-only flag to check if a given object is of type OrthographicCamera.
. left : Float
摄像机视锥体左侧面。
.near : Float
摄像机视锥体近端面。其默认值为
0.1
.
其值的有效范围介于0和far（摄像机视锥体远端面）之间。
请注意，和PerspectiveCamera不同，
0
对于OrthographicCamera的近端面来说是一个有效值。
. right : Float
摄像机视锥体右侧面。
. top : Float
摄像机视锥体上侧面。
.view : Object
这个值是由setViewOffset来设置的，其默认值为 null 。
.zoom : number
获取或者设置摄像机的缩放倍数，其默认值为 1 。
共有方法请参见其基类Camera。
.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : undefined
fullWidth — 多视图的全宽设置
fullHeight — 多视图的全高设置
x — 副摄像机的水平偏移
y — 副摄像机的垂直偏移
width — 副摄像机的宽度
height — 副摄像机的高度
在较大的
viewing frustum
（视锥体）中设置偏移量，对于多窗口或者多显示器的设置是很有用的。 对于如何使用它，请查看PerspectiveCamera中的示例。
.clearViewOffset () : undefined
清除任何由.setViewOffset设置的偏移量。
. updateProjectionMatrix () : undefined
更新摄像机投影矩阵。在任何参数被改变以后必须被调用。
. toJSON (meta : Object) : Object
meta -- 包含有元数据的对象，例如对象后代中的纹理或图像
将摄像机转换为 three.js
JSON Object/Scene format
（three.js JSON 物体/场景格式）。
三维场景中坐标值不在三维空间中的网格模型不会被渲染出来，会被剪裁掉，比如你把上面代码中far参数的值从1000更改为420，你会发现长方体的一部分无法显示。
注意：左右边界的距离与上下边界的距离比值与画布的渲染窗口的宽高比例要一致，否则三维模型的显示效果会被单方向不等比例拉伸
构造函数
OrthographicCamera
的参数
( left,right,top,bottom,near,far)
本质上是对WebGL投影矩阵的封装，宽度
width
、高度
height
越大，三维模型顶点的位置坐标就会越大，超出可视区域的网格模型就会被剪裁掉， 不会再显示在屏幕上，大家还可以看到参数
left
与
right
、参数
top
与
bottom
互为相反数，这样做的目的是
lookAt
指向的对象能够显示在canvas画布的中间位置。
六、threejs中透视投影相机转换正交投影相机基本原理与代码实现
这里，假设已知透视投影相机，threejs中透视投影相机转换正交投影相机中，最重要的是根据已知透视相机的属性计算所需构造正交投影的量，即左右上下远近平面，远近平面已知（既可以使用 透视相机的远近平面），这是，就剩下计算左右和上下平面。
可以简单认为，所需的左右上下平面就是远平面和相机fov构成的矩形，如下图所示。
计算方法是得到当前透视相机到远平面的深度 depth，然后根据 fov 角度计算矩形的 top，在根据 透视相机的宽高比得到 right，再根据 top 和 bottom，right 和 left 成正反关系，最后得到所需正交相机的构造所需参数。
//1.计算透视相机到场景 scene 的深度距离 depth
let target = scene.position.clone();;
let camPos = perCamera.position.clone();
let depth = camPos.sub(target).length();
//2.得到透视相机的宽高比和垂直可视角度
let aspect = perCamera.aspect;
let fov = perCamera.fov;
//3.根据上述变量计算正交投影相机的视口矩形
let top_ortho = depth * Math.atan( (Math.PI/180)*(fov)/2);
let right_ortho = top_ortho * aspect;
let bottom_ortho = - top_ortho;
let left_ortho = - right_ortho;
//4.最后创建正交投影相机
let near = perCamera.near;
let far = perCamera.far;
orthCamera = new THREE.OrthographicCamera(
left_ortho , right_ortho ,
top_ortho , bottom_ortho ,
near, far
七、案例实现
1、引入 Three js 相关 js 文件
<script type="importmap">
"imports": {
"three": "./js/three.module.js"
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from './js/OrbitControls.js';
import { RGBELoader } from './js/RGBELoader.js';
import { GUI } from './js/lil-gui.module.min.js'
2、初始化 scene、renderer 、 Lights ，并且加 3D 物体
function initScene()
// 场景，背景色
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
// 这是关键，包含了光照信息的环境 hdr 图，（因为没有添加灯光，少了他，场景就是黑色的）
scene.environment = new RGBELoader().load( './src/venice_sunset_1k.hdr' );
scene.environment.mapping = THREE.EquirectangularReflectionMapping;
function initRenderer()
const container = document.getElementById( 'app' );
// 渲染器
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.85;
container.appendChild( renderer.domElement );
function addLights(){
scene.add(new THREE.AmbientLight(0xffffff, 1));
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x000000, 1);
hemiLight.position.set(0, 100, 0);
scene.add(hemiLight);
function addObject3Ds(){
const material1 = new THREE.MeshStandardMaterial( {
color: 0xff0000, metalness: 0.0, roughness: 0.5
const mesh1 = new THREE.Mesh(new THREE.BoxGeometry(10,5,5),material1);
mesh1.castShadow =true;
mesh1.receiveShadow =true;
scene.add(mesh1);
const material2 = new THREE.MeshStandardMaterial({color:0xff00cc,metalness:0.0,roughness:0.1});
const mesh2 = new THREE.Mesh(new THREE.BoxGeometry(5,5,5),material2);
mesh2.position.set(0,5,2);
scene.add(mesh2);
const material3 = new THREE.MeshStandardMaterial({color:0xffcc00,metalness:0.1,roughness:0.1});
const mesh3 = new THREE.Mesh(new THREE.SphereGeometry(5,30),material3);
mesh3.position.set(0,5,-2);
scene.add(mesh3);
3、初始化相机camera，默认创建透视相机，把透视相机作为当前相机，在切换相机的时候创建正交相机作为当前相机
function initCamera(){
curCamera = createPerCamera();
function createPerCamera(){
if(perCamera == null){
perCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
perCamera.position.set (-10,4, 25);
return perCamera;
function createPerCameraToOrthCamera(perCamera){
if(perCamera == null){
console.error(' perCamera is null');
return null;
if(orthCamera == null){
//1.计算透视相机到场景 scene 的深度距离 depth
let target = scene.position.clone();;
let camPos = perCamera.position.clone();
let depth = camPos.sub(target).length();
//2.得到透视相机的宽高比和垂直可视角度
let aspect = perCamera.aspect;
let fov = perCamera.fov;
//3.根据上述变量计算正交投影相机的视口矩形
let top_ortho = depth * Math.atan( (Math.PI/180)*(fov)/2);
let right_ortho = top_ortho * aspect;
let bottom_ortho = - top_ortho;
let left_ortho = - right_ortho;
//4.最后创建正交投影相机
let near = perCamera.near;
let far = perCamera.far;
orthCamera = new THREE.OrthographicCamera(
left_ortho , right_ortho ,
top_ortho , bottom_ortho ,
near, far
return orthCamera;
4、创建 orbitControls 相机控制器
注意 ：在 透视相机的时候才能漫游观察，正交相机是不能漫游观察
function initOrbitControls(){
const controls = new OrbitControls(curCamera, renderer.domElement);
controls.minDistance = 5;
controls.maxDistance = 50;
controls.enablePan = false; // 禁止 移动操作
5、添加GUI 操作面板，进行透视和正交相机的切换
function addGUI(){
const param = {
"透视转正交":orthCameraView,
"透视转正交俯视":orthCameraLookDownView,
"正交转透视":orthCameraBackPerCamera,
const gui = new GUI();
gui.add(param,"透视转正交");
gui.add(param,"透视转正交俯视");
gui.add(param,"正交转透视");
6、效果预览
7、完整代码
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>PersCameraToOrthCamera</title>
<style type="text/css">
margin: 0px;
padding: 0px;
</style>
</head>
<div id="app">
<script type="importmap">
"imports": {
"three": "./js/three.module.js"
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from './js/OrbitControls.js';
import { RGBELoader } from './js/RGBELoader.js';
import { GUI } from './js/lil-gui.module.min.js'
// 当前的相机，透视相机，正交相机
let curCamera,perCamera,orthCamera
let scene, renderer;
init();
animate();
function init(){
initScene();
initRenderer();
initCamera();
addLights();
initOrbitControls();
addObject3Ds();
addGUI();
function initScene()
// 场景，背景色
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
// 这是关键，包含了光照信息的环境 hdr 图，（因为没有添加灯光，少了他，场景就是黑色的）
scene.environment = new RGBELoader().load( './src/venice_sunset_1k.hdr' );
scene.environment.mapping = THREE.EquirectangularReflectionMapping;
function initRenderer()
const container = document.getElementById( 'app' );
// 渲染器
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.85;
container.appendChild( renderer.domElement );
function initCamera(){
curCamera = createPerCamera();
function createPerCamera(){
if(perCamera == null){
perCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
perCamera.position.set (-10,4, 25);
return perCamera;
function createPerCameraToOrthCamera(perCamera){
if(perCamera == null){
console.error(' perCamera is null');
return null;
if(orthCamera == null){
//1.计算透视相机到场景 scene 的深度距离 depth
let target = scene.position.clone();;
let camPos = perCamera.position.clone();
let depth = camPos.sub(target).length();
//2.得到透视相机的宽高比和垂直可视角度
let aspect = perCamera.aspect;
let fov = perCamera.fov;
//3.根据上述变量计算正交投影相机的视口矩形
let top_ortho = depth * Math.atan( (Math.PI/180)*(fov)/2);
let right_ortho = top_ortho * aspect;
let bottom_ortho = - top_ortho;
let left_ortho = - right_ortho;
//4.最后创建正交投影相机
let near = perCamera.near;
let far = perCamera.far;
orthCamera = new THREE.OrthographicCamera(
left_ortho , right_ortho ,
top_ortho , bottom_ortho ,
near, far
return orthCamera;
function addLights(){
scene.add(new THREE.AmbientLight(0xffffff, 1));
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x000000, 1);
hemiLight.position.set(0, 100, 0);
scene.add(hemiLight);
function initOrbitControls(){
const controls = new OrbitControls(curCamera, renderer.domElement);
controls.minDistance = 5;
controls.maxDistance = 50;
controls.enablePan = false; // 禁止 移动操作
function addObject3Ds(){
const material1 = new THREE.MeshStandardMaterial( {
color: 0xff0000, metalness: 0.0, roughness: 0.5
const mesh1 = new THREE.Mesh(new THREE.BoxGeometry(10,5,5),material1);
mesh1.castShadow =true;
mesh1.receiveShadow =true;
scene.add(mesh1);
const material2 = new THREE.MeshStandardMaterial({color:0xff00cc,metalness:0.0,roughness:0.1});
const mesh2 = new THREE.Mesh(new THREE.BoxGeometry(5,5,5),material2);
mesh2.position.set(0,5,2);
scene.add(mesh2);
const material3 = new THREE.MeshStandardMaterial({color:0xffcc00,metalness:0.1,roughness:0.1});
const mesh3 = new THREE.Mesh(new THREE.SphereGeometry(5,30),material3);
mesh3.position.set(0,5,-2);
scene.add(mesh3);
function addGUI(){
const param = {
"透视转正交":orthCameraView,
"透视转正交俯视":orthCameraLookDownView,
"正交转透视":orthCameraBackPerCamera,
const gui = new GUI();
gui.add(param,"透视转正交");
gui.add(param,"透视转正交俯视");
gui.add(param,"正交转透视");
function orthCameraView(){
const tmpCamera = createPerCameraToOrthCamera(perCamera);
tmpCamera.position.set(perCamera.position.x,perCamera.position.y,perCamera.position.z);
tmpCamera.rotation.set(perCamera.rotation.x,perCamera.rotation.y,perCamera.rotation.z);
curCamera = tmpCamera;
function orthCameraLookDownView(){
//1.计算透视相机到场景 scene 的深度距离 depth，作为 俯视的高度
let target = scene.position.clone();;
let camPos = perCamera.position.clone();
let depth = camPos.sub(target).length();
const tmpCamera = createPerCameraToOrthCamera(perCamera);
tmpCamera.position.set(0,depth,0);
tmpCamera.rotation.set(- Math.PI/2, 0, 0);
curCamera = tmpCamera;
function orthCameraBackPerCamera(){
curCamera = createPerCamera();
function animate(){
requestAnimationFrame(animate);
render();
function render(){
renderer.render(scene, curCamera);
</script>
</body>
</html>
八、案例代码下载
Three之three.js（webgl）透视视角和正交视角，以及透视转正交的视角切换代码-Javascript文档类资源-CSDN下载
Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换目录Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换一、简单介绍二、实现原理三、正投影和透视投影简单解释四、透视相机（PerspectiveCamera）五、正交相机（OrthographicCamera）六、threejs中透视投影相机转换正交投影相机基本原理与代码实现七、案例实现八、案例代码下载一、简单介绍T...
参考博文：Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换
https://blog.csdn.net/u014361280/article/details/124544320?spm=1001.2014.3001.5501
一、简单介绍
Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。
本节介绍， three.js （webgl）透视视角和正交视角，并且实现简单把当前透视角转为正交视角，然后在切换回来的透视视角的原理案例，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。
二、实现原理
1、场景构建三要素，scene、camera 和 renderer
2、其中 camera ，会根据需要先创建一个透视camera，然后根据转换，切换到正交camera
3、然后通过 renderer 中 透视camera 或者 正交camera 视角渲染，从而实现透视视角转为正交视角 view 的渲染
服务器需要访问称为entropy的postgres数据库。 我可以为数据库提供架构，也可以编辑自己的架构以使其与我的类似。 现在，它所持有的只是对象类型的定义。 这些对象在启动时获取并加载到游戏中。
要运行服务器，请在基本文件夹中运行npm install，然后在节点server.js中运行。 （请记住，package.json并不总是最新的，因此可能需要npm install-保存所有缺少的库）。
客户端要求您从下载three.js并将该文件夹放在客户端文件夹中。
透视相机是模拟人眼的一种相机，照出来的物体近大远小。
Three里面初始化一个透视相机需要这些参数：
function PerspectiveCamera( fov, aspect, near, far )
fov为视锥体垂直视野...
在three.js中，摄像机的作用就是不断的拍摄我们创建好的场景，然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景，就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机（PerspectiveCamera） 它是用来模拟人眼所看到的景象，它也是3D场景的渲染中使用得最普遍的投影模式。
透视相机(PerspectiveCamera)
根据视锥的范围给渲染器提供需要渲染的场景范围。
实例化new THREE.PerspectiveCamera() 接受4个参数来确认视锥的范围。只要在视锥范围内
PerspectiveCamera:使用透视投影的相机。
该投影模式旨在模仿人眼的观看方式。 这是用于渲染3D场景的最常见的投影模式。
perspective意为透视、远景，应用于较现实的场景，会遵循近大远小
PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 垂直视野角度(从底部到顶部，以度为单位。 默认值为50。)
aspect — 长宽比（一般为渲染器、画布长宽比,默认为1）
使用Three.js创建的场景是三维的，但是通常情况下显示器是二维的，所以，三维场景如何显示在二维屏幕上呢？
照相机：定义了三维空间到二维屏幕的投影方式。
不同的投影方式，照相机又分为正交投影照相机与透视投影照相机。
1.1 正交投影与透视投影
透视投影：使用透视投影照相机获得的结果是类似人眼在真实世界中看到的有“近大远小”的效果
正交投影：使用正交投影照相机获得的结果就像我......
一、什么是正交投影相机
正交摄像机与透视投影摄像机最大的区别就是物体的大小不随物体距离影响，透视投影相机请看我上篇文章 three.js PerspectiveCamera（透视投影相机） - 02，然而正交投影摄像机无论物体距离摄像机多远，你所看到的物体大小都是1比1还原。
1.属性介绍
首先来看下THREE.WebGLRenderer可以设置的参数如下：
var renderer = new THREE.WebGLRenderer({ //创建渲染器对象
// canvas: document.getElementById('can3d'), //渲染器绘制其输出的画布，
alpha: false, // 画布是否包含alpha（透明度）缓冲区。默认值为false。
premultipliedAlpha: true, //渲染器是否会假设颜色具有 预乘alpha。默
在three.js中内置了很多渲染器，选择什么渲染器都是根据需求来判断的。本节我们详细了解最常用的渲染器 WebGLRenderer
渲染器(WebGLRenderer)
WebGLRenderer主要作用就是把相机视椎体中的三维场景渲染成一个二维图片显示在画布上
实例化new WebGLRenderer()接受一个对象参数作为渲染器的行为配置。不传参数都会执行其默认值。常用配置：
canvas 与渲染器绑定的画布节点。不传内部会自己创建一个新的画布节点，使用.domElement获取。
three.js是一款开源的JavaScript 3D引擎，它可以用于在WebGL上呈现交互式三维图形。而WebGL是一种允许浏览器在不使用插件的情况下呈现3D图像和图形的JavaScript API。这意味着我们可以在Web浏览器中使用three.js和WebGL创建有趣的3D场景和游戏。
机房和机柜一般是指计算机设施管理中的硬件部分，用于存储和运行服务器、网络设备、数据库等计算机设备，为企业和组织提供IT支持。在机房中，使用three.js和WebGL可以创建许多有用的可视化场景，包括监视和管理设备、跟踪设备活动、查看网络拓扑图等。通过这种方式，机房的管理者可以更轻松地监控和管理其设备，提高设备利用率并降低维护成本。
总之，使用three.js和WebGL可以通过在机房环境中创建交互式3D场景来改善设备管理和监控，从而使该行业更加智能、高效。
Git 常见错误 之 error: src refspec xxx does not match any / error: failed to push some refs to 简单解决方法
99084
推荐文章