uniapp vue3 微信小程序使用 three-platformize 加载本地和网络字体文件

tip：本地字体文件需自行准备，替换引入路径即可。

<template>
  <view class="container">
    <canvas
      type="webgl"
      id="mycanvas"
      canvas-id="mycanvas"
      class="canvas"
    ></canvas>

    <view class="control-panel">
      <view class="item">
        <text>X轴位置</text>
        <slider
          style="width: 100%"
          :value="positionX * 10"
          show-value
          @change="updateFont($event, 'positionX')"
        />
        <text>{{ positionX }}</text>
      </view>

      <view class="item">
        <text>Y轴位置</text>
        <slider
          style="width: 100%"
          :value="positionY * 10"
          show-value
          @change="updateFont($event, 'positionY')"
        />
        <text>{{ positionY }}</text>
      </view>

      <view class="item">
        <text>Z轴位置</text>
        <text>{{ positionZ }}</text>
        <slider
          style="width: 100%"
          :value="positionZ * 10"
          show-value
          @change="updateFont($event, 'positionZ')"
        />
      </view>

      <view class="item">
        <text>字体颜色</text>
        <button @click="changeColor">随机颜色</button>
      </view>

      <view class="item">
        <text>文字厚度</text>
        <slider
          style="width: 100%"
          :value="fontHeight * 10"
          show-value
          @change="updateFont($event, 'fontHeight')"
        />
        <text>{{ fontHeight }}</text>
      </view>

      <view class="item">
        <text>透明度</text>
        <slider
          style="width: 100%"
          :value="opacity * 100"
          show-value
          @change="updateFont($event, 'opacity')"
        />
        <text>{{ opacity }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, toRaw, onUnmounted, getCurrentInstance } from "vue";
import * as THREE from "three-platformize";
import { WechatPlatform } from "three-platformize/src/WechatPlatform";
import { FontLoader } from "three-platformize/examples/jsm/loaders/FontLoader";
import { TextGeometry } from "three-platformize/examples/jsm/geometries/TextGeometry";
import fontJson from "./TmonMonsoriBlack_Regular.json"; // 本地字体文件
// const fontJsonUrl =
//   "https://cdn.jsdelivr.net/npm/three@0.147.0/examples/fonts/helvetiker_regular.typeface.json"; // 网络字体文件
let scene = null;
let camera = null;
let renderer = null;
let cubeMesh = null; // 先用立方体，小程序文字纹理兼容性极高，极易报错
let textMesh = null; // 再用文字，小程序文字纹理兼容性极高，极易报错
let animationId = null;
const instance = getCurrentInstance();
const canvas = ref(null);

const positionX = ref(0);
const positionY = ref(0);
const positionZ = ref(0);
const fontHeight = ref(1);
const opacity = ref(1);
const fontColor = ref("#ffffff");
// 初始化 Canvas，并返回画布和尺寸
const initCanvas = () => {
  return new Promise(resolve => {
    uni
      .createSelectorQuery()
      .in(instance)
      .select("#mycanvas")
      .node()
      .exec(res => {
        canvas.value = res[0].node;
        resolve({
          canvas: canvas.value,
          width: 300,
          height: 300,
        });
      });
  });
};
// 初始化 Three.js 场景、相机、渲染器和灯光
async function initThree() {
  const { width, height } = await initCanvas();
  const platform = new WechatPlatform(toRaw(canvas.value));
  THREE.PLATFORM.set(platform);

  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x1a1a1a);

  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
  camera.position.set(0, 0, 10);

  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(5, 5, 5);
  scene.add(directionalLight);

  // 关键：不手动传 context！让 three-platformize 自己处理，彻底消灭 document 报错
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
}

