- With Css:r3f Canvas背景是透明的,可以给Container加背景色
- WebGLRenderer.setClearColor( ) / scene.background
<Canvas onCreated={({ gl, scene }) => { gl.setClearColor('#ff0000', 1) // scene.background = new THREE.Color(0xff0000) }} //... > {/** ... */} </Canvas>
- Create
<color>
in<Canvas>
,then set theattach
property tobackground
<Canvas> <color args={[ '#ff0000' ]} attach="background" /> {/** ... */} </Canvas>
- Basic Shadows
- Baking Shadows(by shadowMap): Use
<BakeShadows />
fromdrei
- Soften Shadow: Use
<SoftShadows />
fromdrei
- Accumulative Shadows:
- This will receive multiple shadow renderers,
- Only can be rendered on a
Plane
- 和
receiveShadow
生成的普通shadow不是一个,需要从<mesh/>
上删除receiveShadow属性 - Use
<AccumulativeShadows />
fromdrei
- Contact Shadows
- 不依赖threeJs系统的shadow,移除
Canvas
的shadows
属性 - Only can be rendered on a
Plane
- 不依赖threeJs系统的shadow,移除
import { useLoader } from '@react-three/fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
// 没被压缩的模型
const model = useLoader(GLTFLoader, '/path-to-model')
// 被压缩的模型
const model = useLoader(GLTFLoader, '/path-to-draco-model', (loader) => {
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/path-to-draco-file')
// loader is GLTFLoader
loader.setDRACOLoader(dracoLoader)
})
// ...
<primitive object={model.scene} />
import { useGLTF } from '@react-three/drei'
const Model = () => {
// same for draco models
const model = useGLTF('/path-to-model')
return (
// ...
<primitive object={model.scene} />
)
}
// 提前加载preLoading
useGLTF.preload('/path-to-model')
- 把模型抽象成单独组件
- 在引用模型时使用
<Suspense>
嵌套模型组件 - 设置
Suspense
的fallback属性设置loading时展示的内容import Model from './path-to-model-component' // ... <Suspense fallback={"Loading Model"} // Or some other mesh / 统一的Placeholder组件 > <Model /> </Suspense>
- Use
Clone
helper from@react-three/drei
- replace
<primitive />
with<Clone />
import { Clone } from '@react-three/drei' // ... <Clone object={model.scene} />
🔗Drag the model file to the website, then you will get the jsx component
- Use
useAnimations
from@react-three/drei
useAnimations
will convert theanimation clips
toaction
, and return themimport { useAnimations } from '@react-three/drei' import { useControl } from 'leva' const Model = () => { // same for draco models const model = useGLTF('/path-to-model') const { actions, mixer, clips, names ...other } = useAnimations(model.animations, model.scene) // 动作间流传切换 actions.Walk.play() setTimeOut(() => { actions.Run.play() // parameters: action from && time to switch actions.Run.crossFadeFrom(actions.Walk, 1) }, 5000) // Leva 控制动作间切换 const animationName = useControl({ animationName: { options: names } }) useEffect(() => { const action = actions[animationName] action.reset().fadeIn(0.5).play() return () => { action.fadeOut(0.5) } }, [animationName]) } // 提前加载preLoading useGLTF.preload('/path-to-model')
- 当多个
mesh
在一条从camera
出发的RayCaster
,在你的视角这些mesh
重叠时, 点击最靠近camera
的mesh
,所有mesh
绑定的Click
事件都会触发 - 若只希望被点击的
mesh
触发Click
事件,可在该物体的eventHandler
上阻止冒泡<mesh onClick={event => event.stopPropagation()} />
- js原生方法:给
mesh
绑定r3f
的onPointerEnter
和onPointerLeave
事件,改变document
/canvas
的style.cursor
属性<mesh onPointerEnter={() => document.body.style.cursor = 'pointer' } onPointerLeave={() => document.body.style.cursor = 'default' } />
userCursor
in@react-three/drei
const [hovered, set] = useState() useCursor(hovered, /*'pointer', 'auto'*/) return ( <mesh onPointerOver={() => set(true)} onPointerOut={() => set(false) />
Vignette
offset
、darkness
、blendingFunction
属性
Glitch
mode
、delay
、duration
、strength
属性
Noise
premultiply
、blendingFunction
属性
Bloom
:-
Disable 材质
Material.toneMapped
, 它会使得颜色映射到0-1的值,但Bloom
效果需要颜色的值超过1才明显 -
Ways to make material
Glow
: make color over 1- color属性用超过1的数组代替,被光照射的面会更亮一些
<meshStandardMaterial color={[4, 2, 1]} toneMapped={false} />
- emissive && emissiveIntensity 设置的是glow的颜色,物体的颜色还是color控制
<meshStandardMaterial color="#ffffff" emissive="orange" emissiveIntensity={5} toneMapped={false} />
meshBasicMaterial
只能用方法1,emissive属性不能用;因为光照在这个材质上无效,所以所有面一样亮
-
mipmapBlur
、intensity
、luminanceThreshold
属性
-
DepthOfField
focusDistance
、focalLength
、brokeScale
属性
ScreenSpaceReflection
focusDistance
、focalLength
、brokeScale
属性
see codes in src/effects