【ThreeJs】如何给模型打上文字标签?
创始人
2024-06-02 05:02:06
0

一、概述

ThreeJs渲染中创建的网格模型,有时候我们需要给模型添加标签文字,方便识别不同的物体。
这时候我们可以使用CSS3DRendererCSS2DRenderer这两个库,里面提供了三种打标签的方式,随着相机角度的变化,三种标签的显示效果各不相同。
三种标签分别是: CSS 2DObject、CSS 3DObject 标签、CSS 3DSprite 标签

二、效果预览

1、角度不同

下面是从不同角度看同一组模型时的显示效果:
在这里插入图片描述

2、距离不同

这是前后两组模型的显示效果:
在这里插入图片描述

3、区别简述

可以看到,CSS 2DObjectCSS 3DSprite都可以让标签永远正对当前相机视角。不同的是,CSS 2DObject标签的尺寸不会受远近影响;CSS 3DSprite标签的尺寸受远近影响,远小近大;
CSS 3DObject 标签朝向固定,不会随视角变化而改变,就仿佛是创建的模型对象,但实际这三种标签都是使用html+css来实现的,并且CSS 3DObject标签的大小也会受远近影响,远小近大。

三、代码实现

tag2D.js【创建CSS2DObject】

import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
// 创建一个HTML标签
function tag(name) {// 创建div元素(作为标签)var div = document.createElement('div');div.innerHTML = name;div.classList.add('tag');//div元素包装为CSS2模型对象CSS2DObjectvar label = new CSS2DObject(div);div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件// 设置HTML元素标签在three.js世界坐标中位置// label.position.set(x, y, z);return label;//返回CSS2模型标签      
}// 创建一个CSS2渲染器CSS2DRenderer
function labelRenderer(container) {var labelRenderer = new CSS2DRenderer();labelRenderer.setSize(container.offsetWidth, container.offsetHeight);labelRenderer.domElement.style.position = 'absolute';// 相对标签原位置位置偏移大小labelRenderer.domElement.style.top = '0px';labelRenderer.domElement.style.left = '0px';// //设置.pointerEvents=none,以免模型标签HTML元素遮挡鼠标选择场景模型labelRenderer.domElement.style.pointerEvents = 'none';container.appendChild(labelRenderer.domElement);return labelRenderer;
}export { tag, labelRenderer }

tag3D.js【创建CSS3DObject ,CSS3DSprite】

import { CSS3DRenderer, CSS3DObject ,CSS3DSprite} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
// 创建一个HTML标签
function tag3D(name) {// 创建div元素(作为标签)var div = document.createElement('div');div.innerHTML = name;div.classList.add('tag');//div元素包装为CSS3模型对象CSS3DObjectvar label = new CSS3DObject(div);div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件// 设置HTML元素标签在three.js世界坐标中位置// label.position.set(x, y, z);//缩放CSS3DObject模型对象label.scale.set(0.2, 0.2, 0.2);//根据相机渲染范围控制HTML 3D标签尺寸label.rotateY(Math.PI / 2);//控制HTML标签CSS3对象姿态角度// label.rotateX(-Math.PI/2);return label;//返回CSS3模型标签    
}// 创建一个HTML标签
function tag3DSprite(name) {// 创建div元素(作为标签)var div = document.createElement('div');div.innerHTML = name;div.classList.add('tag');//div元素包装为CSS3模型对象CSS3DSpritevar label = new CSS3DSprite(div);div.style.pointerEvents = 'none';//避免HTML标签遮挡三维场景的鼠标事件// 设置HTML元素标签在three.js世界坐标中位置// label.position.set(x, y, z);//缩放CSS3DSprite模型对象label.scale.set(0.2, 0.2, 0.2);//根据相机渲染范围控制HTML 3D标签尺寸label.rotateY(Math.PI / 2);//控制HTML标签CSS3对象姿态角度// label.rotateX(-Math.PI/2);return label;//返回CSS3模型标签    
}// 创建一个CSS2渲染器CSS2DRenderer
function labelRenderer(container) {var labelRenderer = new CSS3DRenderer();labelRenderer.setSize(container.offsetWidth, container.offsetHeight);labelRenderer.domElement.style.position = 'absolute';// 相对标签原位置位置偏移大小labelRenderer.domElement.style.top = '0px';labelRenderer.domElement.style.left = '0px';// //设置.pointerEvents=none,以免模型标签HTML元素遮挡鼠标选择场景模型labelRenderer.domElement.style.pointerEvents = 'none';container.appendChild(labelRenderer.domElement);return labelRenderer;
}export { tag3D, tag3DSprite, labelRenderer }