// 立方体：100%稳定不报错
function create3DCube() {
  const geometry = new THREE.BoxGeometry(2, 2, 2);
  const material = new THREE.MeshStandardMaterial({
    color: fontColor.value,
    transparent: true,
    opacity: opacity.value,
  });
  cubeMesh = new THREE.Mesh(geometry, material);
  scene.add(cubeMesh);
}
// 文字
function create3DFont() {
  // 3D文字
  const loader = new FontLoader();
  // 本地字体加载方式
  const font = loader.parse(fontJson);
  // "https://cdn.jsdelivr.net/npm/three@0.147.0/examples/fonts/helvetiker_regular.typeface.json",
  const textGeo = new TextGeometry("JS哈哈文本", {
    font,
    size: 1,
    height: 1,
    curveSegments: 12,
  });
  const textMaterial = new THREE.MeshStandardMaterial({
    color: fontColor.value,
    metalness: 0.4,
    roughness: 0.2,
    transparent: true,
    opacity: opacity.value,
  });
  console.log(textMaterial, "textMaterial");
  console.log(textGeo, "textGeo");

  textMesh = new THREE.Mesh(textGeo, textMaterial);
  textMesh.position.x = -3.5;
  scene.add(textMesh);
  // 网络字体加载方式
  // loader.load(
  //   // "https://cdn.jsdelivr.net/npm/three@0.147.0/examples/fonts/helvetiker_regular.typeface.json",
  //   fontJsonUrl,
  //   font => {
  //     const textGeo = new TextGeometry("JS测试文本", {
  //       font,
  //       size: 1,
  //       height: 1,
  //       curveSegments: 12,
  //     });
  //     const textMaterial = new THREE.MeshStandardMaterial({
  //       color: fontColor.value,
  //       metalness: 0.4,
  //       roughness: 0.2,
  //       transparent: true,
  //       opacity: opacity.value,
  //     });
  //     console.log(textMaterial, "textMaterial");
  //     console.log(textGeo, "textGeo");

  //     textMesh = new THREE.Mesh(textGeo, textMaterial);
  //     textMesh.position.x = -3.5;
  //     scene.add(textMesh);
  //   },
  // );
}
// 更新字体属性和位置
function updateFont(e, prop) {
  const { value } = e.detail;
  console.log(prop, value);
  // eslint-disable-next-line curly
  if (prop === "positionX") positionX.value = value / 10;
  // eslint-disable-next-line curly
  else if (prop === "positionY") positionY.value = value / 10;
  // eslint-disable-next-line curly
  else if (prop === "positionZ") positionZ.value = value / 10;
  // eslint-disable-next-line curly
  else if (prop === "fontHeight") fontHeight.value = value / 10;
  // eslint-disable-next-line curly
  else if (prop === "opacity") opacity.value = value / 100;
  if (prop === "fontColor" || prop === "opacity" || prop === "fontHeight") {
    // 文字属性变化时，更新文字材质
    if (textMesh) {
      textMesh.material.color.set(fontColor.value);
      textMesh.material.opacity = opacity.value;
      const s = fontHeight.value;
      textMesh.scale.set(s, s, s);
    }

    return;
  }
  // 位置属性变化时，更新立方体位置
  cubeMesh.position.set(positionX.value, positionY.value, positionZ.value);
  cubeMesh.material.opacity = opacity.value;
  const s = fontHeight.value;
  cubeMesh.scale.set(s, s, s);
}
// 随机颜色
function changeColor() {
  const color = new THREE.Color(Math.random() * 0xffffff);
  fontColor.value = `#${color.getHexString()}`;
  cubeMesh.material.color.set(color);
  textMesh.material.color.set(color);
}
// 动画循环
function animate() {
  animationId = canvas.value.requestAnimationFrame(animate);
  // eslint-disable-next-line curly
  if (cubeMesh) cubeMesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}

onMounted(async () => {
  await initThree();
  create3DCube(); // 先用立方体，小程序文字纹理兼容性极高，极易报错
  create3DFont(); // 再用文字，小程序文字纹理兼容性极高，极易报错
  animate();
});

onUnmounted(() => {
  // eslint-disable-next-line curly
  if (animationId) canvas.value.cancelAnimationFrame(animationId);
  renderer?.dispose();
  canvas.value = null;
});
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
}
.canvas {
  width: 100%;
  height: 60vh;
}
.control-panel {
  padding: 20rpx;
  background: #fff;
}
.item {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>