Sprite在视野中保持大小不变

最新推荐文章于 2025-03-26 11:09:53 发布

pengpai123

最新推荐文章于 2025-03-26 11:09:53 发布

阅读量4.1k

点赞数 1

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/qq_30621091/article/details/84255484

版权

本文介绍了在Three.js的最新版本99中，如何利用SpriteMaterial的sizeAttenuation属性，确保Sprite在透视相机视图中保持大小不变。通过设置sizeAttenuation为true，可以避免Sprite因相机深度变化而缩放。关键代码位于sprite_vert.glsl着色器中，涉及两行核心逻辑。示例代码展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当前threejs版本为：99
threejs的SpriteMaterial新增属性sizeAttenuation，文档上的解释是Whether the size of the sprite is attenuated by the camera depth. (Perspective camera only.) Default is true.，呈现的效果就是，无论鼠标放大还是缩小，sprite在视野中的大小不变，shader中的核心代码如下（sprite_vert.glsl）：

uniform float rotation;
uniform vec2 center;

#include <common>
#include <uv_pars_vertex>
#include <fog_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>

void main() {

	#include <uv_vertex>

	vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 ); //获取camera的深度

	vec2 scale;
	scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
	scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );

	#ifndef USE_SIZEATTENUATION

		bool isPerspective = ( projectionMatrix[ 2 ][ 3