Three.js中如何使用CSS3DRenderer和CSS3DSprite实现模型标签文字_Javascript

导语

在three.js中，使用css3drenderer和css3dsprite可以轻松地实现模型标签文字的效果，为场景中的模型提供更直观的信息展示。本文将介绍如何使用这两个工具来实现模型标签文字，并提供相应的代码示例。

引言

three.js是一款强大的javascript 3d库，用于在web上创建交互式的3d图形应用程序。在three.js中，css3drenderer和css3dsprite是两个重要的工具，它们可以用于在3d场景中渲染html元素，为用户提供更丰富的交互体验。

实现的效果

在three.js中使用css3drenderer和css3dsprite实现模型标签文字

实现模型标签文字的步骤

步骤一、导入所需库

// three.js库
import * as three from 'three'; 
 // css3drenderer用于渲染css3d对象
import { css3drenderer, css3dsprite } from "three/examples/jsm/renderers/css3drenderer.js";

步骤二、初始化css3drenderer

const labelrenderer = new css3drenderer();
labelrenderer.setsize(window.innerwidth, window.innerheight); // 设置渲染器尺寸
labelrenderer.domelement.style.position = 'absolute'; // 设置渲染器样式
labelrenderer.domelement.style.top = '0'; // 设置渲染器样式
document.body.appendchild(labelrenderer.domelement); // 将渲染器挂载到页面上

步骤三、创建css3d标签

const div = document.createelement('div');
div.classname = 'workshop-text'; // 添加样式类
div.innerhtml = '<p>浮法车间</p>'; // 添加标签文字

步骤四、创建css3dsprite对象

const sprite = new css3dsprite(div);
sprite.position.set(8, 3, 42); // 设置标签位置，这里根据模型具体位置调整

步骤五、将css3dsprite添加到模型中,并通过gui控制器控制文字位置

object.add(sprite); // object是模型对象，这里需要替换为实际的模型对象
// 在gui中添加文件夹用于调整标签位置
const tagfolder = gui.addfolder('浮法车间标签');
tagfolder.add(sprite.position, 'x', -200, 200).name('x position'); // 调整标签x位置
tagfolder.add(sprite.position, 'y', -200, 200).name('y position'); // 调整标签y位置
tagfolder.add(sprite.position, 'z', -200, 200).name('z position'); // 调整标签z位置
tagfolder.open(); // 打开文件夹，默认显示控制器

所有代码：

<template>
  <!-- 用于展示three.js场景的html容器 -->
  <div id="my-three"></div>
