关于编辑器:ThreeJS教程精灵模型Sprite作为标签

举荐：将NSDT场景编辑器退出你的3D工具链
3D工具集：NSDT简石数字孪生

https://www.mvrlink.com/threejs-sprite-model-as-label/

精灵模型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;