当前位置： 首页 > article >正文

【three.js】材质（Material）

article 2025/1/5 15:23:29
名称描述
MeshBasicMaterial基础网格基础材质，用于给几何体赋予一种简单的颜色，或者显示几何体的线框
MeshDepthMaterial网格深度材质，这个材质使用从摄像机到网格的距离来决定如何给网格上色。
MeshStandardMaterial标准网格材质，一种基于物理的标准材质，使用 Metallic-Roughness 工作流程
MeshPhysicalMaterial物理网格材质，MeshStandardMaterial 的扩展，能够更好地控制反射率。
MeshNormalMaterial网格法向材质，这是一种简单的材质，根据法向向量计算物体表面的颜色
MeshLambertMaterial网格 Lambert 材质，这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。
MeshPhongMaterial网格 Phong 式材质，这是一种考虑光照影响的材质，用于创建光亮的物体
MeshToonMaterial网格 Phong 式材质，MeshPhongMaterial 卡通着色的扩展。
ShaderMaterial着色器材质，这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式以及像素的着色方式
LineBasicMaterial直线基础材质，这种材质可以用于 THREE.Line 直线几何体，用来创建着色的直线。

基础网格材质（MeshBasicMaterial）【常用】

一个以简单着色（平面或线框）方式来绘制几何体的材质，这种材质不受光照的影响。常用于背影、2D图形等场景。

参数：

color：材质颜色。

opacity：透明度，取值范围为0（完全透明）到1（完全不透明）。

transparent：布尔值，指示材质是否透明。如果设置为true，则材质将考虑透明度的影响。

map：纹理贴图。

示例：

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ 
    color: 0x00ff00, 
    transparent: true, 
    opacity: 0.5 
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);


网格材质（MeshLambertMaterial）【常用】

一种非光泽表面的材质，没有镜面高光。适用于模拟一些表面（如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面。

受光照影响—— 漫反射

参数（继承自THREE.Material）：

color：材质颜色。

map：纹理贴图。

alphaMap：透明度贴图。

emissive：自发光颜色。

示例：

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

网格材质（MeshPhongMaterial）

支持漫反射和镜面反射光照模型，可以模拟物体表面对光线的漫反射和镜面反射效果。相比于Lambert材质，效果较好，但性能开销较大。

受光照影响——高光

参数：

color：材质颜色。

specular：镜面反射颜色。

shininess：光泽度，控制镜面高光的大小。

示例：

const material = new THREE.MeshPhongMaterial({ 
    color: 0x00ff00, 
    specular: 0x111111, 
    shininess: 30 
});

法线网格材质（MeshNormalMaterial）【拓展：不常用】

根据法向向量来计算物体表面的颜色。这种材质可以显示网格的法线方向，常用于调试或特殊效果。

注意：法线材质并不支持镜面反射，这里的描述有误。正确的描述应该是它直接显示法线的方向，颜色通常与法线的方向有关。

示例：

const material = new THREE.MeshNormalMaterial();

物理材质（MeshStandardMaterial）

一种高度可配置的材质，专为基于物理的渲染（PBR）设计。通过调整金属度、粗糙度等参数，可以模拟出从非金属到金属的各种材质效果。

受光照影响——物理材质

参数：

color：材质颜色。

metalness：金属度，取值范围为0（非金属）到1（金属）。

roughness：粗糙度，取值范围为0（光滑）到1（粗糙）。

map：漫反射贴图。

envMap：环境贴图。

示例：

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

物理材质（MeshPhysicalMaterial）

MeshPhysicalMaterial是Three.js中一种基于物理的材质类型，它提供了更多的物理属性来模拟现实世界中的材料特性。

与MeshStandardMaterial相比，MeshPhysicalMaterial具有额外的物理属性，如清漆层、透光率、反射率、光泽、折射率等，使其更适合模拟具有特定光学特性的材料，如透明材料、半透明材料等。

受光照影响——物理材质

参数：

color：基础颜色，默认为白色（0xffffff）。

map：基础颜色贴图，可以用来替代材质的颜色。

