# 反应三种纤维纹理 ## 快速入门从“@react-三/纤维”导入{画布} 从 '@react-two/drei' 导入 { useTexture } 函数纹理框（）{ const 纹理 = useTexture('/textures/wood.jpg') 返回（ <网格> <盒子几何/> ） } 导出默认函数 App() { 返回（ <画布> <环境光/> <纹理框/> ） } ## useTexture Hook (Drei) 在 R3F 中加载纹理的推荐方法。 ### 单一纹理从 '@react-two/drei' 导入 { useTexture } 函数 SingleTexture() { const 纹理 = useTexture('/textures/color.jpg') 返回（ <网格> ） } ### 多个纹理（数组）函数多重纹理() { const [颜色贴图、法线贴图、粗糙度贴图] = useTexture([ '/纹理/颜色.jpg', '/textures/normal.jpg', '/textures/roughness.jpg', ]）返回（ <网格> ） } ### 命名对象（推荐用于 PBR）函数 PBRTextures() { // 命名对象自动传播到材质常量纹理 = useTexture({ 地图：'/textures/color.jpg'，法线贴图: '/textures/normal.jpg', 粗糙度贴图: '/textures/roughness.jpg', metalnessMap: '/textures/metalness.jpg', aoMap: '/textures/ao.jpg', 位移贴图: '/textures/displacement.jpg', }) 返回（ <网格> ） } ### 带纹理配置从 '@react-two/drei' 导入 { useTexture } 从 '三' 导入 * 作为三函数配置纹理（）{ 常量纹理 = useTexture({ 地图：'/textures/color.jpg'，法线贴图: '/textures/normal.jpg', }, (纹理) => { // 加载后配置纹理 Object.values(纹理).forEach(纹理 => { 纹理.wrapS = 纹理.wrapT = THREE.RepeatWrapping 纹理.重复.设置(4, 4) }) }) 返回（ <网格> ） } ### 预加载从 '@react-two/drei' 导入 { useTexture } // 在模块级别预加载 useTexture.preload('/textures/hero.jpg') useTexture.preload(['/tex1.jpg', '/tex2.jpg']) 函数组件() { // 如果预加载，将是即时的 const 纹理 = useTexture('/textures/hero.jpg') } ## useLoader（核心 R3F）为了更好地控制加载。从 '@react-two/fibre' 导入 { useLoader } 从“三”导入{TextureLoader} 函数 WithUseLoader() { const 纹理 = useLoader(TextureLoader, '/textures/color.jpg') // 多个纹理 const [颜色，正常] = useLoader(TextureLoader, [ '/纹理/颜色.jpg', '/textures/normal.jpg', ]）返回（ <网格> <盒子几何/> ） } // 预加载 useLoader.preload(TextureLoader, '/textures/color.jpg') ## 纹理配置 ### 环绕模式从 '三' 导入 * 作为三函数配置包装（）{ const 纹理 = useTexture('/textures/tile.jpg', (tex) => { // 包装 tex.wrapS = THREE.RepeatWrapping // 水平：ClampToEdgeWrapping、RepeatWrapping、MirroredRepeatWrapping tex.wrapT = THREE.RepeatWrapping // 垂直 // 重复 tex.repeat.set(4, 4) // 平铺 4x4 // 偏移量 tex.offset.set(0.5, 0.5) // 偏移 UV // 旋转 tex.rotation = Math.PI / 4 // 旋转45度 tex.center.set(0.5, 0.5) // 旋转轴 }) 返回（ <网格> ） } ### 过滤函数配置过滤（）{ const 纹理 = useTexture('/textures/color.jpg', (tex) => { // 缩小（纹理大于屏幕像素） tex.minFilter = THREE.LinearMipmapLinearFilter // 使用 mipmap 进行平滑（默认） tex.minFilter = THREE.NearestFilter // 像素化 tex.minFilter = THREE.LinearFilter // 平滑，无 mipmap // 放大倍率（纹理小于屏幕像素） tex.magFilter = THREE.LinearFilter // 平滑（默认） tex.magFilter = THREE.NearestFilter // 像素化（复古风格） // 各向异性过滤（角度更锐利） tex.anisotropy = 16 // 通常是 renderer.capability.getMaxAnisotropy() // 生成 mipmap tex.generateMipmaps = true // 默认 }) } ### 色彩空间对于准确的颜色很重要。函数配置颜色空间（）{ const [颜色贴图、法线贴图、粗糙度贴图] = useTexture([ '/纹理/颜色.jpg', '/textures/normal.jpg', '/textures/roughness.jpg', ], (纹理) => { // 颜色/反照率纹理应使用 sRGB 纹理[0].colorSpace = THREE.SRGBColorSpace // 数据纹理（法线、粗糙度、金属度、ao）使用线性 // 这是默认值，因此通常不需要执行任何操作 // 纹理[1].colorSpace = THREE.LinearSRGBColorSpace // 纹理[2].colorSpace = THREE.LinearSRGBColorSpace }) } ## 环境贴图 ### useEnvironment 钩子从 '@react-two/drei' 导入 { useEnvironment, Environment } // 用作纹理函数 EnvMappedSphere() { const envMap = useEnvironment({ 预设: '日落' }) 返回（ <网格> ） } // 或者使用场景范围的环境组件函数场景（）{ 返回（ <> <环境预设=“日落”背景/> <网格/> ） } ### HDR 环境从 '@react- Three/drei' 导入 { useEnvironment } 函数HDREnvironment() { const envMap = useEnvironment({ 文件: '/hdri/studio.hdr' }) 返回（ <网格> ） } ### 立方体贴图从 '@react-two/drei' 导入 { useCubeTexture } 函数 CubeMapTexture() { const envMap = useCubeTexture( ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'], { 路径：'/textures/cube/' } ）返回（ <网格> ） } ## 视频纹理从 '@react-two/drei' 导入 { useVideoTexture } 函数视频平面（）{ const 纹理 = useVideoTexture('/videos/sample.mp4', { 开始：真实，循环：真，静音：真实， }) 返回（ <网格> x * 0.5)} /> ） } ## 画布纹理从 'react' 导入 { useRef, useEffect } 从 '@react- Three/Fiber' 导入 { useFrame } 从 '三' 导入 * 作为三函数 CanvasTexture() { const meshRef = useRef() 常量纹理引用 = useRef() 使用效果（（）=> { const canvas = document.createElement('canvas') 画布宽度 = 256 画布高度 = 256 const ctx = canvas.getContext('2d') // 在画布上绘制 ctx.fillStyle = '红色' ctx.fillRect(0, 0, 256, 256) ctx.fillStyle = '白色' ctx.font = '48px 宋体' ctx.fillText('你好', 50, 150) textureRef.current = new THREE.CanvasTexture(canvas) }, []) // 动态更新纹理 useFrame(({ 时钟 }) => { 如果（textureRef.current）{ 常量画布=textureRef.current.image const ctx = canvas.getContext('2d') ctx.fillStyle = `hsl(${clock.elapsedTime * 50}, 100%, 50%)` ctx.fillRect(0, 0, 256, 256) textureRef.current.needsUpdate = true } }) 返回（ <网格参考={meshRef}> ） } ## 数据纹理从 'react' 导入 { useMemo } 从 '三' 导入 * 作为三函数噪声纹理（）{ const 纹理 = useMemo(() => { 常量大小 = 256 const 数据 = new Uint8Array(大小 * 大小 * 4) for (令 i = 0; i < 大小 * 大小; i++) { 常量值 = Math.random() * 255 数据[i * 4] = 值数据[i * 4 + 1] = 值数据[i * 4 + 2] = 值数据[i * 4 + 3] = 255 } const 纹理 = new THREE.DataTexture(数据、大小、大小) 纹理.needsUpdate = true 返回纹理 }, []) 返回（ <网格> ） } ## 渲染目标渲染到纹理。从 '@react-two/drei' 导入 { useFBO } 从 '@react- Three/Fiber' 导入 { useFrame } 从 'react' 导入 { useRef } 函数渲染到纹理（）{ 常量 fbo = useFBO(512, 512) const meshRef = useRef() const otherSceneRef = useRef() useFrame(({ gl, 相机 }) => { // 将其他场景渲染到FBO gl.setRenderTarget(fbo) gl.render(otherSceneRef.当前，相机) gl.setRenderTarget(null) }) 返回（ <> {/* 渲染到纹理的场景 */} <组参考={otherSceneRef}> <网格位置={[0, 0, -5]}> {/* 显示纹理 */} <网格参考={meshRef}> ） } ## 纹理图集/雪碧表从 '@react-two/drei' 导入 { useTexture } 从 'react' 导入 { useState } 从 '@react- Three/Fiber' 导入 { useFrame } 从 '三' 导入 * 作为三函数 SpriteAnimation() { const 纹理 = useTexture('/textures/spritesheet.png') const [frame, setFrame] = useState(0) // 配置纹理纹理.wrapS = 纹理.wrapT = THREE.ClampToEdgeWrapping texture.repeat.set(1/4, 1/4) // 4x4 精灵表 useFrame(({ 时钟 }) => { const newFrame = Math.floor(clock.elapsedTime * 10) % 16 if (newFrame !== 框架) { 设置框架（新框架） const col = newFrame % 4 const row = Math.floor(newFrame / 4) 纹理.偏移.set(列 / 4, 1 - (行 + 1) / 4) } }) 返回（ <网格> ） } ## 材质纹理贴图参考 ## 第二个 UV 通道（用于 AO/光照贴图）从 'react' 导入 { useEffect, useRef } 函数 MeshWithUV2() { const meshRef = useRef() 使用效果（（）=> { // 将aoMap/lightMap的uv复制到uv2 const 几何 = meshRef.current.geometry 几何.setAttribute('uv2', 几何.attributes.uv) }, []) 返回（ <网格参考={meshRef}> <盒子几何/> ） } ## 悬念加载从 'react' 导入 { Suspense } 从 '@react-two/drei' 导入 { useTexture } 函数纹理网格（）{ const 纹理 = useTexture('/textures/large.jpg') 返回（ <网格> <盒子几何/> ） } 函数回退（）{ 返回（ <网格> <盒子几何/> ） } 函数场景（）{ 返回（ <悬念回退={<回退/>}> <纹理网格/> ） } ## 性能提示 1. **使用 2 的幂维度**：256、512、1024、2048 2. **压缩纹理** ：使用 KTX2/Basis for web 3. **启用 mipmap** ：对于远处的物体 4. **限制纹理大小**：2048通常足够 5. **重用纹理**：相同的纹理=更好的批处理 6. **预加载重要纹理**：避免弹出 // 预加载关键纹理 useTexture.preload('/textures/hero.jpg') // 检查纹理内存 useFrame(({ gl }) => { console.log('纹理：', gl.info.memory.textures) }) // 处理未使用的纹理（R3F 通常处理此问题）纹理.dispose() ## 另请参阅 * `r3f-materials` \- 将纹理应用于材质 * `r3f-loaders` \- 资源加载模式 * `r3f-shaders` \- 自定义纹理采样

R3f 纹理

包含技能