Three.js开发3D图像技术基础知识Three.js 概述 Three.js 是一个基于 WebGL 的 JavaS

Three.js简介

Three.js 概述 Three.js 是一个基于 WebGL 的 JavaScript 库，用于在浏览器中创建和展示3D图形。WebGL 是一种在浏览器中直接支持硬件加速的3D图形接口，但它的API直接使用起来非常底层和复杂。Three.js 提供了一层抽象，使得开发者能够更容易地创建复杂的3D场景、对象、动画和交互。它包括了场景管理、几何形状、材质、光源、相机、动画系统等多个组件，同时还处理了兼容性问题，使得3D图形可以在多种现代浏览器上运行。

官方文档和资源导航

Three.js官方网站及文档:

Three.js官网 Three.js官方文档：这里包含了详尽的API参考、指南和教程，帮助你学习和使用Three.js的所有功能。

GitHub仓库:

Three.js GitHub: 这里你可以找到Three.js的源代码，查看提交记录，提交问题或贡献代码。

示例和教程:

Three.js在线示例：官方提供的一系列示例代码，覆盖了从基础到高级的多种应用场景，非常适合作为学习的起点。 Three.js Fundamentals：这是一个非官方但非常受欢迎的学习资源，提供了大量教程和深入解释，适合各个层次的学习者。

社区与支持:

Three.js论坛：官方论坛，可以在这里提问、分享项目或寻找解决方案。 Stack Overflow上的Three.js标签：在Stack Overflow上查找或提出有关Three.js的问题，这是一个活跃的技术问答社区。社交媒体：关注Three.js的Twitter账号获取最新动态和社区信息。

中文资源:

Three.js中文文档：这是一个非官方的中文文档网站，提供了Three.js的中文翻译文档，适合中文用户学习。本地搭建Three.js官方文档：如果你想在本地搭建Three.js的文档环境，可以参考GitHub上的这个仓库。

Three.js特点

易用性：Three.js 提供了高级接口，让开发者无需深入了解底层WebGL API就能创建3D应用。
广泛支持：Three.js 兼容多种浏览器，包括桌面和移动设备，减少了跨平台的开发工作。
丰富的功能：内置了许多3D对象、几何形状、纹理、光照和相机类型，以及动画和物理系统的支持。
活跃的社区：有大量示例、插件和教程，以及活跃的开发者社区，方便学习和解决问题。
性能优化：Three.js 对一些常见操作进行了优化，如批处理渲染，以提高性能。

环境搭建

HTML 文件：

首先，你需要一个HTML文件来承载你的JavaScript代码和WebGL画布。在<head>部分引入Three.js库文件，这通常是three.js或压缩后的three.min.js。

   <!DOCTYPE html>
   <html>
   <head>
     <title>My First Three.js Scene</title>
     <script src="path/to/three.js"></script>
   </head>
   <body>
     <canvas id="canvas"></canvas>
     <script src="main.js"></script>
   </body>
   </html>

CSS：

可以设置一些基本的CSS，确保画布占满整个视口。

   body { margin: 0; }
   canvas { display: block; }

JavaScript 文件（main.js）：

在JavaScript文件中，创建一个场景（Scene）、相机（Camera）、渲染器（Renderer），并添加一个简单的3D物体，例如一个立方体（Cube）。

   var scene = new THREE.Scene();
   var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
   var renderer = new THREE.WebGLRenderer();
   renderer.setSize(window.innerWidth, window.innerHeight);
   document.body.appendChild(renderer.domElement);

   var geometry = new THREE.BoxGeometry(1, 1, 1);
   var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   var cube = new THREE.Mesh(geometry, material);
   scene.add(cube);

   camera.position.z = 5;

   function animate() {
     requestAnimationFrame(animate);
     renderer.render(scene, camera);
   }
   animate();

上面创建一个绿色的立方体，置于相机前方，并在页面上持续渲染。requestAnimationFrame(animate)用于创建动画，不断地重新渲染场景。

场景

在Three.js中，THREE.Scene类是3D场景的基础，它是一个容器，用于存储所有要在3D空间中渲染的对象，包括几何体、光源、相机和其他辅助对象。

基本结构

创建一个场景非常简单，只需调用new THREE.Scene()。这个构造函数不接受任何参数，它初始化了场景的一些内部属性，如children数组，用于存储场景中的所有对象。

const scene = new THREE.Scene();

属性

THREE.Scene继承自THREE.Object3D，因此它具有Object3D的所有属性。主要关注以下几个关键属性：

children: 一个数组，包含了场景中的所有子对象，如几何体、相机、光源等。
fog: 可选的雾（fog）效果，可以是THREE.Fog或THREE.FogExp2的一个实例，影响场景中远处物体的可见性。
background: 可以设置为颜色、纹理或渐变，定义场景的背景。

方法

THREE.Scene同样继承了THREE.Object3D的大部分方法，包括但不限于：

add(object): 添加一个3D对象到场景的子对象列表中。
remove(object): 从场景中移除一个3D对象。
getObjectById(id): 根据对象的ID获取对象。
getObjectByName(name): 根据对象的名称获取对象。
raycast(raycaster, intersects): 用于执行射线投射，用于检测鼠标或触摸事件与场景中对象的交互。
traverse(callback): 遍历场景图中的所有子对象，对每个对象执行回调函数。

// 引入Three.js库
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);

// 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载环境纹理
const environmentTextureLoader = new THREE.TextureLoader();
const environmentMap = environmentTextureLoader.load('path/to/environment_map.jpg');

// 创建立方体
const cubeGeo = new THREE.BoxGeometry(2, 2, 2);
const cubeMat = new THREE.MeshPhongMaterial({
  color: 0x44aa88,
  envMap: environmentMap,
});
const cube = new THREE.Mesh(cubeGeo, cubeMat);
cube.rotation.x = -0.2;
scene.add(cube);

// 创建球体
const sphereGeo = new THREE.SphereGeometry(1, 32, 32);
const sphereMat = new THREE.MeshPhongMaterial({
  color: 0xff8844,
  envMap: environmentMap,
});
const sphere = new THREE.Mesh(sphereGeo, sphereMat);
sphere.position.y = 3;
scene.add(sphere);

// 添加光照
const ambientLight = new THREE.AmbientLight(0x404040); // soft white light
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

const pointLight = new THREE.PointLight(0xff0000, 1, 100);
pointLight.position.set(-10, 20, 15);
scene.add(pointLight);

// 添加雾效果
scene.fog = new THREE.FogExp2(0x000000, 0.002); // black fog with low density

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.y += 0.01;
  sphere.rotation.y -= 0.01;
  renderer.render(scene, camera);
}
animate();

代码分析：

创建了一个场景和相机，相机被放置在一个观察位置。
设置了一个WebGL渲染器，并将其附加到HTML文档中。
加载了一个环境纹理，并将其应用到立方体和球体的材质上，这样物体表面会反映出环境的映射。
创建了两个不同的3D几何体（立方体和球体），并分别设置了材质和位置。
添加了三种不同类型的光照：环境光（AmbientLight），平行光（DirectionalLight）和点光源（PointLight），以产生不同的光照效果。
设置了线性雾（FogExp2），当物体远离相机时，它们会逐渐消失在黑色的雾中。

物体

在Three.js中，创建和操作3D物体通常涉及以下几个步骤：创建几何体（Geometry）、定义材质（Material）以及组合这两个元素创建Mesh，然后将其添加到场景（Scene）中。

// 引入Three.js库
import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // 设置相机位置

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1); // 宽度、高度、深度各为1

// 创建红色材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 红色

// 创建Mesh（物体）
const cube = new THREE.Mesh(geometry, material); // 将几何体和材质组合成Mesh

// 将Mesh添加到场景中
scene.add(cube);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

代码分析：

导入Three.js库：通常通过模块导入，这里使用的是ES模块导入语法。
创建场景：THREE.Scene是所有3D对象的容器。
创建相机：THREE.PerspectiveCamera用于定义视角，参数分别为视角角度、宽高比、近裁剪平面和远裁剪平面。
创建渲染器：THREE.WebGLRenderer负责将3D场景渲染到屏幕，设置渲染器大小并将其附加到HTML文档中。
创建几何体：THREE.BoxGeometry创建一个立方体的形状，参数表示边长。
创建材质：THREE.MeshBasicMaterial是最简单的材质类型，color属性设置为红色（十六进制值0xff0000代表红色）。
创建Mesh：THREE.Mesh是实际的3D物体，由几何体和材质组合而成。
添加Mesh到场景：将创建的立方体Mesh添加到场景中。
渲染循环：requestAnimationFrame用于创建动画循环，不断调用renderer.render渲染场景和相机视图。

相机

在Three.js中，相机（Camera）是观察3D场景的关键元素。相机定义了用户观察3D世界的视点和视角。

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 设置相机位置
camera.position.set(0, 3, 5);

代码分析：

创建相机：THREE.PerspectiveCamera是Three.js中最常用的相机类型，它模拟人眼的透视视角。构造函数接收四个参数：

fov（Field of View）：视角，以度数表示。较大的值会显示更广阔的视野，但物体看起来更小；较小的值则相反。
aspect：画面宽高比，通常是窗口宽度除以高度。
near：近裁剪面，相机能显示的最近距离。
far：远裁剪面，相机能显示的最远距离。

设置相机位置：camera.position.set(x, y, z)用于设置相机在3D空间中的位置。在这个例子中，相机位于(0, 3, 5)的位置，这意味着它在X轴的正方向上离原点0单位，Y轴上3单位，Z轴上5单位。这个位置通常根据场景的需求进行调整，以达到理想的观察效果。

相机的其他重要属性和方法包括：

.lookAt()：使相机朝向特定的目标点。
.rotateOnAxis() 和 .rotateX(), .rotateY(), .rotateZ()：用于旋转相机。
.zoom：控制相机的焦距，影响视角的宽窄。

渲染器

在Three.js中，渲染器（Renderer）是将3D场景转换为2D图像显示在屏幕上的关键组件。以下是创建和配置渲染器的典型代码，以及对其关键部分的解析：

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true, // 反锯齿
});

// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器的canvas元素添加到HTML文档中
document.body.appendChild(renderer.domElement);

代码解析：

创建渲染器：THREE.WebGLRenderer是Three.js的主要渲染器，它利用WebGL API在浏览器中绘制3D图形。构造函数可以接受一个配置对象作为参数，其中antialias是可选的，设置为true开启反锯齿，以获得更平滑的边缘。
设置渲染器尺寸：setSize(width, height)方法用于设置渲染器输出的canvas元素的宽度和高度。通常我们会将其设置为浏览器窗口的宽度和高度，以确保全屏显示。
添加到文档：renderer.domElement返回渲染器生成的canvas元素，将其添加到HTML文档的body元素中，这样渲染器就可以开始工作并显示3D场景。

除了上述基本配置，渲染器还可以进行其他高级设置，例如：

颜色清除：renderer.clearColor(color, alpha)可以设置背景颜色和透明度。
阴影支持：renderer.shadowMap.enabled = true开启阴影支持。
线框模式：renderer_wireframe = true可以切换到线框模式，显示模型的轮廓。
性能优化：renderer.sortObjects = false关闭对象排序，可能会提高渲染速度，但可能导致某些效果不正确。

在渲染循环中，renderer.render(scene, camera)是实际进行渲染的命令，它将当前场景和相机视图呈现到canvas上。例如：

function animate() {
  requestAnimationFrame(animate);
  // 更新物体、动画等...
  renderer.render(scene, camera);
}
animate();

这个animate函数会每帧调用一次，确保连续渲染3D场景。

基本几何体

在Three.js中，几何体（Geometry）是3D物体的基础形状，它们可以是简单的形状如立方体、球体，也可以是自定义的复杂形状。

立方体（BoxGeometry）：

   const geometry = new THREE.BoxGeometry(1, 1, 1);

这个例子创建了一个边长为1的立方体。BoxGeometry的参数分别表示宽度、高度和深度。

球体（SphereGeometry）：

   const geometry = new THREE.SphereGeometry(0.5, 32, 32);

创建了一个半径为0.5的球体。参数分别是球体的半径，以及用于定义纬度和经度的细分数量。

圆柱体（CylinderGeometry）：

   const geometry = new THREE.CylinderGeometry(0.5, 1, 1, 32, 1, false);

这个例子创建了一个底面半径为0.5，顶面半径为1，高度为1的圆柱体。参数依次是底部半径、顶部半径、高度、圆周细分、高度细分和是否封闭底部。

圆锥体（ConeGeometry）：

   const geometry = new THREE.ConeGeometry(0, 1, 32);

创建了一个底面半径为0，顶部半径为1，高度为1的圆锥。参数分别是底部半径、顶部半径和高度细分。

圆环面（RingGeometry）：

   const geometry = new THREE.RingGeometry(0.2, 0.5, 32, 8, Math.PI * 2, 0);

创建了一个内半径为0.2，外半径为0.5的圆环面。参数分别是内半径、外半径、圆环的径向细分、环形细分、圆环的开始角度和结束角度。

平面（PlaneGeometry）：

   const geometry = new THREE.PlaneGeometry(10, 10, 32, 32);

创建了一个宽10，高10的平面。参数分别是宽度、高度和沿X轴和Y轴的细分。

圆面（CircleGeometry）：

   const geometry = new THREE.CircleGeometry(1, 32, 0, Math.PI * 2);

创建了一个半径为1的圆形面。参数分别是半径、细分数量、起始角度和结束角度。

在实际应用中，这些几何体会与材质（Material）结合创建Mesh对象，然后添加到场景（Scene）中进行渲染。例如：

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

自定义几何体

对于更复杂的形状，Three.js允许你通过直接操作顶点、面等来创建自定义几何体。虽然直接操作较为复杂，但它提供了极高的灵活性。

const geometry = new THREE.Geometry();

// 添加顶点
geometry.vertices.push(new THREE.Vector3(-1, -1, 0));
geometry.vertices.push(new THREE.Vector3(1, -1, 0));
geometry.vertices.push(new THREE.Vector3(0, 1, 0));

// 添加面（三角形）
const face = new THREE.Face3(0, 1, 2);
geometry.faces.push(face);

// 计算面的法线
geometry.computeFaceNormals();

这段代码创建了一个简单的三角形几何体。通过这种方式，你可以创建任何形状的几何体。

缓冲几何体（BufferGeometry）

与标准的Geometry相比，BufferGeometry在性能上有显著提升，尤其是在处理大量顶点时。它是通过直接操作顶点数组来工作的。

const geometry = new THREE.BufferGeometry();

const vertices = new Float32Array([
  -1, -1, 0,
   1, -1, 0,
   0,  1, 0
]);

const vertexBuffer = new THREE.BufferAttribute(vertices, 3);
geometry.setAttribute('position', vertexBuffer);

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

几何体的合并与分割

几何体合并：可以将多个几何体合并成一个，减少渲染调用，提高性能。

const combinedGeometry = new THREE.Geometry().merge(geometry1);
combinedGeometry.merge(geometry2);

几何体分割：有时你可能需要从一个复杂的几何体中提取或分割出部分形状。这通常涉及到复杂的算法，Three.js本身不直接提供分割几何体的功能，但可以通过第三方库如three-bvh来实现。

动态几何体

对于需要在运行时动态改变的几何体，可以使用BufferGeometry的.setAttribute()方法更新顶点数据，然后调用.needsUpdate标志更新。

geometry.attributes.position.array[0] += 0.1; // 修改第一个顶点的x坐标
geometry.attributes.position.needsUpdate = true; // 标记需要更新

材质

在Three.js中，材质（Material）决定了3D物体表面的外观。材质可以是简单的颜色，也可以包含复杂的纹理和光照效果。

基本材质（MeshBasicMaterial）：

   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

这是最简单的材质，不依赖光照，颜色是固定的。

兰伯特材质（MeshLambertMaterial）：

   const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

兰伯特材质考虑了环境光和漫反射光，但不考虑镜面反射。

冯氏材质（MeshPhongMaterial）：

   const material = new THREE.MeshPhongMaterial({
     color: 0x00ff00,
     shininess: 30, // 镜面光泽度
   });

