前言
如何在threejs场景中添加vue3组件作为标签,在标签上实现复杂的交互功能,一般我们搜到的都是加文字标注,操作div,如何渲染vue组件呢,我们一起来看看吧
效果
添加标签的常用写法
通常我们在给模型添加标签的时候会使用CSS2DRenderer与CSS2DObject这两个库,来给模型添加简单的文字标签,
常见写法如下:
// 引入相关库
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// 创建一个HTML标签
function createTag(content,className) {
// 创建div元素(作为标签)
var div = document.createElement('div');
div.innerHTML = content;
div.classList.add(className);
//div元素包装为CSS2模型对象CSS2DObject
var label = new CSS2DObject(div);
div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件
//