Box.ts【创建模型+标签】

import * as THREE from "three"
import initRenderer from "./core/renderer";
import { model } from "./core/model";
import initScene from "./core/scene";
import { labelRenderer as labelRenderer2D, tag as tag2D } from "./core/tag2D";
import { labelRenderer as labelRenderer3D, tag3D, tag3DSprite } from "./core/tag3D";class Box {private scene;private camera;private renderer;private container;constructor(container) {this.container = container;this.scene = new THREE.Scene();this.init();}init() {// 初始化渲染器和相机let { renderer, camera, render } = initRenderer({ scene: this.scene, container: this.container, labelRenderer2D: labelRenderer2D(this.container), labelRenderer3D: labelRenderer3D(this.container) });this.renderer = renderer;this.camera = camera;this.renderer.setClearColor("black");// 初始化场景initScene({ scene: this.scene, container: this.container, renderer: this.renderer, camera: this.camera });//初始化模型this.initObjects();// 开始渲染render();}//绘制initObjects() {const box = new THREE.BoxGeometry(30, 30, 30);const material = new THREE.MeshLambertMaterial({color: 0x0000ff})// --------------------模型1const mesh1 = new THREE.Mesh(box, material);mesh1.position.z = 30;mesh1.position.x = 30;box.translate(0, 15, 0)this.scene.add(mesh1);// 添加CSS 2DObject标签var label2D = tag2D("CSS 2DObject 标签");//设置标签名称var pos1 = new THREE.Vector3();mesh1.getWorldPosition(pos1);//获取obj世界坐标、pos1.y += 30;label2D.position.copy(pos1);//标签标注在obj世界坐标this.scene.add(label2D);//标签插入场景 // --------------------模型2const mesh2 = mesh1.clone();mesh2.position.x = 100;this.scene.add(mesh2);// 添加CSS 3DObject标签var label3D = tag3D("CSS 3DObject 标签");//设置标签名称var pos2 = new THREE.Vector3();mesh2.getWorldPosition(pos2);//获取obj世界坐标、pos2.y += 30;label3D.position.copy(pos2);//标签标注在obj世界坐标this.scene.add(label3D);//标签插入场景 // --------------------模型3const mesh3 = mesh1.clone();mesh3.position.z = 100;this.scene.add(mesh3);// 添加CSS 3DSprite标签var label3DSprite = tag3DSprite("CSS 3DSprite 标签");//设置标签名称var pos3 = new THREE.Vector3();mesh3.getWorldPosition(pos3);//获取obj世界坐标、pos3.y += 30;label3DSprite.position.copy(pos3);//标签标注在obj世界坐标this.scene.add(label3DSprite);//标签插入场景 }
}
export default Box;

render.ts【设置渲染器】

import * as THREE from "three";
import createCamera from "./camera";const initRenderer = function (context) {let { scene, labelRenderer2D, labelRenderer3D } = context;let { camera, renderer } = createCamera(context);// 渲染const render = () => {renderer.render(scene, camera);labelRenderer2D.render(scene, camera); //渲染HTML标签对象 CSS2DObject 标签labelRenderer3D.render(scene, camera); //渲染HTML标签对象 CSS3DObject 标签//监听鼠标、键盘事件requestAnimationFrame(render);}return { camera, renderer, render };
}export default initRenderer;

四、源码

前往标签demo源码

相关内容

热门资讯

安卓系统用的华为应用,探索智能... 你知道吗?在安卓系统里,华为的应用可是个宝库呢!它们不仅功能强大,而且使用起来超级方便。今天,就让我...
安卓变ios系统魅蓝 你知道吗?最近有个朋友突然告诉我,他要把自己的安卓手机换成iOS系统,而且还是魅蓝品牌的!这可真是让...
幻书启世录安卓系统,安卓世界中... 亲爱的读者们,你是否曾在某个夜晚,被一本神奇的书所吸引,仿佛它拥有着穿越时空的力量?今天,我要带你走...
电脑安装安卓系统进不去,安卓系... 电脑安装安卓系统后竟然进不去,这可真是让人头疼的问题啊!你是不是也遇到了这种情况,心里直呼“怎么办怎...
用键盘切换控制安卓系统,畅享安... 你有没有想过,用键盘来控制你的安卓手机?是的,你没听错,就是那个我们每天敲敲打打的小玩意儿——键盘。...
小米安卓镜像系统在哪,小米安卓... 你有没有想过,你的小米手机里有一个隐藏的宝藏——安卓镜像系统?没错,就是那个可以让你的手机瞬间变身成...
安卓手机下载排班系统,高效排班... 你有没有想过,每天忙碌的工作中,有没有什么好帮手能帮你轻松管理时间呢?今天,就让我来给你介绍一个超级...
桌面组件如何弄安卓系统,桌面组... 亲爱的桌面爱好者们,你是否曾梦想过将安卓系统搬到你的电脑桌面上?想象那些流畅的动画、丰富的应用,还有...
安卓13系统介绍视频,新功能与... 亲爱的读者们,你是否对安卓13系统充满好奇?想要一探究竟,却又苦于没有足够的时间去研究?别担心,今天...
车机安卓7.1系统,功能升级与... 你有没有发现,现在的车机系统越来越智能了?尤其是那些搭载了安卓7.1系统的车机,简直就像是个贴心的智...
安卓系统下如何读pdf,And... 你有没有遇到过这种情况:手机里存了一大堆PDF文件,可是怎么也找不到一个能顺畅阅读的工具?别急,今天...
安卓系统全国通用的吗,畅享智能... 你有没有想过,为什么你的手机里装的是安卓系统呢?安卓系统,这个名字听起来是不是有点神秘?今天,就让我...
假苹果手机8安卓系统,颠覆传统... 你有没有想过,如果苹果手机突然变成了安卓系统,会是怎样的景象呢?想象那熟悉的苹果外观,却运行着安卓的...
安卓12.0系统vivo有吗,... 你有没有听说最近安卓系统又升级啦?没错,就是那个让手机焕然一新的安卓12.0系统!那么,咱们国内的手...
核心芯片和安卓系统,探索核心芯... 你知道吗?在科技的世界里,有一对“黄金搭档”正悄悄改变着我们的生活。他们就是——核心芯片和安卓系统。...
如何调安卓系统屏幕颜色,安卓系... 亲爱的手机控们,你是否曾觉得安卓系统的屏幕颜色不够个性,或者是因为长时间盯着屏幕而感到眼睛疲劳?别担...
旧台式电脑安装安卓系统,轻松安... 你那台旧台式电脑是不是已经服役多年,性能逐渐力不从心,却又不忍心让它退役呢?别急,今天就来教你怎么给...
美国要求关闭安卓系统,科技霸权... 美国要求关闭安卓系统:一场技术革新还是政治博弈?在数字化时代,智能手机已经成为我们生活中不可或缺的一...
安卓系统日记本 你有没有发现,手机里的安卓系统日记本,简直就是记录生活点滴的宝藏库呢?想象每天忙碌的生活中,有没有那...
安卓手机广告最少的系统,探索安... 你有没有发现,用安卓手机的时候,广告总是无处不在,让人烦得要命?不过别急,今天我要给你揭秘一个秘密—...