ThreeJS —— 机房Demo（三）

最新推荐文章于 2025-06-25 04:04:28 发布

Gvonte

最新推荐文章于 2025-06-25 04:04:28 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习ThreeJS 文章标签： javascript 前端 3d 可视化 webgl

本文链接：https://blog.youkuaiyun.com/weixin_41998030/article/details/106588576

本文介绍如何在ThreeJS中创建3D文字和精灵文字Sprite，包括创建带弧角的Sprite以及利用ExtrudeGeometry和Tween.js实现光圈的渐变动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一节我们重构了我们的代码，形成了两个区域，绘制出了一个大致的场景，这一节我们将在此基础上再添加一些实用的场景

目录结构

创建文字

一个场景中一定少不了文字说明，用来描述该区域的特点、情况

创建3D文字

// create_fn.js
function createText(text, color, conf) {
   
   
  // 为了解决回调地狱，同样引入Promise
  return new Promise((res) => {
   
   
    new THREE.FontLoader().load("../font/simhei.json", function (font) {
   
   
      const geometry = new THREE.TextBufferGeometry(text, {
   
   
        font,
        size: 3,
        height: 1,
        curveSegments: 64,
      });
      geometry.center(); // 将文字居中
      const material = new THREE.MeshBasicMaterial({
   
   
        color,
      });
      const mesh = new THREE.Mesh(geometry, material);
      initConfig(mesh, conf);
      res(mesh);
    });
  });
}

// index.html
// 引用
const text = await createText("移动网络接入区", "rgb(216, 120, 133)", {
   
   
  position: {
   
    x: 39, y: -3, z: 22 },
});

效果图：
3D文字

创建精灵文字Sprite

有的时候我们需要创建一个始终面向我们的一个平面，这个时候就要用的精灵几何体Sprite，精灵是一个总是面朝着摄像机的平面

效果图：
精灵文字
要创建一个Sprite几何体，必须传入SpriteMaMterial精灵材质，而该材质支持贴图，所以我们通常用图片或画布贴图实现Sprite，不过为了更自由的配置Sprite的内容（用图片太不方便，不同的Sprite还需要制作不同的图片），我们这里采用画布贴图CanvasTexture，并用到了一个DOM转canvas的插件html2canvas

// create_fn.js
// 创建永远朝向自己这一面的文字
async function createSpriteText(selcetor, conf) {
   
   
  const elem = document.querySelector(selcetor); // selector是传入的选择器
  const canvas = await html2canvas(elem, {
   
   
    // 加入x、y配置，防止画布偏移，不加这两个配置，画布有可能偏移，产生空白区域
    x: elem.offsetLeft, 
    y: elem.offsetTop,
  });
  const texture = new THREE.CanvasTexture(canvas); 
  texture.magFilter = THREE.NearestFilter; // 提高清晰度，不加这两句画布会变模糊
  texture.minFilter = THREE.NearestFilter;
  const spriteMaterial = new THREE.SpriteMaMterial({
   
   
    map: texture,
    opacity: 0.8,
  }); // 创建精灵材质，map属性设置贴图，为了更高的可配置度，我们选择用canvas贴图
  const sprite = new THREE.Sprite(spriteMaterial); // 要创建精灵几何体必须要用精灵材质
  initConfig(sprite, conf);
  return sprite;
}

在入口文件index.html中使用createSpriteText

<!DOCTYPE html>
<html>
  <head>
  	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel

最低0.47元/天解锁文章

200万优质内容无限畅学