ThreeJS教程:精灵模型Sprite作为标签

ThreeJS教程:精灵模型Sprite作为标签
推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

精灵模型Sprite作为标签

实际开发的时候,可以使用精灵模型Sprite + 颜色贴图作为标签,标注三维场景。

下面具体知识点,在精灵模型章节基本都讲解过,学习下面内容之前,你可以尝试用精灵模型去标注工厂设备。

精灵模型标签

如果你想想用精灵模型表达什么含义,可以美术提供一个对应的贴图。

const texLoader= new THREE.TextureLoader();
const texture = texLoader.load("./警告.png");
const spriteMaterial = new THREE.SpriteMaterial({
  map: texture,
});
const sprite = new THREE.Sprite(spriteMaterial);

可以根据标注的场景尺寸量级,设置精灵模型大小,不要过大或过小,先大概标注,比如精灵标签比设备尺寸小一个数量级,然后再精确调整。

sprite.scale.set(5, 5, 1);
sprite.position.y = 5 / 2; //标签底部箭头和空对象标注点重合  

标注工厂设备

在工厂三维模型需要标注的位置,设置一个空对象,用来控制精灵模型标签的位置。

// obj是建模软件中创建的一个空对象
const obj = gltf.scene.getObjectByName('设备A标注');
//tag会标注在空对象obj对应的位置
obj.add(sprite);

精灵模型底部和标注位置重合

设置精灵模型位置属性,使精灵标签底部和空对象标注位置重合。

sprite.scale.set(4, 4, 1);
//标签底部箭头和空对象标注点重合  
sprite.position.y = 4/2;

精灵模型Sprite和CSS3精灵模型CSS3DSprite标签差异

精灵模型渲染Sprite的标签,默认可以被其他网格模型遮挡,但是CSS3渲染器渲染的HTML元素标签是叠加在canvas画布上,不会被其它网格模型遮挡。

标注多个设备状态

封装一个创建精灵标签的函数,可以根据需要调用,标注任何设备。

import * as THREE from 'three';
// 标注位置对应的模型对象obj
function createSprite(obj,state) {
    const texLoader= new THREE.TextureLoader();
    let texture = null;
    if(state == '警告'){
        texture= texLoader.load("./警告.png");
    }else{
        texture = texLoader.load("./故障.png");
    }
    const spriteMaterial = new THREE.SpriteMaterial({
        map: texture,
    });
    const sprite = new THREE.Sprite(spriteMaterial);
    // 控制精灵大小
    sprite.scale.set(5, 5, 1);
    sprite.position.y = 5 / 2; //标签底部箭头和空对象标注点重合  
    obj.add(sprite); //tag会标注在空对象obj对应的位置
}

export default createSprite;

上一篇:ThreeJS教程:CSS3批量标注多个标签 (mvrlink.com)

下一篇:ThreeJS教程:Sprite标签(Canvas作为贴图) (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号