114. 精灵模型标注场景(贴图)

前面课程5.5小节讲解过一个例子,就是通过矩形平面Mesh + 贴图标注三维场景。

不过有些时候,你也可以通过Sprite+贴图标注三维场景。

你可以对比案例源码中矩形平面MeshSprite标注三维场景差异。

大家根据需要选择Sprite或矩形Mesh标注场景,如果希望矩形始终平行于canvas画布,就选择Sprite,如果希望矩形标注姿态角度能跟着场景旋转,就使用矩形Mesh标注场景。

精灵模型设置颜色贴图.map

精灵材质对象SpriteMaterial和普通的网格材质一样具有颜色贴图.map、开启透明.transparent、透明度.opacity等属性。

javascript 复制代码
const texture = new THREE.TextureLoader().load("./光点.png");
const spriteMaterial = new THREE.SpriteMaterial({
  map: texture, //设置精灵纹理贴图
});

.transparent属性

网格材质.transparent属性默认是false,如果贴图是背景透明的png贴图,需要把.transparent设置为true,对于SpriteMaterial而言,.transparent默认是true。

javascript 复制代码
const spriteMaterial = new THREE.SpriteMaterial({
  transparent:true,//SpriteMaterial默认是true
});

.color.map混合

如果.map是纯白色贴图,你可以通过设置.color,把精灵模型设置为其他任意颜色。一般来说美术把颜色贴图设置为合适的颜色,你就不用再设置.color

javascript 复制代码
const spriteMaterial = new THREE.SpriteMaterial({
  color:0x00ffff,//设置颜色
  map: texture, //设置精灵纹理贴图
});

Sprite标注三维场景

需要在长方体网格模型的顶部中间添加一个Sprite标注。

javascript 复制代码
const geometry = new THREE.BoxGeometry(25, 100, 50);
geometry.translate(0, 50, 0);
// mesh顶部中心添加标注,顶部中心坐标是(0,100,0)
const mesh = new THREE.Mesh(geometry, material);

标注大小,根据场景渲染范围尺寸或者说要标注的物体的尺寸数量级,设置sprite的大小。不用具体,先设置一个大概值,只要和要标注的物体尺寸数量级相差不大即可,再根据需要缩放尺寸。

javascript 复制代码
sprite.scale.set(10, 10, 1);

根据标注位置,设置精灵模型在三维空间中的位置坐标,注意考虑模型对象的大小

javascript 复制代码
sprite.position.set(0, 100 + 10/2, 0);//设置位置,要考虑sprite尺寸影响
相关推荐
汉得数字平台6 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
向宇it8 分钟前
【unity组件介绍】URP Decal Projector贴花投影器,将特定材质(贴花)投影到场景中的其他对象上。
游戏·3d·unity·c#·游戏引擎·材质
花海如潮淹13 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
逐云者1237 小时前
3D Gaussian Splatting (3DGS) 从入门到精通:安装、训练与常见问题全解析
3d·问题·三维重建·高斯泼溅·编译运行
工业3D_大熊7 小时前
HOOPS SDK赋能PLM:打造全生命周期3D数据管理与协作能力
3d·3d web轻量化·3d模型格式转换·3d渲染·3d模型可视化·工业3d·3d模型渲染
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows