前言
学习three.js最好的方法是通过理解它的核心概念和最常用的组件。
1. 基础概念
场景（Scene）： three.js中所有物体的容器。你可以把它想象成一个舞台，在这里添加物体、光源等。
var scene = new THREE.Scene();
相机（Camera）： 决定了哪部分场景会被渲染。最常用的是透视相机（PerspectiveCamera）。
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;
除了透视相机，还有正交相机(OrthographicCamera).
不说八股文,就说在实战中的体验:
透视相机,在左右移动时,会变形(会有一种拉扯的感觉);
正交相机不会有拉扯的感觉
渲染器（Renderer）： 用于在一个元素上渲染图像。
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//renderer.domElement 是three.js的渲染器的HTML元素,document.body是文档的主体
上面这三句是你在用到渲染器时,必定要写的,这是将three.js场景渲染到屏幕的一种方式.
几何体（Geometry）： 物体的形状。比如，BoxGeometry 是一个立方体。
var geometry = new THREE.BoxGeometry(1, 1, 1);
材质（Material）： 物体的外观（颜色、纹理）。
var material = new THREE.MeshBasicMaterial(
{
color: 0x00ff00
}
);
网格（Mesh）： 几何体和材质的组合，可以添加到场景中。
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
光源（Lights）： 照亮场景中的物体。常见的有环境光（AmbientLight）和点光源（PointLight）。
var light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(50, 50, 50);
scene.add(light);
动画循环（Animation Loop）： 用于在每帧更新场景和渲染。
function animate() {
requestAnimationFrame(animate);
// 任何动画的更新
renderer.render(scene, camera);
}
animate();
2. 着色器（Shaders）
着色器是three.js中较高级的概念，用于自定义物体的渲染方式。着色器写在GLSL（OpenGL Shading Language）中，分为两种：
- 顶点着色器（Vertex Shader）： 处理每个顶点的逻辑，如位置、颜色等。
- 片元着色器（Fragment Shader）： 处理最终像素的颜色和外观。
使用着色器时，你通常会创建一个ShaderMaterial或RawShaderMaterial，并提供顶点和片元着色器的代码：
var shaderMaterial = new THREE.ShaderMaterial({
vertexShader: `...`, // GLSL代码
fragmentShader: `...`, // GLSL代码
});
3. 其他概念
- 纹理（Textures）： 用于给物体添加详细的外观，如皮肤、图片等。
- 加载器（Loaders）： 用于加载不同格式的模型和纹理。
- 控制器（Controls）： 允许用户通过鼠标、键盘等交互来控制相机的视角。
n. 疑惑
1. 感觉搞不懂"纹理贴图"与"着色器"的关系,他们俩可以分开用吗?还是必须混着用?
答:
纹理贴图
- 定义： 纹理贴图是一种图像，可以被映射（贴）到三维物体的表面，用于给物体增加颜色、细节、纹理等。
- 用途： 纹理贴图常用于给物体添加真实感，如木材的纹理、石头的表面等。
- 应用方式： 通过将纹理贴图应用到材质（Material）上，然后将这个材质应用到几何体（Geometry）上。
着色器
- 定义： 着色器是运行在GPU上的小程序，用于控制顶点（顶点着色器）和像素（片元着色器）的渲染方式。
- 用途： 着色器通常用于创建复杂的视觉效果，如动态光照、阴影、反射、折射等。
- 应用方式： 通过编写GLSL代码来定义着色器的行为，并将其应用到ShaderMaterial或RawShaderMaterial。
顶点着色器也是在Material里面使用
这个uniforms里面的texturetootj就是贴图,他将在着色器代码中被加载
关系和组合使用
- 分开使用： 你可以只使用纹理贴图来增强物体的外观，而不涉及自定义着色器的复杂性。同样，你也可以只使用着色器来创建特定的效果，而不使用任何纹理贴图。
- 结合使用： 着色器可以访问和使用纹理贴图。例如，在自定义的片元着色器中，你可以使用纹理贴图来决定物体表面的颜色和纹理。这允许你创建更复杂和动态的视觉效果。
- 总结:还是结合起来用比较好:贴图是肯定要加载的,然后通过uniforms将贴图传到着色器代码中,进行使用!
也就是说,着色器中加载到了贴图,不仅完成了将贴图贴到模型上的任务,还在贴好图之后的模型上,添加了光照、阴影、反射、折射等
要想贴图贴的好,uv坐标少不了
关于uv坐标的计算,这段代码都是固定的,直接用就ok!
const positions = geometry.getAttribute('position').array;
// 找到模型顶点坐标的最小值和最大值
let minX = Number.POSITIVE_INFINITY;
let maxX = Number.NEGATIVE_INFINITY;
let minY = Number.POSITIVE_INFINITY;
let maxY = Number.NEGATIVE_INFINITY;
for (let i = 0; i < positions.length; i += 3) {
const x = positions[i];
const y = positions[i + 1];
minX = Math.min(minX, x);
maxX = Math.max(maxX, x);
minY = Math.min(minY, y);
maxY = Math.max(maxY, y);
}
// 计算顶点坐标范围
const rangeX = maxX - minX;
const rangeY = maxY - minY;
// 计算 UV 坐标并归一化到 0 到 1 之间
const uvs = [];
for (let i = 0; i < positions.length; i += 3) {
const x = positions[i];
const y = positions[i + 1];
const u = (x - minX) / rangeX;
const v = (y - minY) / rangeY;
uvs.push(u, v);
}
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
- 怎么用?
stlLoader.load('./src/stl/Down/测试123456.stl', geometry => {
const positions = geometry.getAttribute('position').array;
// 找到模型顶点坐标的最小值和最大值
let minX = Number.POSITIVE_INFINITY;
let maxX = Number.NEGATIVE_INFINITY;
let minY = Number.POSITIVE_INFINITY;
let maxY = Number.NEGATIVE_INFINITY;
for (let i = 0; i < positions.length; i += 3) {
const x = positions[i];
const y = positions[i + 1];
minX = Math.min(minX, x);
maxX = Math.max(maxX, x);
minY = Math.min(minY, y);
maxY = Math.max(maxY, y);
}
// 计算顶点坐标范围
const rangeX = maxX - minX;
const rangeY = maxY - minY;
// 计算 UV 坐标并归一化到 0 到 1 之间
const uvs = [];
for (let i = 0; i < positions.length; i += 3) {
const x = positions[i];
const y = positions[i + 1];
const u = (x - minX) / rangeX;
const v = (y - minY) / rangeY;
uvs.push(u, v);
}
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));
//~~~
mesh0 = new THREE.Mesh(geometry, material_tooth_0);
mesh0_ = new THREE.Mesh(geometry, material_tooth_);
mesh0_history = mesh0.clone();
objects.push(mesh0);
scene.add(mesh0);
});
为什么要使用着色器?直接使用three.js内置的光照、阴影、反射、折射等内置的成员属性不香吗?
使用着色器（Shaders）而不是仅依赖three.js的内置光照、阴影、反射、折射等功能，主要有以下几个原因：
-
高度自定义和灵活性： 着色器提供了对渲染过程的底层控制，使得你可以创建独特和复杂的视觉效果，这些效果可能无法通过three.js的标准材质和光源直接实现。例如，你可以创建自定义的波纹效果、独特的光照模型或高级的粒子效果。
-
性能优化： 对于特定的应用，使用自定义着色器可能比使用three.js的高级材质更高效。自定义着色器允许你精确地控制GPU执行哪些操作，从而优化性能，特别是在复杂场景或需要渲染大量对象时。
-
艺术和创意表达： 着色器允许艺术家和开发者通过代码实现他们的创意视觉，提供了一种新的表达方式。这在艺术作品、视觉效果和游戏开发中尤其有价值。
-
实现特定的图形技术： 某些高级图形技术，如光线追踪、体积渲染或特殊的材质效果，可能需要使用着色器来实现。
-
学习和探索： 学习着色器编程可以加深你对图形学的理解，提高你在WebGL和three.js上的技术水平。
虽然three.js提供了丰富的内置功能来处理光照、材质等，但这些功能有时可能不足以满足所有的视觉需求或性能要求。因此，着色器是一个强大的工具，用于在需要时扩展和增强three.js的能力。然而，需要注意的是，编写和维护着色器代码通常比使用three.js的标准功能更复杂，需要更深入的图形学知识和GLSL编程技能。文章来源：https://www.toymoban.com/news/detail-798186.html
使用着色器glsl语言,让你不限于JavaScript,而更像是在开发opengl的项目!!!并且glsl着色器语言在c++也具有普遍性!!!文章来源地址https://www.toymoban.com/news/detail-798186.html
到了这里，关于如何学习three.js的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