冯氏材质提供了更真实的光照效果，包括漫反射、镜面反射和环境光。

标准材质（MeshStandardMaterial）：

   const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });

标准材质是基于物理的材质模型，适用于PBR（基于物理的渲染）场景，考虑了金属度、粗糙度等特性。

带纹理的材质：

   const textureLoader = new THREE.TextureLoader();
   const texture = textureLoader.load('path/to/texture.jpg');
   const material = new THREE.MeshPhongMaterial({ map: texture });

这里使用TextureLoader加载纹理图片，并将其应用到材质的map属性上。

透明材质（MeshBasicMaterial）：

javascript
   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, transparent: true, opacity: 0.5 });

设置transparent为true和opacity属性来实现透明效果。

带法线贴图的材质：

   const normalMap = textureLoader.load('path/to/normalMap.jpg');
   const material = new THREE.MeshPhongMaterial({
     color: 0x00ff00,
     normalMap: normalMap,
     normalScale: new THREE.Vector2(1, 1), // 控制法线贴图的强度
   });

法线贴图可以给物体表面添加额外的细节和深度。

在实际应用中，材质通常会与几何体结合创建Mesh对象，然后添加到场景中进行渲染。例如：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

这将创建一个具有指定材质的立方体，并将其添加到场景中。

除了上述的基本材质，Three.js还提供了许多其他材质类型和特性，以满足各种3D渲染需求。

环境映射（Environment Mapping）：

   const cubeTextureLoader = new THREE.CubeTextureLoader();
   const environmentMap = cubeTextureLoader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
   const material = new THREE.MeshStandardMaterial({ envMap: environmentMap });

环境映射可以模拟物体表面如何反射周围环境。这里使用CubeTextureLoader加载六个面的纹理图片来创建环境映射。

自发光材质（MeshEmissiveMaterial）：

   const material = new THREE.MeshEmissiveMaterial({ emissive: 0xff0000 });

自发光材质使物体自身发出光线，不依赖外部光源。

混合材质（Mixing Materials）：

   const materialA = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
   const materialB = new THREE.MeshBasicMaterial({ color: 0xff0000 });
   const mixedMaterial = new THREE.MeshStandardMaterial();
   mixedMaterial.blending = THREE.AdditiveBlending;
   mixedMaterial.depthWrite = false;
   mixedMaterial.opacity = 0.5;
   mixedMaterial.transparent = true;
   mixedMaterial.color = new THREE.Color().addColors(materialA.color, materialB.color);

通过混合两种材质，可以创建独特的视觉效果。这里使用AdditiveBlending进行颜色相加。

着色器材质（ShaderMaterial）：

   const uniforms = {
     time: { value: 0 },
     resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
   };
   const vertexShader = /* glsl code */;
   const fragmentShader = /* glsl code */;
   const material = new THREE.ShaderMaterial({ uniforms, vertexShader, fragmentShader });

着色器材质允许你编写自定义的顶点和片段着色器代码（GLSL语言），实现高度定制的视觉效果。

多材质（Multi-Materials）：

   const materials = [new THREE.MeshBasicMaterial(), new THREE.MeshBasicMaterial()];
   const group = new THREE.Group();
   const geometry = new THREE.Geometry();
   geometry.merge(new THREE.BoxGeometry(1, 1, 1), new THREE.Matrix4(), 0);
   geometry.merge(new THREE.BoxGeometry(1, 1, 1), new THREE.Matrix4().makeTranslation(2, 0, 0), 1);
   for (let i = 0; i < geometry.faces.length; i++) {
     geometry.faces[i].materialIndex = i % materials.length;
   }
   const mesh = new THREE.Mesh(geometry, materials);
   group.add(mesh);
   scene.add(group);

多材质允许你在同一物体的不同部分使用不同的材质。这里创建了一个包含两个子物体的组，每个子物体使用不同的材质。

纹理

在Three.js中，纹理是赋予3D物体表面视觉细节的重要工具。

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/image.jpg');

// 创建材质
const material = new THREE.MeshBasicMaterial({ map: texture });

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建Mesh
const mesh = new THREE.Mesh(geometry, material);

