ThreeJS教程:精灵模型Sprite

ThreeJS教程:精灵模型Sprite
推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

精灵模型Sprite

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

第一次接触精灵模型Sprite的时候,可以类比以前讲解过的网格模型Mesh学习。

创建精灵模型材质SpriteMaterial

精灵材质对象SpriteMaterial和普通的网格材质一样可以设置颜色.color、颜色贴图.map、开启透明.transparent、透明度.opacity等属性,精灵材质对象SpriteMaterial的父类是材质Material

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

创建精灵模型Sprite

创建精灵模型对象Sprite和创建网格模型对象一样需要创建一个材质对象,不同的地方在于创建精灵模型对象不需要创建几何体对象Geometry

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

精灵模型Sprite默认是一个矩形形状,默认长宽都是1,默认在坐标原点位置。Sprite默认尺寸为1,如果你在画布上看不太清,可以适当调整相机参数。

对于透视投影相机而言,SpriteMesh一样遵循远小近大的投影规律。

正投影相机验证Sprite尺寸

Sprite默认尺寸是1,如果正投影相机对象的top, bottom范围分别为0.5,-0.5,上下方向渲染范围是1,精灵模型默认尺寸长宽都是1,这样刚好上下方向100%填充画布。

const s = 0.5;//控制left, right, top, bottom范围大小
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);

对比Sprite和矩形平面Mesh

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

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

Sprite属性.position.scale

精灵模型SpriteMesh一样具有位置.position和缩放.scale属性。

sprite.scale只需要设置x、y两个分量就可以,z方向默认值就行。

// 控制精灵大小
console.log('sprite.scale',sprite.scale);
sprite.scale.set(50, 25, 1); //只需要设置x、y两个分量就可以

sprite.position设置精灵模型在三维空间中的位置坐标

sprite.position.set(0,50,0);

对比尺寸相同Spirte和矩形平面Mesh

对于网格模型Mesh而言,可以通过几何体geometrymesh.scale定义尺寸,Spirte没有几何体,需要通过sprite.scale定义矩形精灵的长和宽。

打开案例源码“3.对比相同尺寸Sprite和矩形Mesh”,对比相同尺寸Spirte和矩形平面Mesh渲染效果,进一步掌握Sprite尺寸定义。

// 尺寸相同的Sprite和矩形平面Mesh
const sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(50, 25, 1);
const geometry = new THREE.PlaneGeometry(50, 25);
const mesh = new THREE.Mesh(geometry, material);

SpriteMaterial旋转属性.rotation

精灵材质SpriteMaterial的属性除了和网格材质类似的属性和方法外,还有一些自己独特的方法和属性,比如.rotation旋转精灵模型,更多相关属性和方法可以查看threejs文档关于SpriteMaterial的介绍。

const spriteMaterial = new THREE.SpriteMaterial({
  rotation:Math.PI/4,//旋转精灵对象45度,弧度值
});

上一篇:ThreeJS教程:辅助调节光源阴影 (mvrlink.com)

下一篇:ThreeJS教程:精灵模型标注场景(贴图) (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号