Three.js 精灵模型 Sprite
Three.js的精灵模型对象Sprite
和Threejs的网格模型Mesh
一样都是模型对象,基类都是Object3D
,关于精灵模型对象Sprite
的方法和属性除了可以查看文档object分类下的Sprite
API,也可以查看基类Object3D
。
创建精灵模型对象Sprite
和创建网格模型对象一样需要创建一个材质对象,不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry
,精灵模型对象本质上你可以理解为已经封装了一个平面矩形几何体PlaneGeometry
,只不过与PlaneGeometry
创建的网格模型区别在于精灵模型的矩形平面不会旋转,始终朝着屏幕的正面。如果你想理解精灵模型的本质可以阅读官方文件three.js-master精灵模型对象的封装源码\src\objects\Sprite.js
和解析精灵
Sprite
和 SpriteMaterial
通过Sprite
创建精灵模型不需要几何体,只需要给构造函数Sprite
的参数设置为一个SpriteMaterial
构造函数创建的一个精灵材质对象即可。
精灵材质对象SpriteMaterial
和普通的网格材质一样可以设置颜色.color
、颜色贴图.map
、开启透明.transparent
、透明度.opacity
等属性,精灵材质对象SpriteMaterial
的基类是材质对象Material
,更多属性和方法可以查看threejs文档中关于Material
的介绍。
精灵材质对象SpriteMaterial
的属性除了和网格材质类似的属性和方法外,还有一些自己独特的方法和属性,比如.rotation
旋转精灵模型,更多相关属性和方法可以查看threejs文档关于SpriteMaterial
的介绍。
var texture = new THREE.TextureLoader().load("sprite.png");
// 创建精灵材质对象SpriteMaterial
var spriteMaterial = new THREE.SpriteMaterial({
color:0xff00ff,//设置精灵矩形区域颜色
rotation:Math.PI/4,//旋转精灵对象45度,弧度值
map: texture,//设置精灵纹理贴图
});
// 创建精灵模型对象,不需要几何体geometry参数
var sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);
// 控制精灵大小,比如可视化中精灵大小表征数据大小
sprite.scale.set(10, 10, 1); //// 只需要设置x、y两个分量就可以
.scale
和 .position
精灵模型对象和网格模型Mesh
对一样基类都是Object3D
,自然精灵模型也有缩放属性.scale
和位置属性.position
,一般设置精灵模型的大小是通过.scale
属性实现,而精灵模型的位置通过属性.position
实现,精灵模型和普通模型一样,可以改变它在三维场景中的位置,区别在于精灵模型的正面一直平行于canvas画布。
在使用透视投影相机对象的时候,精灵模型对象显示的大小和网格模型一样受距离相机的距离影响,也就是距离越远,显示效果越小。
Sprite
用途
说到精灵模型对象,这种情况下你肯定关心它的用途,关于用途,你可以在三维场景中把精灵模型作为一个模型的标签,标签上可以显示一个写模型的信息,你可以通过足够多的精灵模型对象,构建一个粒子系统,来模拟一个下雨、森林、或下雪的场景效果。一些精灵模型的案例可以关注threejs模型课程中关于精灵的介绍。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论