当前位置：首页 > web >正文

CSS3DRenderer+ CSS3DObject实现在 Three.js 中添加文本内容

web 2025/8/21 13:37:16

创建3D文本渲染器

通过 CSS3DRenderer 创建一个3d文本渲染器

注意：这里需要创建两个渲染 WebGLRenderer 用来渲染3d场景，CSS3DRenderer 用来渲染3D文本

	// 创建渲染器initRender() {this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, preserveDrawingBuffer: true }) //设置抗锯齿//设置屏幕像素比this.renderer.setPixelRatio(window.devicePixelRatio)//渲染的尺寸大小const { clientHeight, clientWidth } = this.containerthis.renderer.setSize(clientWidth, clientHeight)this.container.appendChild(this.renderer.domElement)// 创建一个CSS3DRendererthis.css3DRenderer = new CSS3DRenderer();this.css3DRenderer.setSize(clientWidth, clientHeight);this.css3DRenderer.domElement.style.position = 'absolute';this.css3DRenderer.domElement.style.pointerEvents = 'none';this.css3DRenderer.domElement.style.top = 0;this.container.appendChild(this.css3DRenderer.domElement);}

创建3D文本标签方法

将创建3D文本标签的方法单独抽离在一个函数中去 create3dTags ，传入三个参数 clientX（鼠标拖拽结束时的X坐标）, clientY（鼠标拖拽结束时的X坐标）, name（当前element-plus icon组件的name）’

1.这里通过 THREE.Raycaster() 检测鼠标在三维场景中的位置(x,y,z)
2.通过Vue3 jsx语法的 render 函数和 createApp 方法创建3D文本节点
3.通过 CSS3DObject 创建一个可以在3D场景中展示的元素
4.将获取到的鼠标坐标（x,y,z）赋值给 CSS3DObject 创建的文本标签
5.最后通过 scene.add(cssObject) 添加到场景中去

import { CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
import { ElIcon, ElMessage } from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { h, createApp } from "vue";function create3dTags(clientX, clientY, name) {const { clientHeight, clientWidth, offsetLeft, offsetTop } = this.container// 计算鼠标在屏幕上的坐标this.mouse.x = ((clientX - offsetLeft) / clientWidth) * 2 - 1this.mouse.y = -((clientY - offsetTop) / clientHeight) * 2 + 1const raycaster = THREE.Raycaster()raycaster.setFromCamera(this.mouse, this.camera);const intersects = raycaster.intersectObjects(this.scene.children, true);if (intersects.length > 0) {var element = document.createElement('div');// 创建容器标签const backgroundColor = 'rgba(0,127,127,' + (Math.random() * 0.5 + 0.25) + ')'const len = this.dragTagList.length + 1// 创建3d标签const tagvMode = createApp({render() {return (<div><div className="element-tag"style={{ width: 60 + 'px', height: 40 + 'px', fontSize: 6 + 'px', color: '#ffffffbf', backgroundColor }}><span className='tag-txt'>{`标签-${len}`}</span></div><div className='tag-icon' ><ElIcon >{h(ElementPlusIconsVue[name])}</ElIcon></div></div>)}});const vNode = tagvMode.mount(document.createElement('div'))element.appendChild(vNode.$el)var cssObject = new CSS3DObject(element);// 获取到鼠标坐标const { x, y, z } = intersects[0].pointcssObject.position.set(x, y, z);cssObject.scale.set(.01, .01, .01)this.scene.add(cssObject)} else {ElMessage.warning('当前角度无法获取鼠标位置请调整“相机角度”在添加')}
}

手动调用 create3dTags 方法

调用多次创建不同icon的文本标签

create3dTags(100,444,"More")
create3dTags(120,644,"MuteNotification")
create3dTags(200,544,"RemoveFilled")
create3dTags(200,144,"Document")
create3dTags(150,744,"FolderAdd")
create3dTags(300,54,"KnifeFork")

在这里插入图片描述

定义拖拽方法实现拖拽添加

1.这里使用的是H5的拖拽API来实现的，dragstart，drag，drop
2.获取到 ElementPlusIconsVue 中所有图标的 name
3.拖拽结束在 drop 函数中获取当前鼠标的坐标
4.调用 create3dTags 方法实现拖拽创建文本标签

<template><el-scrollbar max-height="150px"><el-row class="tag-row"><el-col draggable="true" v-for="tag in tagList" :key="tag.name" :span="4" @dragstart="(e) => onDragstart(e, tag)" @drag="(e) => onDrag(e)">					<div class="tag-box"><div class="icon"><el-icon size="16px"><component :is="tag.name"></component></el-icon></div></div></el-col></el-row></el-scrollbar><div id="model" @drop="dropEnd" ref="model" @dragover.prevent>  </div>
</template><script setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { useMeshEditStore } from '@/store/meshEditStore'
import {ref} from 'vue'const store = useMeshEditStore();
const tagList = computed(() => {const arr = []for (const [key] of Object.entries(ElementPlusIconsVue)) {arr.push({ name: key })}return arr
})const dragTag = ref(null)// 拖拽开始
const onDragstart = (e, tag) => {dragTag.value = tag.name
};
// 拖拽中
const onDrag = (event) => {event.preventDefault();
};// 拖拽结束
const dropEnd = (event) => {const { clientX, clientY } = estore.modelApi.create3dTags(clientX,clientY,dragTag.value);
};
</script>

在这里插入图片描述

新增标签参数更新方法，实现标签内容自定义

在标签创建成功之后，我们可能需要动态的修改文本的相关信息如：文字颜色，背景颜色，图标大小，文本高度，文本宽度等信息。

为了让这个3d文本标签更加的灵活化，这里通过新增 updateTagElement 方法来实现

1.通过 getObjectByProperty 传入 uuid 获取到当前文本节点的内容
2.通过 querySelector 获取到需要改变的元素节点信息
3.将传入的参数赋值给对应元素的内容

import TWEEN from "@tweenjs/tween.js";
function updateTagElement(tag) {const object = this.scene.getObjectByProperty('uuid', tag.uuid)if (object) {const element = object.element.querySelector('.element-tag')const iconElement = object.element.querySelector('.tag-icon')const txtElement = object.element.querySelector('.tag-txt')const { height, backgroundColor, width,fontSize, color, innerText, iconColor,iconSize, positionY, positionX, positionZ } = tagelement.style.height = height + 'px'element.style.backgroundColor = backgroundColorelement.style.boxShadow = `0px 0px 4px ${backgroundColor}`element.style.width = width + 'px'element.style.fontSize = fontSize + 'px'element.style.color = colortxtElement.innerText = innerTexticonElement.style.fontSize = iconSize + 'px'iconElement.style.color = iconColor// 修改坐标位置const Tween = new TWEEN.Tween(object.position)const endPosition = {x: positionX,y: positionY,z: positionZ}Tween.to(endPosition, 500)Tween.onUpdate((val) => {object.position.set(val.x || 0, val.y || 0, val.z || 0)})Tween.start();}}