r3f-textures by enzed/r3f-skills
npx skills add https://github.com/enzed/r3f-skills --skill r3f-texturesimport { Canvas } from '@react-three/fiber'
import { useTexture } from '@react-three/drei'
function TexturedBox() {
const texture = useTexture('/textures/wood.jpg')
return (
<mesh>
<boxGeometry />
<meshStandardMaterial map={texture} />
</mesh>
)
}
export default function App() {
return (
<Canvas>
<ambientLight />
<TexturedBox />
</Canvas>
)
}
在 R3F 中加载纹理的推荐方式。
import { useTexture } from '@react-three/drei'
function SingleTexture() {
const texture = useTexture('/textures/color.jpg')
return (
<mesh>
<planeGeometry args={[5, 5]} />
<meshBasicMaterial map={texture} />
</mesh>
)
}
function MultipleTextures() {
const [colorMap, normalMap, roughnessMap] = useTexture([
'/textures/color.jpg',
'/textures/normal.jpg',
'/textures/roughness.jpg',
])
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial
map={colorMap}
normalMap={normalMap}
roughnessMap={roughnessMap}
/>
</mesh>
)
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
function PBRTextures() {
// 命名对象会自动展开到材质
const textures = useTexture({
map: '/textures/color.jpg',
normalMap: '/textures/normal.jpg',
roughnessMap: '/textures/roughness.jpg',
metalnessMap: '/textures/metalness.jpg',
aoMap: '/textures/ao.jpg',
displacementMap: '/textures/displacement.jpg',
})
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial
{...textures}
displacementScale={0.1}
/>
</mesh>
)
}
import { useTexture } from '@react-three/drei'
import * as THREE from 'three'
function ConfiguredTextures() {
const textures = useTexture({
map: '/textures/color.jpg',
normalMap: '/textures/normal.jpg',
}, (textures) => {
// 加载后配置纹理
Object.values(textures).forEach(texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(4, 4)
})
})
return (
<mesh>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial {...textures} />
</mesh>
)
}
import { useTexture } from '@react-three/drei'
// 在模块级别预加载
useTexture.preload('/textures/hero.jpg')
useTexture.preload(['/tex1.jpg', '/tex2.jpg'])
function Component() {
// 如果已预加载,将立即加载
const texture = useTexture('/textures/hero.jpg')
}
用于更精细地控制加载过程。
import { useLoader } from '@react-three/fiber'
import { TextureLoader } from 'three'
function WithUseLoader() {
const texture = useLoader(TextureLoader, '/textures/color.jpg')
// 多个纹理
const [color, normal] = useLoader(TextureLoader, [
'/textures/color.jpg',
'/textures/normal.jpg',
])
return (
<mesh>
<boxGeometry />
<meshStandardMaterial map={color} normalMap={normal} />
</mesh>
)
}
// 预加载
useLoader.preload(TextureLoader, '/textures/color.jpg')
import * as THREE from 'three'
function ConfigureWrapping() {
const texture = 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) // 旋转轴心
})
return (
<mesh>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial map={texture} />
</mesh>
)
}
function ConfigureFiltering() {
const texture = 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.capabilities.getMaxAnisotropy()
// 生成 mipmap
tex.generateMipmaps = true // 默认
})
}
对于准确的色彩很重要。
function ConfigureColorSpace() {
const [colorMap, normalMap, roughnessMap] = useTexture([
'/textures/color.jpg',
'/textures/normal.jpg',
'/textures/roughness.jpg',
], (textures) => {
// 颜色/反照率纹理应使用 sRGB
textures[0].colorSpace = THREE.SRGBColorSpace
// 数据纹理(法线、粗糙度、金属度、环境光遮蔽)使用线性
// 这是默认值,因此通常无需操作
// textures[1].colorSpace = THREE.LinearSRGBColorSpace
// textures[2].colorSpace = THREE.LinearSRGBColorSpace
})
}
import { useEnvironment, Environment } from '@react-three/drei'
// 用作纹理
function EnvMappedSphere() {
const envMap = useEnvironment({ preset: 'sunset' })
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial
metalness={1}
roughness={0}
envMap={envMap}
/>
</mesh>
)
}
// 或使用 Environment 组件实现场景范围的环境
function Scene() {
return (
<>
<Environment preset="sunset" background />
<Mesh />
</>
)
}
import { useEnvironment } from '@react-three/drei'
function HDREnvironment() {
const envMap = useEnvironment({ files: '/hdri/studio.hdr' })
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial
metalness={1}
roughness={0}
envMap={envMap}
envMapIntensity={1}
/>
</mesh>
)
}
import { useCubeTexture } from '@react-three/drei'
function CubeMapTexture() {
const envMap = useCubeTexture(
['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'],
{ path: '/textures/cube/' }
)
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial envMap={envMap} metalness={1} roughness={0} />
</mesh>
)
}
import { useVideoTexture } from '@react-three/drei'
function VideoPlane() {
const texture = useVideoTexture('/videos/sample.mp4', {
start: true,
loop: true,
muted: true,
})
return (
<mesh>
<planeGeometry args={[16, 9].map(x => x * 0.5)} />
<meshBasicMaterial map={texture} toneMapped={false} />
</mesh>
)
}
import { useRef, useEffect } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
function CanvasTexture() {
const meshRef = useRef()
const textureRef = useRef()
useEffect(() => {
const canvas = document.createElement('canvas')
canvas.width = 256
canvas.height = 256
const ctx = canvas.getContext('2d')
// 在画布上绘制
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 256, 256)
ctx.fillStyle = 'white'
ctx.font = '48px Arial'
ctx.fillText('Hello', 50, 150)
textureRef.current = new THREE.CanvasTexture(canvas)
}, [])
// 动态更新纹理
useFrame(({ clock }) => {
if (textureRef.current) {
const canvas = 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
}
})
return (
<mesh ref={meshRef}>
<planeGeometry args={[2, 2]} />
<meshBasicMaterial map={textureRef.current} />
</mesh>
)
}
import { useMemo } from 'react'
import * as THREE from 'three'
function NoiseTexture() {
const texture = useMemo(() => {
const size = 256
const data = new Uint8Array(size * size * 4)
for (let i = 0; i < size * size; i++) {
const value = Math.random() * 255
data[i * 4] = value
data[i * 4 + 1] = value
data[i * 4 + 2] = value
data[i * 4 + 3] = 255
}
const texture = new THREE.DataTexture(data, size, size)
texture.needsUpdate = true
return texture
}, [])
return (
<mesh>
<planeGeometry args={[2, 2]} />
<meshBasicMaterial map={texture} />
</mesh>
)
}
渲染到纹理。
import { useFBO } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import { useRef } from 'react'
function RenderToTexture() {
const fbo = useFBO(512, 512)
const meshRef = useRef()
const otherSceneRef = useRef()
useFrame(({ gl, camera }) => {
// 将其他场景渲染到 FBO
gl.setRenderTarget(fbo)
gl.render(otherSceneRef.current, camera)
gl.setRenderTarget(null)
})
return (
<>
{/* 要渲染到纹理的场景 */}
<group ref={otherSceneRef}>
<mesh position={[0, 0, -5]}>
<sphereGeometry args={[1, 32, 32]} />
<meshStandardMaterial color="red" />
</mesh>
</group>
{/* 显示纹理 */}
<mesh ref={meshRef}>
<planeGeometry args={[4, 4]} />
<meshBasicMaterial map={fbo.texture} />
</mesh>
</>
)
}
import { useTexture } from '@react-three/drei'
import { useState } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
function SpriteAnimation() {
const texture = useTexture('/textures/spritesheet.png')
const [frame, setFrame] = useState(0)
// 配置纹理
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping
texture.repeat.set(1/4, 1/4) // 4x4 精灵表
useFrame(({ clock }) => {
const newFrame = Math.floor(clock.elapsedTime * 10) % 16
if (newFrame !== frame) {
setFrame(newFrame)
const col = newFrame % 4
const row = Math.floor(newFrame / 4)
texture.offset.set(col / 4, 1 - (row + 1) / 4)
}
})
return (
<mesh>
<planeGeometry args={[1, 1]} />
<meshBasicMaterial map={texture} transparent />
</mesh>
)
}
<meshStandardMaterial
// 基础颜色 (sRGB)
map={colorTexture}
// 表面细节 (Linear)
normalMap={normalTexture}
normalScale={[1, 1]}
// 粗糙度 (Linear, 灰度)
roughnessMap={roughnessTexture}
roughness={1} // 乘数
// 金属度 (Linear, 灰度)
metalnessMap={metalnessTexture}
metalness={1} // 乘数
// 环境光遮蔽 (Linear, 需要 uv2)
aoMap={aoTexture}
aoMapIntensity={1}
// 自发光 (sRGB)
emissiveMap={emissiveTexture}
emissive="#ffffff"
emissiveIntensity={1}
// 顶点位移 (Linear)
displacementMap={displacementTexture}
displacementScale={0.1}
displacementBias={0}
// 透明度 (Linear)
alphaMap={alphaTexture}
transparent={true}
// 环境反射
envMap={envTexture}
envMapIntensity={1}
// 光照贴图 (需要 uv2)
lightMap={lightmapTexture}
lightMapIntensity={1}
/>
import { useEffect, useRef } from 'react'
function MeshWithUV2() {
const meshRef = useRef()
useEffect(() => {
// 复制 uv 到 uv2 以用于 aoMap/lightMap
const geometry = meshRef.current.geometry
geometry.setAttribute('uv2', geometry.attributes.uv)
}, [])
return (
<mesh ref={meshRef}>
<boxGeometry />
<meshStandardMaterial
aoMap={aoTexture}
aoMapIntensity={1}
/>
</mesh>
)
}
import { Suspense } from 'react'
import { useTexture } from '@react-three/drei'
function TexturedMesh() {
const texture = useTexture('/textures/large.jpg')
return (
<mesh>
<boxGeometry />
<meshStandardMaterial map={texture} />
</mesh>
)
}
function Fallback() {
return (
<mesh>
<boxGeometry />
<meshBasicMaterial color="gray" wireframe />
</mesh>
)
}
function Scene() {
return (
<Suspense fallback={<Fallback />}>
<TexturedMesh />
</Suspense>
)
}
// 预加载关键纹理
useTexture.preload('/textures/hero.jpg')
// 检查纹理内存
useFrame(({ gl }) => {
console.log('Textures:', gl.info.memory.textures)
})
// 释放未使用的纹理(R3F 通常会自动处理)
texture.dispose()
r3f-materials - 将纹理应用到材质r3f-loaders - 资源加载模式r3f-shaders - 自定义纹理采样每周安装量
239
仓库
GitHub 星标
58
首次出现
2026 年 1 月 20 日
安全审计
安装于
codex186
gemini-cli184
opencode178
github-copilot166
cursor163
claude-code153
import { Canvas } from '@react-three/fiber'
import { useTexture } from '@react-three/drei'
function TexturedBox() {
const texture = useTexture('/textures/wood.jpg')
return (
<mesh>
<boxGeometry />
<meshStandardMaterial map={texture} />
</mesh>
)
}
export default function App() {
return (
<Canvas>
<ambientLight />
<TexturedBox />
</Canvas>
)
}
The recommended way to load textures in R3F.
import { useTexture } from '@react-three/drei'
function SingleTexture() {
const texture = useTexture('/textures/color.jpg')
return (
<mesh>
<planeGeometry args={[5, 5]} />
<meshBasicMaterial map={texture} />
</mesh>
)
}
function MultipleTextures() {
const [colorMap, normalMap, roughnessMap] = useTexture([
'/textures/color.jpg',
'/textures/normal.jpg',
'/textures/roughness.jpg',
])
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial
map={colorMap}
normalMap={normalMap}
roughnessMap={roughnessMap}
/>
</mesh>
)
}
function PBRTextures() {
// Named object automatically spreads to material
const textures = useTexture({
map: '/textures/color.jpg',
normalMap: '/textures/normal.jpg',
roughnessMap: '/textures/roughness.jpg',
metalnessMap: '/textures/metalness.jpg',
aoMap: '/textures/ao.jpg',
displacementMap: '/textures/displacement.jpg',
})
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial
{...textures}
displacementScale={0.1}
/>
</mesh>
)
}
import { useTexture } from '@react-three/drei'
import * as THREE from 'three'
function ConfiguredTextures() {
const textures = useTexture({
map: '/textures/color.jpg',
normalMap: '/textures/normal.jpg',
}, (textures) => {
// Configure textures after loading
Object.values(textures).forEach(texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping
texture.repeat.set(4, 4)
})
})
return (
<mesh>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial {...textures} />
</mesh>
)
}
import { useTexture } from '@react-three/drei'
// Preload at module level
useTexture.preload('/textures/hero.jpg')
useTexture.preload(['/tex1.jpg', '/tex2.jpg'])
function Component() {
// Will be instant if preloaded
const texture = useTexture('/textures/hero.jpg')
}
For more control over loading.
import { useLoader } from '@react-three/fiber'
import { TextureLoader } from 'three'
function WithUseLoader() {
const texture = useLoader(TextureLoader, '/textures/color.jpg')
// Multiple textures
const [color, normal] = useLoader(TextureLoader, [
'/textures/color.jpg',
'/textures/normal.jpg',
])
return (
<mesh>
<boxGeometry />
<meshStandardMaterial map={color} normalMap={normal} />
</mesh>
)
}
// Preload
useLoader.preload(TextureLoader, '/textures/color.jpg')
import * as THREE from 'three'
function ConfigureWrapping() {
const texture = useTexture('/textures/tile.jpg', (tex) => {
// Wrapping
tex.wrapS = THREE.RepeatWrapping // Horizontal: ClampToEdgeWrapping, RepeatWrapping, MirroredRepeatWrapping
tex.wrapT = THREE.RepeatWrapping // Vertical
// Repeat
tex.repeat.set(4, 4) // Tile 4x4
// Offset
tex.offset.set(0.5, 0.5) // Shift UV
// Rotation
tex.rotation = Math.PI / 4 // Rotate 45 degrees
tex.center.set(0.5, 0.5) // Rotation pivot
})
return (
<mesh>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial map={texture} />
</mesh>
)
}
function ConfigureFiltering() {
const texture = useTexture('/textures/color.jpg', (tex) => {
// Minification (texture larger than screen pixels)
tex.minFilter = THREE.LinearMipmapLinearFilter // Smooth with mipmaps (default)
tex.minFilter = THREE.NearestFilter // Pixelated
tex.minFilter = THREE.LinearFilter // Smooth, no mipmaps
// Magnification (texture smaller than screen pixels)
tex.magFilter = THREE.LinearFilter // Smooth (default)
tex.magFilter = THREE.NearestFilter // Pixelated (retro style)
// Anisotropic filtering (sharper at angles)
tex.anisotropy = 16 // Usually renderer.capabilities.getMaxAnisotropy()
// Generate mipmaps
tex.generateMipmaps = true // Default
})
}
Important for accurate colors.
function ConfigureColorSpace() {
const [colorMap, normalMap, roughnessMap] = useTexture([
'/textures/color.jpg',
'/textures/normal.jpg',
'/textures/roughness.jpg',
], (textures) => {
// Color/albedo textures should use sRGB
textures[0].colorSpace = THREE.SRGBColorSpace
// Data textures (normal, roughness, metalness, ao) use Linear
// This is the default, so usually no action needed
// textures[1].colorSpace = THREE.LinearSRGBColorSpace
// textures[2].colorSpace = THREE.LinearSRGBColorSpace
})
}
import { useEnvironment, Environment } from '@react-three/drei'
// Use as texture
function EnvMappedSphere() {
const envMap = useEnvironment({ preset: 'sunset' })
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial
metalness={1}
roughness={0}
envMap={envMap}
/>
</mesh>
)
}
// Or use Environment component for scene-wide
function Scene() {
return (
<>
<Environment preset="sunset" background />
<Mesh />
</>
)
}
import { useEnvironment } from '@react-three/drei'
function HDREnvironment() {
const envMap = useEnvironment({ files: '/hdri/studio.hdr' })
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial
metalness={1}
roughness={0}
envMap={envMap}
envMapIntensity={1}
/>
</mesh>
)
}
import { useCubeTexture } from '@react-three/drei'
function CubeMapTexture() {
const envMap = useCubeTexture(
['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'],
{ path: '/textures/cube/' }
)
return (
<mesh>
<sphereGeometry args={[1, 64, 64]} />
<meshStandardMaterial envMap={envMap} metalness={1} roughness={0} />
</mesh>
)
}
import { useVideoTexture } from '@react-three/drei'
function VideoPlane() {
const texture = useVideoTexture('/videos/sample.mp4', {
start: true,
loop: true,
muted: true,
})
return (
<mesh>
<planeGeometry args={[16, 9].map(x => x * 0.5)} />
<meshBasicMaterial map={texture} toneMapped={false} />
</mesh>
)
}
import { useRef, useEffect } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
function CanvasTexture() {
const meshRef = useRef()
const textureRef = useRef()
useEffect(() => {
const canvas = document.createElement('canvas')
canvas.width = 256
canvas.height = 256
const ctx = canvas.getContext('2d')
// Draw on canvas
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 256, 256)
ctx.fillStyle = 'white'
ctx.font = '48px Arial'
ctx.fillText('Hello', 50, 150)
textureRef.current = new THREE.CanvasTexture(canvas)
}, [])
// Update texture dynamically
useFrame(({ clock }) => {
if (textureRef.current) {
const canvas = 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
}
})
return (
<mesh ref={meshRef}>
<planeGeometry args={[2, 2]} />
<meshBasicMaterial map={textureRef.current} />
</mesh>
)
}
import { useMemo } from 'react'
import * as THREE from 'three'
function NoiseTexture() {
const texture = useMemo(() => {
const size = 256
const data = new Uint8Array(size * size * 4)
for (let i = 0; i < size * size; i++) {
const value = Math.random() * 255
data[i * 4] = value
data[i * 4 + 1] = value
data[i * 4 + 2] = value
data[i * 4 + 3] = 255
}
const texture = new THREE.DataTexture(data, size, size)
texture.needsUpdate = true
return texture
}, [])
return (
<mesh>
<planeGeometry args={[2, 2]} />
<meshBasicMaterial map={texture} />
</mesh>
)
}
Render to texture.
import { useFBO } from '@react-three/drei'
import { useFrame } from '@react-three/fiber'
import { useRef } from 'react'
function RenderToTexture() {
const fbo = useFBO(512, 512)
const meshRef = useRef()
const otherSceneRef = useRef()
useFrame(({ gl, camera }) => {
// Render other scene to FBO
gl.setRenderTarget(fbo)
gl.render(otherSceneRef.current, camera)
gl.setRenderTarget(null)
})
return (
<>
{/* Scene to render to texture */}
<group ref={otherSceneRef}>
<mesh position={[0, 0, -5]}>
<sphereGeometry args={[1, 32, 32]} />
<meshStandardMaterial color="red" />
</mesh>
</group>
{/* Display the texture */}
<mesh ref={meshRef}>
<planeGeometry args={[4, 4]} />
<meshBasicMaterial map={fbo.texture} />
</mesh>
</>
)
}
import { useTexture } from '@react-three/drei'
import { useState } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'
function SpriteAnimation() {
const texture = useTexture('/textures/spritesheet.png')
const [frame, setFrame] = useState(0)
// Configure texture
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping
texture.repeat.set(1/4, 1/4) // 4x4 sprite sheet
useFrame(({ clock }) => {
const newFrame = Math.floor(clock.elapsedTime * 10) % 16
if (newFrame !== frame) {
setFrame(newFrame)
const col = newFrame % 4
const row = Math.floor(newFrame / 4)
texture.offset.set(col / 4, 1 - (row + 1) / 4)
}
})
return (
<mesh>
<planeGeometry args={[1, 1]} />
<meshBasicMaterial map={texture} transparent />
</mesh>
)
}
<meshStandardMaterial
// Base color (sRGB)
map={colorTexture}
// Surface detail (Linear)
normalMap={normalTexture}
normalScale={[1, 1]}
// Roughness (Linear, grayscale)
roughnessMap={roughnessTexture}
roughness={1} // Multiplier
// Metalness (Linear, grayscale)
metalnessMap={metalnessTexture}
metalness={1} // Multiplier
// Ambient Occlusion (Linear, requires uv2)
aoMap={aoTexture}
aoMapIntensity={1}
// Self-illumination (sRGB)
emissiveMap={emissiveTexture}
emissive="#ffffff"
emissiveIntensity={1}
// Vertex displacement (Linear)
displacementMap={displacementTexture}
displacementScale={0.1}
displacementBias={0}
// Alpha (Linear)
alphaMap={alphaTexture}
transparent={true}
// Environment reflection
envMap={envTexture}
envMapIntensity={1}
// Lightmap (requires uv2)
lightMap={lightmapTexture}
lightMapIntensity={1}
/>
import { useEffect, useRef } from 'react'
function MeshWithUV2() {
const meshRef = useRef()
useEffect(() => {
// Copy uv to uv2 for aoMap/lightMap
const geometry = meshRef.current.geometry
geometry.setAttribute('uv2', geometry.attributes.uv)
}, [])
return (
<mesh ref={meshRef}>
<boxGeometry />
<meshStandardMaterial
aoMap={aoTexture}
aoMapIntensity={1}
/>
</mesh>
)
}
import { Suspense } from 'react'
import { useTexture } from '@react-three/drei'
function TexturedMesh() {
const texture = useTexture('/textures/large.jpg')
return (
<mesh>
<boxGeometry />
<meshStandardMaterial map={texture} />
</mesh>
)
}
function Fallback() {
return (
<mesh>
<boxGeometry />
<meshBasicMaterial color="gray" wireframe />
</mesh>
)
}
function Scene() {
return (
<Suspense fallback={<Fallback />}>
<TexturedMesh />
</Suspense>
)
}
// Preload critical textures
useTexture.preload('/textures/hero.jpg')
// Check texture memory
useFrame(({ gl }) => {
console.log('Textures:', gl.info.memory.textures)
})
// Dispose unused textures (R3F usually handles this)
texture.dispose()
r3f-materials - Applying textures to materialsr3f-loaders - Asset loading patternsr3f-shaders - Custom texture samplingWeekly Installs
239
Repository
GitHub Stars
58
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex186
gemini-cli184
opencode178
github-copilot166
cursor163
claude-code153
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
3,400 周安装