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

8次阅读

共计 2613 个字符，预计需要花费 7 分钟才能阅读完成。

举荐：将 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;// 标签底部箭头和空对象标注点重合：偏移高度像素值一半 * 缩放比例

}

正文完