关于编辑器: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;