# 反应三种纤维材料 ## 快速入门从“@react-三/纤维”导入{画布} 函数场景（）{ 返回（ <画布> <环境光强度={0.5} /> <网格> <盒子几何/> ） } ## 材料类型概述材质 |使用案例|照明 ---|---|--- 网格基本材质 |未点亮、单调的颜色 |否网状兰伯特材料 |哑光表面，快速|是（扩散）网格Phong材料|闪亮、镜面 |是的网格标准材料| PBR，真实 |是（PBR）网格物理材质 |高级 PBR |是（PBR+）网格卡通材质 |卡通阴影|是的（卡通）网格法线材质 |调试法线 |否着色器材质 |定制 GLSL |定制 ## 网格基本材质没有光照计算。始终可见、快速。 <网格> <盒子几何/> ## 网格标准材质 (PBR) 基于物理的渲染。推荐用于实际结果。从 '@react-two/drei' 导入 { useTexture } 从 '三' 导入 * 作为三函数 PBRMesh() { // 加载PBR纹理集 const [colorMap、normalMap、roughnessMap、metalnessMap、aoMap] = useTexture([ '/纹理/颜色.jpg', '/textures/normal.jpg', '/textures/roughness.jpg', '/textures/metalness.jpg', '/textures/ao.jpg', ]）返回（ <网格> ） } ## meshPhysicalMaterial（高级 PBR）通过清漆、透射、光泽等扩展标准。 // 玻璃材质函数玻璃（）{ 返回（ <网格> <网格物理材质颜色=“#ffffff” 金属度={0} 粗糙度={0} Transmission={1} // 0 = 不透明，1 = 完全透明 Thickness={0.5} // 折射的体积厚度 ior={1.5} // 折射率（玻璃~1.5） envMapIntensity={1} /> ） } // 汽车漆函数 CarPaint() { 返回（ <网格> <盒子几何/> <网格物理材质颜色=“#ff0000” 金属度={0.9} 粗糙度={0.5} clearcoat={1} // 透明涂层强度 clearcoatRoughness={0.1} // 透明涂层粗糙度 /> ） } // 织物/天鹅绒（光泽）函数 Fabric() { 返回（ <网格> <网格物理材质颜色=“#8844aa” 粗糙度={0.8} 光泽={1} 光泽粗糙度={0.5} 光泽颜色=“#ff88ff” /> ） } // 彩虹色（肥皂泡）函数虹彩（）{ 返回（ <网格> <网格物理材质颜色=“#ffffff” 虹彩={1} 虹彩IOR={1.3} iridescentThicknessRange={[100, 400]} /> ） } ## Drei 特殊材料 ### MeshReflector材质逼真的镜面反射。从'@react-三/drei'导入{MeshReflectorMaterial} 函数 ReflectiveFloor() { 返回（ <网格旋转={[-Math.PI / 2, 0, 0]} 位置={[0, -0.5, 0]}> ） } ### 网格摆动材质动画摆动效果。从“@react-三/drei”导入{MeshWobbleMaterial} 函数 WobblyMesh() { 返回（ <网格> <网格摆动材质 Factor={1} // 摆动幅度 speed={2} // 摆动速度颜色=“粉红色” 金属度={0} 粗糙度={0.5} /> ） } ### 网格扭曲材质柏林噪声失真。从“@react-三/drei”导入{MeshDistortMaterial} 函数扭曲网格（）{ 返回（ <网格> <网格扭曲材质扭曲={0.5} // 扭曲量 speed={2} // 动画速度颜色=“青色” 粗糙度={0.2} /> ） } ### 网格传输材质更好的玻璃/折射材料。从“@react-三/drei”导入{MeshTransmissionMaterial} 函数 GlassSphere() { 返回（ <网格> ） } ### MeshDiscardMaterial 网格丢弃材质丢弃碎片 - 仅对阴影有用。从“@react-三/drei”导入{MeshDiscardMaterial} 函数 ShadowOnlyMesh() { 返回（ <网格投射阴影> <盒子几何/> {/* 不可见但会投射阴影 */} ） } ## 点和线材料 // 点材质 <点数> <缓冲区几何/> <点材质尺寸={0.1} 尺寸衰减={true} 颜色=“白色” 地图={精灵纹理} 透明阿尔法测试={0.5} 顶点颜色 /> // 线条材质 <行> <缓冲区几何/> <行> <缓冲区几何/> <线虚线材质颜色=“白色” 破折号大小={0.5} 间隙大小={0.25} 比例={1} /> ## 常见材料属性所有材料都具有以下基本属性： ## 动态材质 ### 更新材质属性从 'react' 导入 { useRef } 从 '@react- Three/Fiber' 导入 { useFrame } 函数动画材质（）{ 常量materialRef = useRef() useFrame(({ 时钟 }) => { const t = 时钟.elapsedTime // 更新颜色 MaterialRef.current.color.setHSL((t * 0.1) % 1, 1, 0.5) // 更新属性 MaterialRef.current.roughness = (Math.sin(t) + 1) / 2 }) 返回（ <网格> <盒子几何/> ） } ### 共享材料从 'react' 导入 { useMemo } 从 '三' 导入 * 作为三函数共享材料（）{ // 创建一次，使用多次常量材料 = useMemo(() => 新的 THREE.MeshStandardMaterial({ color: 'red' }), []) 返回（ <> <网格位置={[-2, 0, 0]} 材质={材质}> <盒子几何/> <网格位置={[0, 0, 0]} 材质={材质}> <球体几何/> <网格位置={[2,0,0]}材质={材质}> <圆锥几何/> ） } ## 多种材料 // 每个面有不同的材质（BoxGeometry 有 6 个材质组） <网格> <盒子几何/> {/* +X */} {/* -X */} {/* +Y */} {/* -Y */} {/* +Z */} {/* -Z */} ## 材质与纹理从 '@react-two/drei' 导入 { useTexture } 从 '三' 导入 * 作为三函数纹理材质（）{ // 命名对象模式（推荐）常量纹理 = useTexture({ 地图：'/textures/color.jpg'，法线贴图: '/textures/normal.jpg', 粗糙度贴图: '/textures/roughness.jpg', }) // 设置纹理属性 Object.values(纹理).forEach(纹理 => { 纹理.wrapS = 纹理.wrapT = THREE.RepeatWrapping 纹理.重复.设置(2, 2) }) 返回（ <网格> ） } ## 发光材料（发光） // 对于光晕效果，发光颜色应超出正常范围 1 表示绽放 toneMapped={false} // 颜色 > 1 时必需 /> // 使用发射贴图 ## 环境贴图从 '@react- Three/drei' 导入 { useEnvironment } 函数 EnvMappedMaterial() { const envMap = useEnvironment({ 预设: '日落' }) 返回（ <网格> ） } ## 自定义着色器材质有关着色器材质的详细用法，请参阅“r3f-shaders”。从“@react-三/drei”导入{shaderMaterial} 从“@react-三/纤维”导入{扩展} const CustomMaterial = 着色器材质( { 时间: 0, 颜色: new THREE.Color('hotpink') }, // 顶点着色器 ` 改变 vec2 vUv；无效主（）{ vUv = 紫外线； gl_Position = 投影矩阵 * modelViewMatrix * vec4(位置, 1.0); } `, // 片段着色器 ` 均匀的浮动时间；统一的 vec3 颜色；改变 vec2 vUv；无效主（）{ gl_FragColor = vec4(颜色 * (sin(时间 + vUv.x * 10.0) * 0.5 + 0.5), 1.0); } ` ）扩展（{自定义材料}）函数 CustomShaderMesh() { 常量materialRef = useRef() useFrame(({ 时钟 }) => { MaterialRef.current.time = 时钟.elapsedTime }) 返回（ <网格> <盒子几何/> ） } ## 性能提示 1. **重用材质**：相同的材质实例=批量绘制调用 2. **避免透明** ：需要排序，速度较慢 3. **使用 alphaTest 而不是透明**：如果可能，更快 4. **更简单的材料**：Basic > Lambert > Phong > Standard > Physical 5. **限制纹理大小**：1024-2048通常足够 // 材质缓存模式常量材质缓存 = 新地图() 函数 getCachedMaterial(颜色) { const key = color.toString() if (!materialCache.has(key)) { materialCache.set(key, new THREE.MeshStandardMaterial({ color })) } 返回materialCache.get(key) } ## 另请参阅 * `r3f-textures` \- 纹理加载和配置 * `r3f-shaders` \- 自定义着色器开发 * `r3f-lighting` \- 光与材质的交互

R3f材料

包含技能