一、new THREE.WebGLRenderer
1.创建 WebGL 渲染器： const renderer = new THREE.WebGLRenderer();
2.WebGL 渲染器对象具有许多可设置的属性，以下是其中一些常用的属性
WebGL 渲染器对象具有许多可设置的属性，以下是其中一些常用的属性：
1）domElement：渲染器使用的 Canvas 元素。你可以将该元素添加到网页中的某个位置，或者直接使用
document.body.appendChild(renderer.domElement) 将其添加到 <body> 元素中。
2）setSize(width, height)：设置渲染器的输出画布大小。通常与窗口大小保持一致，可以使用 window.innerWidth 和 window.innerHeight 来设置。
3）setPixelRatio(value)：设置设备像素比。默认情况下，该值为 window.devicePixelRatio，适应高 DPI 屏幕。
4）setClearColor(color, alpha)：设置渲染器的清除颜色和透明度。例如，renderer.setClearColor(0x000000, 1) 将清除颜色设置为黑色。
5）shadowMap.enabled：启用或禁用阴影渲染。默认情况下为 false，如果你的场景中有需要显示阴影的光源和物体，需要将其设置为 true。
6）sortObjects：设置渲染器是否根据物体的远近进行排序。默认情况下为 true，以提高渲染性能。
7）gammaFactor：设置渲染器的 gamma 校正因子。默认为 2.0，可以根据需要进行调整。
8）WebGL 渲染器的配置选项：
1. antialias： 用于抗锯齿的。启用抗锯齿后，渲染出来的图像边缘会更加平滑，没有明显的锯齿状边缘(默认情况下，antialias 的值为false.需要注意的是，启用抗锯齿会降低渲染性能，因此建议在需要时才启用)
=>启用抗锯齿的代码如下：const renderer = new THREE.WebGLRenderer({ antialias: true });
2.alpha: 如果将 alpha 设置为 true，则渲染器将输出带有 alpha 通道的 PNG 图片。如果不需要输出透明度，则可以将 alpha 设置为 false(默认情况下，alpha 的值也是 false)
=>设置 alpha 的代码如下:const renderer = new THREE.WebGLRenderer({ alpha: true });
=>需要注意的是，启用透明度可能会降低渲染性能。另外，如果将 alpha 设置为 true，则在将渲染器输出到 Canvas 元素上时，该元素必须具有 transparent 属性，否则透明度会被忽略，无法正确显示。例如：
const renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0x000000, 0); // 设置背景颜色为黑色，透明度为 0，即完全不透明
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 将 Canvas 元素的 transparent 属性设置为 true
renderer.domElement.setAttribute('style', 'position: absolute; top: 0; left: 0; z-index: -1;');
renderer.domElement.setAttribute('width', window.innerWidth);
renderer.domElement.setAttribute('height', window.innerHeight);
renderer.domElement.setAttribute('transparent', 'true');
这只是一部分可设置的属性，WebGL 渲染器还有其他许多属性和方法可供使用。你可以查阅 Three.js 的文档来获取更详细的信息：https://threejs.org/docs/#api/en/renderers/WebGLRenderer
二、new THREE.PerspectiveCamera()
相机选择(正投影OrthographicCamera和透视投影PerspectiveCamera)
如果你想预览一个三维场景，一般有正投影相机OrthographicCamera和透视投影相机PerspectiveCamera可供选择。不过大部分3D项目，比如一般都是使用透视投影相机PerspectiveCamera，比如游戏、物联网等项目都会选择透视投影相机PerspectiveCamera。
1.Three.js 中创建透视投影相机的方法之一。透视投影相机是一种模拟人眼视觉的相机类型，可以呈现出逼真的 3D 效果
2.创建透视投影相机的代码如下：const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
其中各参数的含义如下：
1）fov（Field of View）：相机视锥体垂直方向上的张角，单位为度。值越大表示可视范围越宽广，但也会导致图像变形。通常在 45° 到 90° 之间选择。
2）aspect：相机视锥体的长宽比，即视图宽度除以高度。一般使用渲染器输出画布的宽高比，例如 window.innerWidth/window.innerHeight。
3）near：相机视锥体近端面距离相机的距离。近端面内的物体不会被渲染出来，因此需要根据场景中物体的远近关系进行调整。通常取正数，例如 0.1。
4）far：相机视锥体远端面距离相机的距离。远端面外的物体也不会被渲染出来，因此需要根据场景中物体的远近关系进行调整。通常取正数，例如 1000。
==》除了以上四个参数外，透视投影相机还有许多其他可设置的属性。以下是其中一些常用的属性：
1）position：相机位置向量，即相机所在的位置。默认为 (0, 0, 0)。
2）rotation：相机旋转欧拉角，即相机朝向。默认为 (0, 0, 0)。
3）fov、aspect、near 和 far 可以通过相应的 setter 方法进行修改，例如 camera.setFov(60)。
4）lookAt(target)：将相机的朝向设置为目标位置，例如 camera.lookAt(new THREE.Vector3(0, 0, 0)) 将相机指向场景原点。
5）translateX(x)、translateY(y) 和 translateZ(z)：将相机沿着自身坐标系的 X、Y 或 Z 轴平移给定的距离，例如 camera.translateZ(-10) 将相机向前移动 10 个单位。
6）up：相机的上向量，默认为 (0, 1, 0)。可以通过 camera.up.set(x, y, z) 来修改。
这只是一部分可设置的属性，透视投影相机还有其他许多属性和方法可供使用。你可以查阅 Three.js 的文档来获取更详细的信息：https://threejs.org/docs/#api/en/cameras/PerspectiveCamera
三、new THREE.Vector3().fromArray([-1, -4, 6])
1、Three.js 中创建三维向量的方法，可以用来表示三维空间中的位置、方向等信息。而 fromArray() 则是将一个数组转化为向量的方法
2. 在 new THREE.Vector3().fromArray([-1, -4, 6]) 中，[-1, -4, 6] 是一个包含三个元素的数组，分别对应 x、y、z 三个方向上的值。这个数组被传递给 fromArray() 方法，这个方法会将数组中的值依次赋给向量的 x、y、z 属性，从而创建一个新的三维向量。因此，上述代码的执行结果是一个 x 坐标为 -1、y 坐标为 -4、z 坐标为 6 的三维向量。
需要注意的是，fromArray() 方法只能接受一维数组作为参数。如果要创建多个向量，可以在数组中交替存储它们的坐标值，然后使用 fromArray() 方法逐个提取出来。例如：
const positions = [-1, -4, 6, 2, 5, -3, 0, 1, 8];
const vec1 = new THREE.Vector3().fromArray(positions, 0);
const vec2 = new THREE.Vector3().fromArray(positions, 3);
const vec3 = new THREE.Vector3().fromArray(positions, 6);
这样就可以从 positions 数组中分别提取出三个向量。其中，fromArray(positions, offset) 方法的第二个参数 offset 表示从数组的第几个元素开始读取，默认为 0。
总之，new THREE.Vector3().fromArray([-1, -4, 6]) 是将一个数组转化为三维向量的方法，可以用于创建表示位置、方向等三维信息的对象。
四、new THREE.BoxGeometry()
1.three.js提供的矩形平面PlaneGeometry、长方体BoxGeometry、球体SphereGeometry等各种形状的几何体，他们都有一个共同的父类BufferGeometry。这意味着这些几何体有哪些属性或方法，你可以查询文档关于BufferGeometry的介绍。网址为：http://www.webgl3d.cn/pages/d8b07b/
2.BoxGeometry 的构造函数可以传入三个参数：width（宽度）、height（高度）、depth（深度）。这些参数分别表示立方体的宽度、高度和深度。例如：const geometry = new THREE.BoxGeometry(1, 2, 3);上述代码将创建一个宽度为 1、高度为 2、深度为 3 的立方体几何体对象。
3.此外，BoxGeometry 还支持可选参数 widthSegments（宽度分段数）、heightSegments（高度分段数）、depthSegments（深度分段数）。这些参数可以用来控制立方体模型的细分程度，以获得更加平滑的外观。默认情况下，这些参数的值为 1，表示不进行细分。例如：
const geometry = new THREE.BoxGeometry(1, 2, 3, 2, 3, 4);
上述代码将创建一个宽度为 1、高度为 2、深度为 3 的立方体几何体对象，并将其在宽度、高度和深度上分别细分为 2、3、4 个子段。
4.总结起来，new THREE.BoxGeometry() 是用于创建立方体几何体的构造函数。它可以根据指定的尺寸和分段数创建一个立方体模型。参数包括：宽度、高度、深度以及可选的宽度分段数、高度分段数、深度分段数。
五、new THREE.Mesh()
1、 Three.js 中用于创建网格对象的构造函数。通过将几何体（例如 BoxGeometry、SphereGeometry 等）和材质（例如 MeshBasicMaterial、MeshPhongMaterial 等）组合在一起，可以创建一个可渲染的网格模型。
2、Mesh 的构造函数接受两个参数：geometry 和 material。其中，geometry 是一个几何体对象，用于定义网格的形状，而 material 是一个材质对象，用于定义网格的外观。
3、下面是一个示例代码，展示如何使用 new THREE.Mesh() 创建一个立方体的网格模型：
// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个基础材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建一个网格对象，并将几何体和材质传入
const mesh = new THREE.Mesh(geometry, material);
上述代码中，我们首先创建了一个立方体几何体 geometry，然后创建了一个基础材质 material，最后使用这两个对象创建了一个网格对象 mesh。这个网格对象可以被添加到场景中进行渲染。
通过调整几何体和材质的参数，我们可以创建各种不同形状和外观的网格模型。Three.js 还提供了其他类型的几何体和材质，可以根据需求选择合适的组合来创建网格模型。
六、加载外部三维模型：
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 创建GLTF加载器对象
const loader = new GLTFLoader();
// gltf加载器方法.load()
loader.load( 'gltf模型.gltf', function ( gltf ) {
console.log('控制台查看加载gltf文件返回的对象结构',gltf);
console.log('gltf对象场景属性',gltf.scene);
// 返回的场景对象gltf.scene插入到threejs场景中
scene.add( gltf.scene );
})
Three.js中文官网网址：www.webgl3d.cn/pages/c8609… WebGL教程网址：www.webgl3d.cn/WebGL/ WebGL课程：（个人推荐） 1、初级课程 视频地址：www.bilibili.com/video/BV1Kb… 资料地址：gitee.com/jsonco/webg… 2、中级课程 视频地址：www.bilibili.com/video/BV1nL… 课程目录：www.processon.com/embed/623fc… 资料地址：gitee.com/jsonco/webg…
