在使用 aoMap 时需要注意 设置 aoMapIntensity 遮挡强度， aoMapIntensity: 0 完全禁用遮挡效果。 aoMapIntensity: 1 完全使用 aoMap 的效果 aoMapIntensity: 2 增强遮挡效果，可能会使阴影变得更深。，还是一个就是使用 aoMap 时需要 aoMap 是一个灰度图，纯白色表示不摭挡光照效果，纯黑色表示完全摭挡光照效果，这个是配合 map 使用的
在使用 bumpMap 时 要注意贴图黑色部分由 bumpScale 决定 凹凸强度 为负数时 黑色部分 凹 陷 为正数时 黑色部分 凸出
displacementBias 常用于精确控制位移的起始点。比如，如果默认位移使得模型的某部分看起来偏高，可以通过减小 displacementBias 来平衡这个偏移，确保效果符合预期。
lightMap 它的主要作用是控制物体表面的亮度和反射的间接光，而不是改变颜色。
MeshToonMaterial 有二十四个属性
- alphaMap alpha 贴图是一种灰度纹理，可控制整个表面的不透明度（黑色：完全透明；白色：完全不透明）。默认为空。 仅使用纹理的颜色，如果存在则忽略alpha通道。对于RGB和RGBA纹理，由于在DXT压缩和未压缩的RGB565格式中为绿色提供了额外的精度，WebGL渲染器将在对该纹理进行采样时使用绿色通道。仅亮度和亮度/alpha纹理也将按预期工作。 需要注意要使透明贴图生效要设置 transparent = true
const textureLoader = new THREE.TextureLoader();
const clearcoatMap = textureLoader.load(person);
// 创建使用 MeshPhongMaterial 的材质
const material = new THREE.MeshToonMaterial({
color: 0xffffff,
alphaMap: clearcoatMap, // 光照贴图（第二组 UV 坐标）
transparent: true // 控制光照贴图的强度
});
// 创建几何体，例如一个球体
const Plane = new THREE.SphereGeometry(1, 32, 32);
// 将材质和几何体结合生成网格
const PlaneMesh = new THREE.Mesh(Plane, material);
PlaneMesh.position.y = -2;
PlaneMesh.position.x = 1;
PlaneMesh.position.z = 1;
// 将球体添加到场景中
scene.add(PlaneMesh);
- aoMap 该纹理的红色通道用作环境遮挡贴图。默认为空。aoMap需要第二组UV。
const textureLoader = new THREE.TextureLoader();
const clearcoatMap = textureLoader.load(imgPng);
const personMap = textureLoader.load(person);
// 创建使用 MeshPhongMaterial 的材质
const material = new THREE.MeshToonMaterial({
color: 0xffffff, // 基础颜色
map: clearcoatMap,
aoMap: personMap, // 环境遮蔽贴图
aoMapIntensity: 2.0, // aoMap 的强度
flatShading: true // 设置为平面着色，模仿 Toon 效果
});
// 创建几何体，例如一个球体
const Plane = new THREE.SphereGeometry(1, 32, 32);
// 为几何体应用 aoMap 的 UV
Plane.attributes.uv2 = Plane.attributes.uv;
// 将材质和几何体结合生成网格
const PlaneMesh = new THREE.Mesh(Plane, material);
// 将球体添加到场景中
scene.add(PlaneMesh);
// 添加环境光和定向光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 定向光
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);
- aoMapIntensity 环境遮挡效果的强度。默认值为1。零表示没有遮挡效果。
- bumpMap 创建凹凸贴图的纹理。黑色和白色值映射到与灯光相关的感知深度。凹凸实际上不会影响对象的几何形状，只会影响光照。如果定义了法线贴图，这将被忽略。凹凸贴图对材质的影响程度。典型范围是0-1。默认值为1
const textureLoader = new THREE.TextureLoader();
const clearcoatMap = textureLoader.load(person);
// 创建使用 MeshPhongMaterial 的材质
const material = new THREE.MeshToonMaterial({
color: 0x00ff88, // 物体的基础颜色
bumpMap: clearcoatMap, // 应用 bumpMap 模拟表面凹凸感
bumpScale: 0.5 // 调整 bumpMap 的凹凸强度
});
// 创建几何体，例如一个球体
const Plane = new THREE.SphereGeometry(1, 32, 32);
// 将材质和几何体结合生成网格
const PlaneMesh = new THREE.Mesh(Plane, material);
PlaneMesh.position.y = -2;
PlaneMesh.position.x = 1;
PlaneMesh.position.z = 1;
// 将球体添加到场景中
scene.add(PlaneMesh);
// 添加环境光和定向光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 定向光
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);
- bumpScale 凹凸贴图对材质的影响程度。典型范围是0-1。默认值为1
- color 材质的颜色Color，默认设置为白色 (0xffffff)。
- displacementMap 置换贴图影响网格顶点的位置。 与其他仅影响材质明暗的贴图不同，置换的顶点可以投射阴影、阻挡其他对象，并以其他方式充当真实几何体。 位移纹理是一个图像，其中每个像素的值（白色为最高）映射到网格的顶点并重新定位。
const textureLoader = new THREE.TextureLoader();
const clearcoatMap = textureLoader.load(person);
// 创建使用 MeshPhongMaterial 的材质
const material = new THREE.MeshToonMaterial({
color: 0x00ff88, // 物体的基础颜色
displacementMap: clearcoatMap, // 应用 displacementMap，改变几何形状
displacementScale: 0.5 // 调整 displacementMap 的强度
});
// 创建几何体，例如一个球体
const Plane = new THREE.SphereGeometry(1, 32, 32);
// 将材质和几何体结合生成网格
const PlaneMesh = new THREE.Mesh(Plane, material);
PlaneMesh.position.y = -2;
PlaneMesh.position.x = 1;
PlaneMesh.position.z = 1;
// 将球体添加到场景中
scene.add(PlaneMesh);
// 添加环境光和定向光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 定向光
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);
- displacementScale 置换贴图对网格的影响程度（黑色表示无置换，白色表示最大置换）。如果没有置换贴图集，则不会应用此值。默认值为1。
- displacementBias 置换贴图值在网格顶点上的偏移量。如果没有置换贴图集，则不会应用此值。默认为0。
- emissive 材料的发射（光）颜色，本质上是一种不受其他光照影响的纯色。默认为黑色。
// 创建使用 MeshPhongMaterial 的材质
const material = new THREE.MeshToonMaterial({
color: 0xffffff, // 物体的基础颜色
emissiveIntensity: 10.0, // 应用 displacementMap，改变几何形状
emissive : 0xff0000 // 调整 displacementMap 的强度
});
// 创建几何体，例如一个球体
const Plane = new THREE.SphereGeometry(1, 32, 32);
// 将材质和几何体结合生成网格
const PlaneMesh = new THREE.Mesh(Plane, material);
PlaneMesh.position.y = -2;
PlaneMesh.position.x = 1;
PlaneMesh.position.z = 1;
// 将球体添加到场景中
scene.add(PlaneMesh);
// 添加环境光和定向光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 定向光
directionalLight.position.set(5, 5, 5).normalize();
scene.add(directionalLight);
- emissiveMap 设置发射（发光）贴图。默认为空。发射贴图颜色由发射颜色和发射强度调制。如果您有自发光贴图，请务必将自发光颜色设置发射光的强度。调制发光颜色。默认值为1。为黑色以外的颜色。
- emissiveIntensity 发射光的强度。调制发光颜色。默认值为1。
- fog 材质是否受雾影响。默认为true。
- gradientMap 卡通着色的渐变贴图。使用此类纹理时，需要将Texture.minFilterTexture.minFilter和Texture.magFilterTexture.magFilter设置为THREE.NearestFilter。默认为空。
- lightMap 光照贴图。默认为空。lightMap需要第二组UV。
- lightMapIntensity 烘焙光的强度。默认值为1。
- map 彩色地图。可以选择包含一个alpha通道，通常与.transparent或.alphaTest结合使用。默认为空。纹理贴图颜色由漫反射.color调制。
- normalMap 创建法线贴图的纹理。RGB值影响每个像素片段的表面法线并改变颜色的点亮方式。法线贴图不会改变表面的实际形状，只会改变光照。如果材质具有使用左手惯例创作的法线贴图，则应取反normalScale的y分量以补偿不同的手性。
- normalMapType 法线贴图的类型。选项为THREE.TangentSpaceNormalMap（默认）和THREE.ObjectSpaceNormalMap。
- normalScale 法线贴图对材质的影响有多大。典型范围是0-1。默认是设置为(1,1)的二维向量Vector2。
- wireframe 将几何渲染为线框。默认为false（即呈现为平面多边形）。
- wireframeLinecap 定义线端的外观。可能的值为“butt”、“round”和“square”。默认为“圆形”。这对应于2DCanvas的lineCap属性，它会被WebGL渲染器忽略。
- wireframeLinejoin 定义线接头的外观。可能的值是“round”、“bevel”和“miter”。默认为“圆形”。 这对应于2DCanvas的lineCap属性，它会被WebGL渲染器忽略。
- wireframeLinewidth 控制线框厚度。默认值为1。 由于OpenGL Core Profile与WebGL渲染器在大多数平台上的限制，无论设置值如何，线宽始终为1。
