src/components/LandingZone.js
/** This renders text via canvas and projects it as a sprite */
This renders text via canvas and projects it as a sprite
This renders text via canvas and projects it as a sprite
function Text({ children, position, opacity, color = 'white', fontSize = 200, isConsideredMobile, showFragmentDistortion }) {
  const {
    size: { width, height },
    viewport: { width: viewportWidth, height: viewportHeight }
  } = useThree()
  const scale = viewportWidth > viewportHeight ? viewportWidth : viewportHeight
  if(isConsideredMobile) {
    fontSize = 200
    if(showFragmentDistortion){
      fontSize = 400
    }
  }else{
    fontSize = 210
    if(showFragmentDistortion){
      fontSize = 400
    }
  }
  const canvas = useMemo(
    () => {
      const canvas = document.createElement('canvas')
      canvas.width = canvas.height = 2048
      const context = canvas.getContext('2d')
      context.font = `bold ${fontSize}px monospace, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif`
      context.textAlign = 'center'
      context.textBaseline = 'middle'
      context.fillStyle = color
      context.shadowColor = "rgba(0,0,0,0.7)";
      context.shadowOffsetX = 0;
      context.shadowOffsetY = 10;
      context.shadowBlur = 15;
      context.fillText(children, 1024, 1024 - 410 / 2)
      return canvas
    },
    [children, width, height]
  )
  return (
    <a.sprite scale={[scale, scale, 1]} position={position}>
      <a.spriteMaterial attach="material" transparent opacity={opacity}>
        <canvasTexture attach="map" image={canvas} premultiplyAlpha onUpdate={s => (s.needsUpdate = true)} />
      </a.spriteMaterial>
    </a.sprite>
  )
}
function Text ( { children , position , opacity , color = 'white' , fontSize = 200 , isConsideredMobile , showFragmentDistortion } ) { const { size : { width , height } , viewport : { width : viewportWidth , height : viewportHeight } } = useThree ( ) const scale = viewportWidth > viewportHeight ? viewportWidth : viewportHeight if ( isConsideredMobile ) { fontSize = 200 if ( showFragmentDistortion ) { fontSize = 400 } } else { fontSize = 210 if ( showFragmentDistortion ) { fontSize = 400 } } const canvas = useMemo ( ( ) => { const canvas = document . createElement ( 'canvas' ) canvas . width = canvas . height = 2048 const context = canvas . getContext ( '2d' ) context . font = ` ${ fontSize } ` context . textAlign = 'center' context . textBaseline = 'middle' context . fillStyle = color context . shadowColor = "rgba(0,0,0,0.7)" ; context . shadowOffsetX = 0 ; context . shadowOffsetY = 10 ; context . shadowBlur = 15 ; context . fillText ( children , 1024 , 1024 - 410 / 2 ) return canvas } , [ children , width , height ] ) return ( < a . sprite scale = { [ scale , scale , 1 ] } position = { position } > < a . spriteMaterial attach = "material" transparent opacity = { opacity } > < canvasTexture attach = "map" image = { canvas } premultiplyAlpha onUpdate = { s => ( s . needsUpdate = true ) } / > < / a . spriteMaterial > < / a . sprite > ) }
This renders text via canvas and projects it as a sprite
This renders text via canvas and projects it as a sprite