threejs添加标签

CD-G

已于 2022-10-12 10:08:58 修改

阅读量1k

点赞数

分类专栏： THREEJS 文章标签： css html 前端

于 2022-10-11 17:42:03 首次发布

本文链接：https://blog.csdn.net/qq_40344815/article/details/127268234

版权

THREEJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

import { CSS2DRenderer,CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer'
import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'

let labelRenderer,css3DRenderer;

//普通标签
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.left= '0px';
labelRenderer.domElement.style.pointerEvents = 'none'// 避免HTML标签遮挡三维场景的鼠标事件
document.body.appendChild( labelRenderer.domElement );

//三维标签
css3DRenderer = new CSS3DRenderer()
css3DRenderer.domElement.style.zIndex = 0
css3DRenderer.domElement.style.position = 'absolute'
css3DRenderer.domElement.style.top = '0px'
css3DRenderer.domElement.style.left = '0px'
css3DRenderer.domElement.style.pointerEvents = 'none'// 避免HTML标签遮挡三维场景的鼠标事件
document.body.appendChild(css3DRenderer.domElement)

//创建标签
const earthDiv = document.createElement( 'div' );
earthDiv.className = 'label';
earthDiv.textContent = 'Earth';
earthDiv.style.marginTop = '-1em';
const earthLabel = new CSS2DObject( earthDiv );
earthLabel.position.set( 0, 0, 0 );