默认情况下Threejs的精灵材质要改变大小只能依靠设置scale而不能像其他几何体一样设置长宽。
## 源码 看精灵材质的源码里的构造函数
let _geometry;
//……
//其他代码
//……
class Sprite extends Object3D {
constructor(material) {
super();
this.type = 'Sprite';
if (_geometry === undefined) {
_geometry = new BufferGeometry();
const float32Array = new Float32Array([
-0.5, -0.5, 0,
0, 0, 0.5,
-0.5, 0, 1,
0, 0.5, 0.5,
0, 1, 1,
-0.5, 0.5, 0,
0, 1
]);
const interleavedBuffer = new InterleavedBuffer(float32Array, 5);
_geometry.setIndex([0, 1, 2, 0, 2, 3]);
_geometry.setAttribute('position', new InterleavedBufferAttribute(interleavedBuffer, 3, 0, false));
_geometry.setAttribute('uv', new InterleavedBufferAttribute(interleavedBuffer, 2, 3, false));
}
this.geometry = _geometry;
this.material = (material !== undefined) ? material : new SpriteMaterial();
this.center = new Vector2(0.5, 0.5);
}
}
可以发现精灵材质虽然没有厚度但是内部也是有一个geometry 。这个geometry 就是一个长宽均为1的方形。
## 解决方法 解决方法也很简单,创建一个子类继承自THREE.Sprite,然后在子类里面替换geometry就可以了
class SceneObjectIcon extends THREE.Sprite {
constructor() {
super();
let textureLoader = new THREE.TextureLoader()
let path = '贴图的位置'
let map = textureLoader.load(path, () => {
this.#onImgLoad(type, pObject)
})
this.material = new THREE.SpriteMaterial({map})
}
#onImgLoad() {
//根据贴图尺寸更改精灵原始大小,替换THREE.Sprite默认几何体
let height = this.material.map.source.data.height
let width = this.material.map.source.data.width
//图片经常很大,实际项目里要修改尺寸
//……
//修改尺寸的代码
//……
//生成新的几何体
this.geometry = new THREE.PlaneBufferGeometry(width, height)
}
}