当前位置：首页 > news >正文

three 点位图

news 2025/8/29 14:00:30

结果图

关键点

shader

  const vertexShader = `
precision mediump float;varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vUv;
varying vec3 vColor;uniform vec2 uResolution;
uniform sampler2D uTexture;
uniform sampler2D uDispanecmentTexture;attribute float aParticlesIntensity;
attribute float aAngle ;void main(){vec3 newPosition=position;/*Dispanecment*/// 读取canvas纹理中的红色通道作为R，影响粒子偏移float dispanecmentIntensity=texture2D(uDispanecmentTexture,uv).r;// 关键点：smoothstep// 这里0.1是为了过滤掉一些极小值，让图像再鼠标悬浮后能够复原。//同时设置一个0.7，让鼠标离开后能够保留粒子偏移后的轨迹一段时间dispanecmentIntensity =smoothstep( 0.1,0.7,dispanecmentIntensity);// 粒子的偏移向量，这里在xy平面进行随机旋转，在z轴上进行随机偏移vec3 displacement=vec3(cos(aAngle)*0.2,sin(aAngle)*0.2,1.0);displacement=normalize(displacement);displacement*=dispanecmentIntensity;displacement*=3.0;displacement*=aParticlesIntensity;newPosition+=displacement;float picIntensity= texture2D(uTexture,uv).r;vec4 modelPosition=modelMatrix*vec4(newPosition,1.);vec4 viewPosition=viewMatrix*modelPosition;vec4 projectedPosition=projectionMatrix*viewPosition;gl_Position=projectedPosition;// 计算法线变换矩阵：逆矩阵并转置mat3 normalMatrix=transpose(inverse(mat3(modelMatrix)));// 使用法线变换矩阵变换法线vec3 transformedNormal=normalize(normalMatrix*normal);vNormal=transformedNormal;vPosition=modelPosition.xyz;// 粒子动画的初始模版gl_PointSize=0.08*picIntensity*uResolution.y;gl_PointSize*=(1./-viewPosition.z);vColor=vec3(pow(picIntensity,2.0 ));
}
`const fragmentShader = `
precision mediump float;uniform vec2 uResolution;uniform vec3 uSunDirection;
uniform vec3 uAtmosphereDayColor;
uniform vec3 uAtmosphereNightColor;
uniform sampler2D uTexture;varying vec3 vNormal;
varying vec3 vPosition;
varying vec3 vColor;void main(){vec3 viewDirection=normalize(vPosition-cameraPosition);vec3 color=vec3(0.6392, 0.0392, 0.0392);vec2 uv=gl_PointCoord;float distanceToCenter=distance(uv,vec2(0.5,0.5) );if(distanceToCenter>0.5)discard;// color=vec3(alpha);gl_FragColor=vec4(vColor,1.0);#include <tonemapping_fragment>#include <colorspace_fragment>
}
`const texture = textureLoader.load(// "https://coderfmc.github.io/three.js-demo/picture-1.png""../textures/kandao3.jpg");//modelconst material = new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader,uniforms: {uResolution: {value: sizes.resolution,},uTime: {value: 0,},uTexture: new THREE.Uniform(texture),uDispanecmentTexture: new THREE.Uniform(dispanecment.texture),},});

texture2D(uTexture, uv).r 是用于从纹理中采样像素值并提取红色通道的代码，常用于获取纹理的灰度信息（当纹理是灰度图时）