模型标签——精灵模型对象Sprite

关注

最新推荐文章于 2025-01-04 22:26:26 发布 · 369 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

· GEO检测

threejs 入门介绍（一）最近工作中因为要画地块（不规则的图形），必须了解svg的相关知识，又因为svg与canvas有一些相关性，因此又学习了canvas相关的知识点，由于工作需要，需要了解3D相关的东西，想自己先入门，至少思维概念要跟得上，所以跟着郭隆邦老师的博客自学一点东西，写相关笔记，方便自己以后复习。阅读详情

郭隆邦老师threejs教程学习笔记

mesh网格模型表示一个红豆的存储仓库，然后通过Sprite创建一个矩形网格模型，把一张红豆图片作为精灵模型对象Sprite的颜色贴图.map。

const textureLoader = new THREE.TextureLoader();
const spriteMaterial = new THREE.SpriteMaterial({
  // color:0xff00ff,//设置精灵矩形区域颜色
  map: textureLoader.load('./标签图片/红豆.png'),//设置精灵纹理贴图
});
// 创建精灵模型对象
const sprite = new THREE.Sprite(spriteMaterial);
// 控制精灵大小
sprite.scale.set(40, 40, 1); //// 只需要设置x、y两个分量就可以
sprite.position.copy(mesh.position)
sprite.position.y += 80
scene.add(sprite)

动态更新模型标签

比如存储红豆的仓库存储了绿豆，这时候需要把精灵模型Sprite的红豆贴图更换为绿豆贴图。

// 动态更新精灵模型`Sprite`颜色贴图
spriteMaterial.map = textureLoader.load('./标签图片/绿豆.png')

位置

精灵模型和矩形平面网格模型一样可以通过位置属性.position设置模型标签的位置。

姿态(精灵与平面网格模型对比)

精灵模型的平移和缩放与网格模型是一样的，区别在于：精灵模型的平面渲染效果一直平行于屏幕或者说canvas画布，对于平面网格模型而言，旋转场景或相机的时候平面网格模型平面渲染效果不一定平行于canvas画布。

收录于

THREE

标签

#javascript #前端 #笔记

模型标签——精灵模型对象Sprite

动态更新模型标签

位置

姿态(精灵与平面网格模型对比)

相关推荐