3 ms·
You would use them as you always did. You have raw access to everything. But if you want loading results to be managed, put them into useEffect/useMemo and rend
by mlsarecmg 8y ago
You would use them as you always did. You have raw access to everything. But if you want loading results to be managed, put them into useEffect/useMemo and render out the results. For instance i've just made a text-sprite component that looks like this:
function Text({ children, ...props }) {
const { camera, size, viewport } = useThree()
const { width } = viewport()
const canvas = useMemo(() => {
const canvas = document.createElement('canvas')
canvas.width = canvas.height = size.width * 2
const context = canvas.getContext('2d')
context.font = `bold ${size.width *
0.45}px -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif`
context.textAlign = 'center'
context.fillStyle = 'black'
context.fillText(children, size.width, size.height + size.width * 0.4)
return canvas
}, [children, size.width])
return (
<sprite scale={[width, width]} {...props}>
<spriteMaterial name="material">
<canvasTexture name="map" image={canvas} premultiplyAlpha onUpdate={s => (s.needsUpdate = true)} />
</spriteMaterial>
</sprite>
)
}