roughness：粗糙度，默认为0.5。粗糙度定义了表面的光滑程度，数值越高，表面越粗糙。

metalness：金属度，默认为0.5。金属度定义了表面的金属程度，数值越高，表面越像金属。

emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。

clearcoat：清漆层厚度，默认为0。定义了表面的额外涂层，通常用于模拟汽车油漆的效果。

clearcoatRoughness：清漆层粗糙度，默认为0。定义了清漆层的粗糙程度。

ior（Index of Refraction）：折射率，默认为1.5。定义了材料的折射率，对于透明或半透明材料特别重要。

transmission：透射，默认为0。定义了光线透过材料的程度，对于透明或半透明材料特别重要。

其他：还包括normalMap（法线贴图）、roughnessMap（粗糙度贴图）、metalnessMap（金属度贴图）、emissiveMap（自发光贴图）、alphaMap（透明度贴图）、displacementMap（置换贴图）等纹理贴图属性，以及opacity（全局透明度）、transparent（是否开启透明模式）、side（指定材质在哪一面渲染）等通用属性。

适用于汽车油漆效果、玻璃、水、金属等材质的创建。

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

// 加载基础颜色贴图
const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('path/to/color_texture.jpg');

// 创建 MeshPhysicalMaterial
const material = new THREE.MeshPhysicalMaterial({
    map: colorTexture,         // 基础颜色贴图
    color: 0xffffff,           // 基础颜色（这里会被贴图覆盖，但可用于没有贴图的部分）
    emissive: 0x000000,        // 自发光颜色
    metalness: 0.5,            // 金属度
    roughness: 0.5,            // 粗糙度
    transmission: 1,           // 启用透射
    ior: 1.5,                  // 折射率
    thickness: 0.1,            // 厚度（对于透射效果重要）
    side: THREE.DoubleSide     // 双面渲染
});

// 创建网格对象
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


MeshToonMaterial

这种材质使用卡通渲染效果，通常用于游戏和动画中。通过梯度纹理来控制阴影效果。

参数：

color：材质颜色。

gradientMap：梯度纹理，用于卡通阴影效果。

示例：

const gradientTexture = new THREE.TextureLoader()
.load('path/to/gradient.png');
const material = new THREE.MeshToonMaterial({ 
    color: 0x00ff00, 
    gradientMap: gradientTexture 
});


ShaderMaterial

        通过自定义着色器来创建材质，适用于需要高级图形效果的情况。需要编写顶点和片段着色器代码。

参数：

vertexShader：顶点着色器代码。

fragmentShader：片段着色器代码。

示例：

const vertexShader = `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

const fragmentShader = `
    varying vec2 vUv;
    void main() {
        gl_FragColor = vec4(vUv, 0.5, 1.0);
    }
