WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 Three.js免费视频教程

Three.js精灵模型Sprite

精灵模型视频讲解Three.js视频教程——精灵模型章节。

Three.js的精灵模型对象Sprite和Threejs的网格模型Mesh一样都是模型对象,基类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档object分类下的SpriteAPI,也可以查看基类Object3D

创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象,不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry,精灵模型对象本质上你可以理解为已经封装了一个平面矩形几何体PlaneGeometry,只不过与PlaneGeometry创建的网格模型区别在于精灵模型的矩形平面不会旋转,始终朝着屏幕的正面。如果你想理解精灵模型的本质可以阅读官方文件three.js-master精灵模型对象的封装源码\src\objects\Sprite.js和解析精灵

SpriteSpriteMaterial

通过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模型课程中关于精灵的介绍。

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com