2022.6.30-2022.7.3 Three.js 学习笔记

---

前言

一份Three.js笔记, 还没记完
每节课的案例都单独开了一个目录来写, 现在教程看了一半, 给的我感觉就是——教程是一条线过去的, 虽然中途一切都很顺利, 但回头看看文档的话发现它基本没有进行什么扩展, 比如Object3D里面有很多属性和方法, 但是教程里只讲了案例里用到的一两个, 我自己看了一下文档, 没提到的方法属性中也不乏强实用性的个体.
这样下去, 恐怕看完教程我也只能写一些和教程相似的案例.
我还是希望在这里记录一些学习经验的同时, 依据文档进行扩展, 把用到的属性方法的其他情况都总结出来.

教程方面的知识主要记一个思路.
我之前接触过Blender和3DMAX, 有些东西对我来说不那么难以理解, 我也会尽量使用简单易懂的语言去解释它们.

另外看一下各种相机效果方面的区别.

---

一、场景操作

1.创建相机

模型完成之后要进行渲染, 渲染完成后我们将会从相机的角度看到渲染后的模型.
不管是Blender还是3DMAX, 都有相机的概念:

相机前面的锥形区域代表摄像的区域, 当然, 不会这么近视.

ArrayCamera()

不是一种相机, 而是一个为提高性能而生的多机位解决方案, 有点像axios.all(), 它接受传入包含多个相机的数组(比如"[camera1, carema2, carema3]"这样的, 预先把相机定义好再传进ArrayCarema生成相机.)

这里引用官方的一个例子:
Three.js - webgl_camera_array源码

let camera, scene, renderer;
let mesh;
const AMOUNT = 6;

init();
animate();

function init() {
   

  const ASPECT_RATIO = window.innerWidth / window.innerHeight;
  const WIDTH = ( window.innerWidth / AMOUNT ) * window.devicePixelRatio;
  const HEIGHT = ( window.innerHeight / AMOUNT ) * window.devicePixelRatio;
  const cameras = [];
  
  for ( let y = 0; y < AMOUNT; y ++ ) {
   
    for ( let x = 0; x < AMOUNT; x ++ ) {
   
      //构建5个透视相机
      const subcamera = new THREE.PerspectiveCamera( 40, ASPECT_RATIO, 0.1, 10 );
		//规定每个相机的各项属性
		//...略
	    cameras.push( subcamera );
	}
}

camera = new THREE.ArrayCamera( cameras );

下面这个是举例渲染器渲染时如何渲染这种ArrayCamera:

function animate() {
   
  mesh.rotation.x += 0.005;  //模型自移动动画-x
  mesh.rotation.z += 0.01;   //模型自移动动画-z
  renderer.render( scene, camera );  //渲染器渲染每个相机
  requestAnimationFrame( animate );
}

---

Camera()

不是一种相机, 这就是一个基础类, 平时也用不上.
camera类会在创建相机时被继承, carema类上的属性有直接继承自Object3D的, 然后在camera的构造函数里又new了一些内matrix4的函数, 这样camera也拥有了一些matrix4的属性, 这样一来相机创建时也会继承这些方法和属性.
所以我们可能会更多使用到它的一些方法和属性而不是它本身.

---

CubeCamera()

???

---

OrthographicCamera()

OrthographicCamera类被调用时会继承camera类, 因此也可以调用camera类的属性和方法, 另外由于是3D对象所以也可以使用Object3D的属性和方法.
在该模式下相机使用正交投影模式, 无论物体距离相机距离远或者近, 在最终渲染的图片中, 物体的大小都保持不变.

const camera = new THREE.OrthographicCamera( 
视锥体左侧长度left, 
视锥体右侧长度right, 
视锥体上边长top, 
视锥体下边长bottom, 
视锥体近端面near, 
视锥体远端面far
);
scene.add( camera ); //将camera加入场景

の…近远端面的概念可能有些难以理解, 我引用一下官方的例子:

近远端面之间的空间是可见部分, 远于远端面的模型不可见, 近于近端面的模型也是不可见的.
new一个构造函数会得到一个对象, 那么对carema进行操作也理所应当可以改动new OrthographicCamera时传入的参数:

const camera = new THREE.OrthographicCamera( 700, 700, 700, 700, 1, 1000 );

scene.add( camera );  //对camera的属性更改不会因为提前渲染相机而不生效.

camera.position.set(1, 10, 0);
camera.bottom = 200

具体可以改动哪些属性只要输出一下camera查看即可;
.position: 设置相机位置, OrthographicCamera的文档并没有标示出这个属性, 但是Three.js有一个Object3D的概念, 只要这个东西是一个3D对象那么它就具备Object3D的属性和方法, 相机当然是3D对象, 所以这里我们也可以设置Object3D提供的position属性, 它的值应当为一个Vector3格式, 即三维向量.

引用一下官方的例子:
Three.js - webgl_postprocessing_advanced源码

let cameraOrtho, cameraPerspective;