12.精灵模型Sprite

精灵模型Sprite

Three.js的精灵模型Sprite和Threejs的网格模型Mesh一样都是模型对象,父类都是Object3D。

精灵模型不同于其他模型,不需要几何体作为参数对象,只需要精灵材质作为参数对象。

创建精灵材质

// 创建精灵材质对象SpriteMaterial
const spriteMaterial = new THREE.SpriteMaterial({
  color:0x00ffff,//设置颜色
});

创建精灵模型

// 创建精灵模型对象,不需要几何体geometry参数
const sprite = new THREE.Sprite(spriteMaterial);

精灵模型Sprite与Mesh模型的区别 

Sprite形状是矩形,PlaneGeometry创建的网格模型Mesh的形状也是矩形。

Sprite与矩形平面Mesh的区别在于,当你旋转三维场景的时候,如果通过相机控件OrbitControls旋转测试,你可以发现Sprite矩形平面会始终平行于Canvas画布或者说屏幕,而矩形平面Mesh的姿态角度会跟着旋转,不一定平行于canvas画布。

猜你喜欢

转载自blog.csdn.net/weixin_60645637/article/details/131504852