关于编辑器:ThreeJS教程CSS3批量标注多个标签

举荐：将NSDT场景编辑器退出你的3D工具链

3D工具集：NSDT简石数字孪生CSS3批量

https://www.mvrlink.com/threejs-css3-batch-labeling-multiple-...

标注多个标签上面下工厂为例，应用CSS3DRenderer批量渲染多个HTML元素标签。

CSS3渲染器根本代码CSS3渲染器代码和上节课内容一样设置即可。// 引入CSS3渲染器CSS3DRenderer
import {CSS3DRenderer} from 'three/addons/renderers/CSS3DRenderer.js';
// 创立一个CSS3渲染器CSS3DRenderer
const css3Renderer = new CSS2DRenderer();
css3Renderer.setSize(width, height);
// HTML标签<div id="tag"></div>里面父元素叠加到canvas画布上且重合
css3Renderer.domElement.style.position = 'absolute';
css3Renderer.domElement.style.top = '0px';
//设置.pointerEvents=none，解决HTML元素标签对threejs canvas画布鼠标事件的遮挡
css3Renderer.domElement.style.pointerEvents = 'none';
document.body.appendChild(css3Renderer.domElement);
// 渲染循环
function render() {

css3Renderer.render(scene, camera);// ...requestAnimationFrame(render);

}
window.onresize = function () {

...// HTML标签css3Renderer.domElement尺寸从新设置css3Renderer.setSize(width,height);

};
标签HTML、CSS代码应用了一个带有箭头的背景图png图片。<style>

#tag {    width: 70px;    height: 40px;    line-height: 32px;    text-align: center;    color: #fff;    font-size: 16px;    background-image: url(./标签箭头背景.png);    background-repeat: no-repeat;    background-size: 100% 100%;}

</style>
<div id="tag">设施A</div>
HTML标签渲染前暗藏在CSS3渲染器渲染HTML标签，从新定位标签之前，能够先把标签暗藏display: none;。<div id="tag" style="display: none;">设施A</div>
三维软件中设置须要标注的地位在须要标注的地位，能够创立多个空对象，用来给CSS3标签模型定位。工厂模型中别离命名了三个空对象设施A标注、设施B标注、停车场标注。创立CSS3模型对象或精灵对象标注场景const div = document.getElementById('tag');
// HTML元素转化为threejs的CSS3对象
// const tag = new CSS3DObject(div);
const tag = new CSS3DSprite(div);
div.style.pointerEvents = 'none';//防止标签遮挡canvas鼠标事件
// obj是建模软件中创立的一个空对象
const obj = gltf.scene.getObjectByName('设施A标注');
//tag会标注在空对象obj对应的地位
obj.add(tag);
模型缩放设置CSS3模型或精灵对象尺寸的时候，你就把他设想为一个一般矩形立体网格模型Mesh，CSS3模型或精灵的尺寸来自本身HTML元素的尺寸像素值。HTML标签元素的高度是几十个像素，工厂尺寸是100多，整体预览工厂模型的时候，如果标签笼罩区域过大，你能够适当放大。// const tag = new CSS3DObject(div);
const tag = new CSS3DSprite(div);
//适当缩放模型标签
tag.scale.set(0.1,0.1,1);
模型定位把模型标签背景的箭头放在空对象标注点的左近地位，依据HTML标签的几何核心与标签箭头的top、left差值来设置即可，留神如果缩放了标签模型，还要思考缩放的问题。留神不同标签top、left差值，可能不同，该案例只有top方向偏差是高度一半(留神height、border、padding的影响)。tag.scale.set(0.1,0.1,1);
//标签底部箭头和空对象标注点重合：偏移高度像素值一半*缩放比例
tag.position.y = 40/2*0.1;
批量创立标签如果是Vue或React批量创立UI组件还是比拟不便的，原生HTML、CSS的话，留神批量创立DOM即可，原理一样。//须要批量标注的标签数据arr
const arr = ['设施A','设施B','停车场'];
for (let i = 0; i < arr.length; i++) {

// 留神是多个标签，须要克隆复制一份const div = document.getElementById('tag').cloneNode();div.innerHTML = arr[i];//标签数据填写// HTML元素转化为threejs的CSS3对象// const tag = new CSS3DObject(div);const tag = new CSS3DSprite(div);div.style.pointerEvents = 'none'; //防止标签遮挡canvas鼠标事件// obj是建模软件中创立的一个空对象const obj = gltf.scene.getObjectByName(arr[i]+'标注');//tag会标注在空对象obj对应的地位obj.add(tag);tag.scale.set(0.1,0.1,1);//适当缩放模型标签tag.position.y = 40/2*0.1;//标签底部箭头和空对象标注点重合：偏移高度像素值一半*缩放比例

}