在很多的实际的项目中，你可能需要给一个Three.js的模型添加标签，那么我们可以使用three.js的精灵模型来表示，使用精灵模型表示一个模型对象的标签，那么精灵模型就要位于模型对象的附近。可以获得要标注模型的世界坐标，然后来设置精灵标签的位置，适当偏移一点就可以，当然也可以把精灵对象插入到模型对象的父对象中，和模型对象一样作为父对象的子对象，这样的话如果模型父对象的位置变化，精灵模型可以跟着一起变化。如下效果就是使用精灵实现的效果,需要源码联系QQ:1582360909
| /** * 创建点精灵模型 */ // 创建精灵材质对象SpriteMaterial var spriteMaterial = new THREE.SpriteMaterial({ map: new THREE.TextureLoader().load("立方体.png"), //设置精灵纹理贴图 transparent: true,//开启透明(纹理图片png有透明信息) }); // 创建精灵模型对象，不需要几何体geometry参数 var sprite = new THREE.Sprite(spriteMaterial); sprite.scale.set(30, 30, 1); //精灵大小 // 把精灵模型插入到模型对象的父对象下面 group.add( sprite); // 父对象group位置变化,网格模型及其对象的标签同样发生变化 group.position.set(10, 0, -80); // 表示标签信息的精灵模型对象相对父对象设置一定的偏移 sprite.translateY(30); |
