精灵文字

优雅永不过时📅 2024-01-01

使用three.js精灵文字

📷 精灵文字

提示词

使用Three.js的SpriteMaterial和Canvas API创建3D场景中的城市名称标签，实现动态文本标签的随机分布和颜色变化效果。

效果拆解

效果	实现方式
城市数据加载	使用fetch API获取JSON格式的城市数据
Canvas文本渲染	创建Canvas元素并使用2D上下文绘制文本
纹理生成	将Canvas转换为DataURL并创建Three.js纹理
Sprite标签	使用SpriteMaterial和Sprite创建3D文本标签
随机分布	在3D空间中随机设置标签位置
颜色变化	为每个标签生成随机颜色

核心技术点

1. Canvas文本创建函数

JAVASCRIPT
        
      
const createCanvasText = ({ dpr = 1 } = {}) => {
  return ({ text = '', color = '#ffffff' } = {}) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    
    canvas.width = 512 * dpr
    canvas.height = 128 * dpr
    
    ctx.fillStyle = color
    ctx.font = `${64 * dpr}px Arial`
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    
    ctx.fillText(text, canvas.width / 2, canvas.height / 2)
    
    return canvas
  }
}

2. 随机颜色生成

JAVASCRIPT
        
const getColor = () => '#' + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0')

3. 城市标签创建

JAVASCRIPT
        
      
const citys = await fetch(FILE_HOST+'files/json/city.json').then(res => res.json())
const updateCanvasText = createCanvasText({ dpr: 1.4 })

for (const key in citys) {
  const canvas = updateCanvasText({ text: key, color: getColor() })
  const texture = new THREE.TextureLoader().load(canvas.toDataURL())
  const material = new THREE.SpriteMaterial({ map: texture })
  const sprite = new THREE.Sprite(material)
  sprite.scale.set(canvas.width / canvas.height, 1, 1)
  
  sprite.position.set(
    Math.random() * 20 - 10,
    Math.random() * 20 - 10,
    Math.random() * 20 - 10
  )
  
  scene.add(sprite)
}