// 添加到场景
scene.add(mesh);

代码分析：

创建纹理加载器：THREE.TextureLoader用于异步加载纹理图像。
加载纹理：load(url)方法用于指定纹理文件的URL，它返回一个Promise，当纹理加载完成时解析为THREE.Texture对象。
创建材质：THREE.MeshBasicMaterial是一个简单的材质类型，它接受一个对象作为参数，其中map属性是纹理对象。这将把纹理贴图应用到物体表面。
创建几何体：在这个例子中，我们使用一个边长为1的立方体THREE.BoxGeometry。
创建Mesh：THREE.Mesh是3D场景中的基本实体，它由几何体和材质组成。
添加到场景：最后，将Mesh添加到THREE.Scene中，以便在渲染时可见。

这个例子中，image.jpg应该替换为你实际的纹理图片路径。纹理可以是简单的图片，也可以是立方体贴图（用于环境映射）或其他类型的贴图，如法线贴图、置换贴图等。纹理的大小应与物体表面的比例相匹配，以保持正确的视觉效果。

除了基本的2D纹理，Three.js还支持其他类型的纹理，如立方体贴图（CubeTexture）、视频纹理（VideoTexture）和数据纹理（DataTexture）。

立方体贴图（CubeTexture）：

   const cubeTextureLoader = new THREE.CubeTextureLoader();
   cubeTextureLoader.setPath('path/to/cubemap/');
   const cubeTexture = cubeTextureLoader.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);

   const material = new THREE.MeshStandardMaterial({ envMap: cubeTexture });

立方体贴图用于环境映射，它由六个面的图像组成，分别对应正X、负X、正Y、负Y、正Z和负Z方向。

视频纹理（VideoTexture）：

   const video = document.createElement('video');
   video.src = 'path/to/video.mp4';
   video.autoplay = true;
   video.loop = true;

   const videoTexture = new THREE.VideoTexture(video);
   videoTexture.minFilter = THREE.LinearFilter;

   const material = new THREE.MeshBasicMaterial({ map: videoTexture });

   const geometry = new THREE.PlaneGeometry(10, 10);
   const mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);

视频纹理将视频流作为物体的表面贴图。注意，需要确保视频自动播放且循环。

数据纹理（DataTexture）：

   const data = new Uint8Array(1024 * 1024 * 3); // 假设1024x1024像素的RGB数据
   const dataTexture = new THREE.DataTexture(data, 1024, 1024, THREE.RGBFormat);
   dataTexture.needsUpdate = true;

   const material = new THREE.MeshBasicMaterial({ map: dataTexture });

数据纹理允许你直接使用数组数据创建纹理，适用于自定义着色器或处理大量数据。

Three.js开发3D图像技术基础知识

目录

Three.js简介

官方文档和资源导航

Three.js官方网站及文档:

GitHub仓库:

示例和教程:

社区与支持:

中文资源:

Three.js特点

环境搭建

HTML 文件：

CSS：

JavaScript 文件（main.js）：

场景

基本结构

属性

方法

代码分析：

物体

代码分析：

相机

代码分析：

相机的其他重要属性和方法包括：

渲染器

代码解析：

基本几何体

立方体（BoxGeometry）：

球体（SphereGeometry）：

圆柱体（CylinderGeometry）：

圆锥体（ConeGeometry）：

圆环面（RingGeometry）：

平面（PlaneGeometry）：

圆面（CircleGeometry）：

自定义几何体

缓冲几何体（BufferGeometry）

几何体的合并与分割

动态几何体

材质

基本材质（MeshBasicMaterial）：

兰伯特材质（MeshLambertMaterial）：

冯氏材质（MeshPhongMaterial）：

标准材质（MeshStandardMaterial）：

带纹理的材质：

透明材质（MeshBasicMaterial）：

带法线贴图的材质：

环境映射（Environment Mapping）：

自发光材质（MeshEmissiveMaterial）：

混合材质（Mixing Materials）：

着色器材质（ShaderMaterial）：

多材质（Multi-Materials）：

纹理

立方体贴图（CubeTexture）：

视频纹理（VideoTexture）：

数据纹理（DataTexture）：