type
status
date
slug
summary
tags
category
icon
password
Edited
Aug 3, 2023 08:18 AM
Created
Aug 2, 2023 01:55 AM
Sprite
Three.js的精灵模型Sprite和Threejs的网格模型Mesh一样都是模型对象，父类都是Object3D,关于精灵模型对象Sprite的方法和属性除了可以查看文档Sprite，也可以查看父类Object3D。
使用
- 精灵材质
SpriteMaterial
精灵材质对象
SpriteMaterial和普通的网格材质一样可以设置颜色.color、颜色贴图.map、开启透明.transparent、透明度.opacity等属性，精灵材质对象SpriteMaterial的父类是材质Material。- 精灵模型
Sprite
精灵模型Sprite默认是一个矩形形状，默认长宽都是1，默认在坐标原点位置。Sprite默认尺寸为1，如果你在画布上看不太清，可以适当调整相机参数。
由于
Sprite没有geometry，只能通过.scale的方式来设置精灵模型的大小对比Sprite和矩形平面Mesh
Sprite形状是矩形，PlaneGeometry创建的网格模型Mesh的形状也是矩形。Sprite与矩形平面Mesh的区别在于,当你旋转三维场景的时候，如果通过相机控件OrbitControls旋转测试，你可以发现Sprite矩形平面会始终平行于Canvas画布或者说屏幕，而矩形平面Mesh的姿态角度会跟着旋转，不一定平行于canvas画布。精灵贴图
精灵材质对象
SpriteMaterial和普通的网格材质一样具有颜色贴图.map、开启透明.transparent、透明度.opacity等属性。Demo
模拟下雨场景
如果你想模拟下雨效果，一个雨滴用一个3D水滴形曲面表示，假设一个水滴用40个三角形表示，1万个雨滴，就是40万个三角形，精灵模型Sprite在threejs内部就像相当于两个三角形构成的矩形，1万个精灵模型，相当于2万个三角形，Sprite模拟雨滴相比比3D曲面几何体表示雨滴顶点数量就会少很多，这样threejs渲染性能就更好。
EffectComposer
通过EffectComposer可以实现一些后期处理效果。
所谓threejs后期处理，就像ps一样，对threejs的渲染结果进行后期处理，比如添加发光效果。
查看threejs文件包目录
examples/jsm/postprocessing/OutlinePass.js：高亮发光描边
UnrealBloomPass.js：Bloom发光
GlitchPass.js：画面抖动效果
EffectComposer & RenderPass
在使用后期处理之前，需要引入后期处理库和渲染器通道
大家都知道three.js WebGL渲染器执行渲染方法.render()会得到一张图像，如果你需要对一个webgl渲染器的渲染结果进行后期处理，就把它作为EffectComposer的参数。
EffectComposer.render()
渲染循环中后处理EffectComposer执行
.render()，会调用webgl渲染器执行.render()，也就是说renderer.render(scene, camera)不用再执行。 OutlinePass
这边就介绍一个方式，其他的都是一样的方法使用
OutlinePass可以给指定的某个模型对象添加一个高亮发光描边效果。.selectedObjects
three.js场景中有多个模型的话，你希望给哪个模型对象设置发光描边效果，就可以通过OutlinePass的选择对象属性
.selectedObjects设置。属性
内容差不多到这里就介绍完了 🎉🎉🎉
参考链接
- 作者:JinSo
- 链接:https://jinso365.top/article/three-sprite%26effectcomposer
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。