</template>
<script setup>
import { ref, onmounted, getcurrentinstance } from 'vue'
import * as three from 'three' // 导入three.js库
import { orbitcontrols } from 'three/examples/jsm/controls/orbitcontrols' // 导入轨道控制器以实现场景的旋转、缩放等交互
import { gltfloader } from 'three/examples/jsm/loaders/gltfloader'; // 导入gltf模型加载器
import { gui } from "three/examples/jsm/libs/lil-gui.module.min.js";
import { css3drenderer, css3dsprite } from "three/examples/jsm/renderers/css3drenderer.js";
const { proxy } = getcurrentinstance(); // 获取当前vue组件实例
const gui = new gui();
// 设置cube纹理加载器,立方体纹理加载器
const cubetextureloader = new three.cubetextureloader();
// 设置环境贴图
const envmaptexture = cubetextureloader.load([
  "../../public/posx.jpg",
  "../../public/negx.jpg",
  "../../public/posy.jpg",
  "../../public/negy.jpg",
  "../../public/posz.jpg",
  "../../public/negz.jpg",
]);
onmounted(() => {
  document.getelementbyid('my-three')?.appendchild(renderer.domelement) // 将渲染器的dom元素挂载到页面上
  init() // 初始化场景、相机和光源
  rendermodel()  // 设置渲染参数
  gltfmodel1() // 加载gltf模型
  render() // 启动渲染循环
})
// 定义场景宽度和高度
const width = window.innerwidth, height = window.innerheight;
const scene = new three.scene(); // 创建场景
const renderer = new three.webglrenderer() // 创建渲染器
const loader = new gltfloader(); // 创建gltf加载器
const camera = new three.perspectivecamera(45, width / height, 1, 10000); // 创建透视相机
const controls = new orbitcontrols(camera, renderer.domelement) // 创建控制器
let glbmodel;
function init() {
  // 光源设置
  const ambient = new three.ambientlight(0xffffff, 0.5); // 添加环境光
  scene.add(ambient);
  const directionallight = new three.directionallight(0xffffff, 0.8);// 添加平行光
  directionallight.position.set(95, 585, 39); // 设置光源位置
  scene.add(directionallight);
  //设置相机位置
  camera.position.set(-20, 300, 700); // 设置相机位置
  //设置相机方向
  camera.lookat(0, 0, 0); // 设置相机朝向场景中心
  //辅助坐标轴
  const axeshelper = new three.axeshelper(200);//参数200标示坐标系大小，可以根据场景大小去设置
  scene.add(axeshelper);
  // 设置场景背景色
  // scene.background = envmaptexture;
  // 设置渲染器像素比，适应设备分辨率
  renderer.setpixelratio(window.devicepixelratio);
  renderer.antialias = true;
  // 初始化 gui 控件
  const camfolder = gui.addfolder('camera');
  camfolder.add(camera.position, 'x', -6500, 6500, 10).name('x axis');
  camfolder.add(camera.position, 'y', -6500, 6500, 10).name('y axis');
  camfolder.add(camera.position, 'z', -6500, 6500, 10).name('z axis');
  camfolder.open();
  const lightfolder = gui.addfolder('light');
  lightfolder.add(directionallight.position, 'x', -6500, 6500).name('x axis');
  lightfolder.add(directionallight.position, 'y', -6500, 6500).name('y axis');
  lightfolder.add(directionallight.position, 'z', -6500, 6500).name('z axis');
  lightfolder.add(directionallight, 'intensity', 0, 1).name('intensity');
  lightfolder.open();
  // 设置渲染器参数
  renderer.setpixelratio(window.devicepixelratio);
  renderer.setsize(window.innerwidth, window.innerheight);
  renderer.tonemapping = three.acesfilmictonemapping;
  renderer.tonemappingexposure = 2.5;
  // 初始化 css3drenderer
  const labelrender = new css3drenderer();
  labelrender.setsize(window.innerwidth, window.innerheight);
  labelrender.domelement.style.position = 'absolute';
  labelrender.domelement.style.top = '0px';
  labelrender.domelement.style.pointerevents = 'none';
  document.getelementbyid('my-three').appendchild(labelrender.domelement);
  proxy.labelrender = labelrender;
  // 更新控制器
  controls.update();
}
function gltfmodel1() {
  // 加载gltf模型
  loader.load("../../public/yuanqu.glb",
    function (gltf) { // 模型加载完成后的回调函数
      glbmodel = gltf.scene;
      scene.add(gltf.scene) // 将模型添加到场景中
      glbmodel.traverse((object) => {
        if (object.name === "fufachejian") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>浮法车间</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(8, 3, 42); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          // const tagfolder = gui.addfolder('浮法车间标签');
          // // 将tag.position对象中的x, y, z属性添加到gui中
          // tagfolder.add(tag.position, 'x', -200, 200).name('x position');
          // tagfolder.add(tag.position, 'y', -200, 200).name('y position');
          // tagfolder.add(tag.position, 'z', -200, 200).name('z position');
          // tagfolder.open(); // 打开此文件夹以默认显示控制器
        }
        if (object.name === "bangongqu") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>办公楼</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(8, 3, 78); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          // const tagfolder = gui.addfolder('办公区标签');
          // // 将tag.position对象中的x, y, z属性添加到gui中
          // tagfolder.add(tag.position, 'x', -200, 200).name('x position');
          // tagfolder.add(tag.position, 'y', -200, 200).name('y position');
          // tagfolder.add(tag.position, 'z', -200, 200).name('z position');
          // tagfolder.open(); // 打开此文件夹以默认显示控制器
        }
        if (object.name === "qiye_01") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>企业1</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
        }
        if (object.name === "qiye_002") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>企业2</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(12, 5, 54); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          // const tagfolder = gui.addfolder('qiye--------');
          // // 将tag.position对象中的x, y, z属性添加到gui中
          // tagfolder.add(tag.position, 'x', -200, 200).name('x position');
          // tagfolder.add(tag.position, 'y', -200, 200).name('y position');
          // tagfolder.add(tag.position, 'z', -200, 200).name('z position');
          // tagfolder.open(); // 打开此文件夹以默认显示控制器
        }
        if (object.name === "chejian_06") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>车间6</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          // const tagfolder = gui.addfolder('食堂标签');
          // // 将tag.position对象中的x, y, z属性添加到gui中
          // tagfolder.add(tag.position, 'x', -200, 200).name('x position');
          // tagfolder.add(tag.position, 'y', -200, 200).name('y position');
          // tagfolder.add(tag.position, 'z', -200, 200).name('z position');
          // tagfolder.open(); // 打开此文件夹以默认显示控制器
        }
        if (object.name === "chejian_03") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>仓库3</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          // const tagfolder = gui.addfolder('食堂标签');
          // // 将tag.position对象中的x, y, z属性添加到gui中
          // tagfolder.add(tag.position, 'x', -200, 200).name('x position');
          // tagfolder.add(tag.position, 'y', -200, 200).name('y position');
          // tagfolder.add(tag.position, 'z', -200, 200).name('z position');
          // tagfolder.open(); // 打开此文件夹以默认显示控制器
        }
        if (object.name === "chejian_02") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>仓库2</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          // const tagfolder = gui.addfolder('食堂标签');
          // // 将tag.position对象中的x, y, z属性添加到gui中
          // tagfolder.add(tag.position, 'x', -200, 200).name('x position');
          // tagfolder.add(tag.position, 'y', -200, 200).name('y position');
          // tagfolder.add(tag.position, 'z', -200, 200).name('z position');
          // tagfolder.open(); // 打开此文件夹以默认显示控制器
        }
        if (object.name === "chejian_01") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>仓库1</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(8, 3, 38); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          // const tagfolder = gui.addfolder('食堂标签');
          // // 将tag.position对象中的x, y, z属性添加到gui中
          // tagfolder.add(tag.position, 'x', -200, 200).name('x position');
          // tagfolder.add(tag.position, 'y', -200, 200).name('y position');
          // tagfolder.add(tag.position, 'z', -200, 200).name('z position');
          // tagfolder.open(); // 打开此文件夹以默认显示控制器
        }
        if (object.name === "yuanliaolou") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>原料楼</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(-10, -1, 38); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          const tagfolder = gui.addfolder('食堂标签');
        }
        if (object.name === "qizhan") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>气站</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(-10, -1, 20); // 调整标签位置
          object.add(tag);
          // 在gui中添加一个用于调整tag位置的文件夹
          // const tagfolder = gui.addfolder('食堂标签');
        }
        if (object.name === "yuanpian") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          div.innerhtml = '<p>原片仓库</p>';
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(-6, 7, 30); // 调整标签位置
          object.add(tag);
        }
        if (object.name === "yuchuli002" || object.name === "yuchuli003" || object.name === "yuchuli") {
          const div = document.createelement('div');
          div.classname = 'workshop-text';
          if (object.name === "yuchuli002") {
            div.innerhtml = '<p>预处理车间1</p>';
          } else if(object.name === "yuchuli003") {
            div.innerhtml = '<p>预处理车间2</p>';
          }else if(object.name === "yuchuli"){
            div.innerhtml = '<p>预处理车间1</p>';
          }
          // 创建css3dsprite
          const tag = new css3dsprite(div);
          tag.position.set(-6, 7, 30); // 调整标签位置
          object.add(tag);
        }
      })
    },
    function (xhr) { // 加载进度回调
      const percent = math.floor((xhr.loaded / xhr.total) * 100); // 计算加载进度百分比
      // console.log(`模型加载进度：${percent}%`);
    }
  )
}
function rendermodel() {
  //渲染
  renderer.setsize(width, height)//设置渲染区尺寸
  renderer.render(scene, camera)//执行渲染操作、指定场景、相机作为参数
  // renderer.setclearcolor(0x00ff00); // 设置背景颜色为绿色/
  renderer.tonemapping = three.acesfilmictonemapping;
  // 设置曝光度
  renderer.tonemappingexposure = 3; // 适当调整曝光度
  // 设置控制器的角度限制
  controls.minpolarangle = math.pi / 4; // 最小极角为 45 度
  controls.maxpolarangle = math.pi / 2; // 最大极角为 90 度
}
//渲染循环函数
function render() {
  renderer.render(scene, camera); // 执行渲染操作
  controls.update() // 更新控制器
  proxy.labelrender.render(scene, camera); // 渲染 css3d 标签
  requestanimationframe(render); // 请求下一帧
}
// 画布跟随窗口变化
window.onresize = function () {
  renderer.setsize(window.innerwidth, window.innerheight); // 重设渲染器尺寸
  camera.aspect = window.innerwidth / window.innerheight;  // 更新相机的长宽比
  camera.updateprojectionmatrix(); // 更新相机的投影矩阵
};
window.addeventlistener('keydown', function (event) {
  switch (event.key) {
    case 'arrowleft':  // 按左箭头键
      moveleft();
      break;
    case 'arrowright': // 按右箭头键
      moveright();
      break;
  }
});
// 交互事件
addeventlistener('dblclick', onmousedblclick, false)
function onmousedblclick(event) {
  console.log("event")
  let intersects = getintersects(event);
  if (intersects.length !== 0 && intersects[0].object instanceof three.mesh) {
    const selectedobject = intersects[0].object;
    let selectedobjects = [];
    selectedobjects.push(selectedobject);
    console.log(selectedobjects)
    // outlinepass.selectedobjects = selectedobjects;
  }
}
function moveleft() {
  if (glbmodel) {
    glbmodel.position.x -= 10; // 向左移动10单位
  }
}
function moveright() {
  if (glbmodel) {
    glbmodel.position.x += 10; // 向右移动10单位
  }
}
//获取与射线相交的对象数组
function getintersects(event) {
  let raycaster = new three.raycaster();
  let mouse = new three.vector2();
  //通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1
  mouse.x = (event.clientx / window.innerwidth) * 2 - 1;
  mouse.y = -(event.clienty / window.innerheight) * 2 + 1; //这里为什么是-号，没有就无法点中
  //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
  raycaster.setfromcamera(mouse, camera);
  return raycaster.intersectobjects(scene.children);
}
</script>
<style>
.workshop-text {}
.workshop-text p {
  font-size: 0.9rem;
  font-weight: bold;
  padding: 10px;
  color: #0ff;
}
#tag {
  padding: 0px 10px;
  border: #00ffff solid 1px;
  height: 40px;
  border-radius: 5px;
  width: 65px;
}
</style>

效果：