Threejs进阶之十一：使用FontLoader和TextGeometry创建三维文字

<template>
  <div id="scene"></div>
</template>
<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'  
import { onMounted } from 'vue'
let scene,camera,renderer,controls
onMounted(()=>{
  init()
}) 
function init() {
  initScene()
  initCamera()
  initAxesHelper()
  initLight()
  initRenderer()
  initControls()
  
  animate()
  window.addEventListener('resize',onWindowResize.bind(this))
}
// 初始化场景
function initScene() {
  scene = new THREE.Scene()
  scene.background = new THREE.Color(0x808080)
}
// 初始化相机
function initCamera() {
  camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000)
  camera.position.set(0,2,2)  
}
// 辅助轴
function initAxesHelper() {
  const axesHelper = new THREE.AxesHelper(1)
  scene.add(axesHelper)
}
// 灯光
function initLight() {
  const hesLight = new THREE.HemisphereLight(0xffffff,0x444444)
  hesLight.intensity = 0.6
  scene.add(hesLight)

  const dirLight = new THREE.DirectionalLight()
  dirLight.position.set(5,5,5)
  scene.add(dirLight)
}
// 初始化渲染器
function initRenderer() {
  renderer = new THREE.WebGLRenderer({antialias:true}) //抗锯齿
  // 设置屏幕像素比
  renderer.setPixelRatio(window.devicePixelRatio)
  // 设置大小
  renderer.setSize(window.innerWidth,window.innerHeight) 
  // 添加到容器
  document.querySelector('#scene').appendChild(renderer.domElement)
  // 加载阴影
  renderer.shadowMap.enable = true
}
// 初始化轨道控制器
function initControls() {
  controls = new OrbitControls(camera,renderer.domElement)  
  controls.minPolarAngle = 0 //默认0
  // 左键拖动时视窗垂直方向的最大旋转角度。Math.PI/2 为地平线视角
  controls.maxPolarAngle = 80 / 360 * 2 * Math.PI // 默认Math.PI，即可以向下旋转到撒旦视角。 
	controls.update()
}  
function animate() { 
  const delta = clock.getDelta()
 
  renderer.render(scene,camera)
  controls.update(delta) // 当controls.enableDamping=true或者controls.autoRotate=true时调用
  requestAnimationFrame(animate)
 
}
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth,window.innerHeight)
} 
</script>
<style scoped>
</style>

import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry' 

const materials = [
    new THREE.MeshPhongMaterial({
      color:0xffffff,
      flatShading:true
    }),//front
    new THREE.MeshPhongMaterial({color:0xff0000})//back
  ]

const loader = new FontLoader()

 const font = loader.load(
    // font资源URL 
    'fonts/helvetiker_regular.typeface.json',
    // onLoad回调
    function (font) { 
      const geometry = new TextGeometry('你好 hello',{
        font:font,
        size:0.25, // Float。字体大小，默认值为100。
        height:0.05, //  Float。挤出文本的厚度。默认值为50。
        curveSegments: 12, // Integer （表示文本的）曲线上点的数量。默认值为12。
        bevelEnabled: true, // Boolean 是否开启斜角，默认为false。
        bevelThickness: 0.01, // Float。文本上斜角的深度，默认值为20。
        bevelSize: 0,// Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
        bevelSegments: 3 // Integer 斜角的分段数。默认值为3。
      })
      const textMesh1 = new THREE.Mesh(geometry,materials)
      textMesh1.position.set(0,0,0)
      scene.add(textMesh1)
    }
  )

geometry.computeBoundingBox()
// console.log(geometry.boundingBox);
const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2
const textMesh1 = new THREE.Mesh(geometry,materials)
textMesh1.position.set(-xOffset,0,0)
scene.add(textMesh1)

 const font = loader.load(
    // font资源URL
    'fonts/KaiTi_Regular.json', 
    // onLoad回调
    function (font) {
      console.log(font);
      const geometry = new TextGeometry('欢迎',{
        font:font,
        size:0.25, // Float。字体大小，默认值为100。
        height:0.08, //  Float。挤出文本的厚度。默认值为50。
        curveSegments: 12, // Integer （表示文本的）曲线上点的数量。默认值为12。
        bevelEnabled: true, // Boolean 是否开启斜角，默认为false。
        bevelThickness: 0.01, // Float。文本上斜角的深度，默认值为20。
        bevelSize: 0,// Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
        bevelSegments: 3 // Integer 斜角的分段数。默认值为3。
      })
      geometry.computeBoundingBox()
      // console.log(geometry.boundingBox);
      const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2
      const textMesh1 = new THREE.Mesh(geometry,materials)
      textMesh1.position.set(-xOffset,0,0)
      scene.add(textMesh1)
    }
  )

 geometry.computeBoundingBox()
    
      const xOffset = (geometry.boundingBox.max.x - geometry.boundingBox.min.x) / 2
      const textMesh1 = new THREE.Mesh(geometry,materials)
      textMesh1.position.set(-xOffset,0,0)
      scene.add(textMesh1)
      const textMesh2 =new THREE.Mesh(geometry,materials)
      // console.log(geometry.boundingBox);
      textMesh2.position.set(-xOffset,-geometry.boundingBox.min.y-0.03,geometry.boundingBox.max.z-0.01)
      textMesh2.rotation.x = Math.PI
      scene.add(textMesh2)