`;

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

线基础材质（LineBasicMaterial）

用于线条几何体的基本材质。

参数：

color：线条颜色。

linewidth：线条宽度（注意：在某些设备上可能不支持，默认为1）。

示例：

const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const geometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(-10, 0, 0),
    new THREE.Vector3(0, 10, 0),
    new THREE.Vector3(10, -10, 0)
]);
const line = new THREE.Line(geometry, material);
scene.add(line);


注意：linewidth参数在某些渲染器和设备上可能不起作用，如果需要更粗的线条，可以考虑使用其他方法，如创建多边形来模拟线条。

LineDashedMaterial

用于创建虚线效果的材质。

参数：

color：线条颜色。

dashSize：虚线的线段长度。

gapSize：虚线的间隔长度。

scale：缩放比例，用于调整虚线的密度。

示例：

const material = new THREE.LineDashedMaterial({ 
    color: 0xff0000, 
    dashSize: 3, 
    gapSize: 1, 
    scale: 1 
});

点材质（PointsMaterial）

用于点云（点几何体）的材质。

参数：

color：点的颜色。

size：点的大小。

map：点的纹理贴图（注意：在某些情况下可能不支持）。

示例：

const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.05 });
const geometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(-10, 10, 0),
    new THREE.Vector3(-10, -10, 0),
    new THREE.Vector3(10, -10, 0)
]);
const points = new THREE.Points(geometry, material);
scene.add(points);


请注意，示例代码中的路径和参数可能需要根据实际情况进行调整。

精灵材质（SpriteMaterial）

SpriteMaterial是Three.js中的一种材质类型，用于创建二维精灵（Sprite）。

精灵材质常用于渲染图标、粒子系统、UI元素等。

与普通的三维材质不同，SpriteMaterial通常与Sprite对象一起使用，它不支持光照模型，也不考虑摄像机的方向，总是面向摄像机展示其纹理。

参数：

map：基础颜色贴图，用于定义精灵的外观。

color：基础颜色，默认为白色（0xffffff）。

opacity：材质的全局透明度，默认为1（不透明）。

transparent：是否开启透明模式，默认为true。如果设置为true，则需要设置opacity或者使用alphaMap。

blending：混合模式，默认为THREE.NormalBlending。可以设置为THREE.AdditiveBlending、THREE.SubtractiveBlending等。

sizeAttenuation：是否启用尺寸衰减，默认为true。如果启用，则精灵的大小会根据距离摄像机的距离自动调整。

rotation：旋转角度，默认为0。用于控制精灵的旋转角度。

其他：还包括depthTest（是否进行深度测试）、depthWrite（是否写入深度缓冲区）、toneMapped（是否进行色调映射）、fog（是否应用雾效）等属性。

应用场景

SpriteMaterial适用于需要快速实现图标、粒子系统、UI元素等二维元素的场景。

// 加载纹理
const textureLoader = new THREE.TextureLoader();
const spriteTexture = textureLoader.load('path/to/sprite_texture.png');

// 创建 SpriteMaterial
const spriteMaterial = new THREE.SpriteMaterial({
    map: spriteTexture,          // 基础颜色贴图
    color: 0xffffff,             // 基础颜色（这里会与贴图混合）
    opacity: 0.5,                // 透明度
    transparent: true,           // 开启透明模式
    sizeAttenuation: false,      // 禁用尺寸衰减（精灵大小不会随距离变化）
    rotation: Math.PI / 4        // 旋转45度
});

// 创建 Sprite
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(100, 100, 1);  // 设置精灵的大小（X和Y方向上的大小，Z方向通常保持为1）
sprite.position.set(0, 0, 0);   // 设置精灵的位置
scene.add(sprite);

友友们的每一次点赞，都是对我莫大的支持与激励！


http://www.kler.cn/a/464429.html

相关文章：

  • c-动态内存管理 (动态内存管理比较深入的分析和理解博客总结)
  • 【Pytorch报错】AttributeError: cannot assign module before Module.__init__() call
  • 昆仑万维大数据面试题及参考答案
  • df.groupby()方法使用表达式分组
  • 【74HC192减法24/20/72进制】2022-5-17
  • 大模型系列17-RAGFlow搭建本地知识库
  • 《探寻真正开源的大模型：开启AI创新新纪元》
  • 5.微服务灰度发布落地实践(rocketmq增强)
  • Win11电脑Cursor默认打开markdown文件，如何修改markdown文件默认打开方式为Typora？
  • （四）配置有线网口、SSH登陆、文件传输以及运行交叉编译程序测试
  • SQL SERVER ——表的基本操作
  • 系统思考—信任
  • 解决安装pynini和WeTextProcessing报错问题
  • git 添加代理
  • 云手机：虚拟技术的革命性应用与实体手机的优劣对比
  • 小米PK霍尼韦尔宠物空气净化器谁更强？还有其他专业品牌吗？
  • 《燕云十六声》游戏文件tcj.dll已损坏怎么办？
  • XCode如何知道所打开源码文件的路径
  • 关于Spring的专项面试试题总结
  • DAY196-vpc1-小迪安全
  • HarmonyOS NEXT 应用开发练习：智能视频推荐
  • pdf预览兼容问题- chrome浏览器105及一下预览不了
  • 鸿蒙设置字体或者背景颜色渐变
  • 【SOC 芯片设计 DFT 学习专栏 -- DFT std logic 介绍 】
  • IP-MS常见问题（一）
  • std::shared_mutex学习