loadGltf("api/glb?name=camera.glb").then((gltf) => {
console.log(gltf);
const wrapMesh = gltf.scene.getObjectByName("外轮廓粒子") as Mesh;
let m = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
tx: { value: textureLoader.load(circle.src) },
//弥补自定义shader没有PointsMaterial材质的size属性
size: { value: 8 },
//弥补自定义shader没有PointsMaterial材质的sizeAttenuation属性
},
side: 2,
transparent: true,
// blending: THREE.AdditiveBlending,
vertexShader: `
#include <common>
varying vec2 vUv;
varying vec3 pos;
uniform float time;
uniform float size;
attribute float scale;
void main() {
pos = position;
vUv = uv;
vec4 viewPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * viewPosition;
//PointsMaterial材质的size属性和每个粒子随机的缩放 大小不一效果
gl_PointSize = size * scale;
//近大远小效果 值自己调节
gl_PointSize *= (80. / - (modelViewMatrix * vec4(position, 1.0)).z);
}
`,
fragmentShader: `
uniform float time;
uniform sampler2D tx;
varying vec2 vUv;
varying vec3 pos;
float rand(vec2 co){
return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
}
void main() {
// gl_FragColor = vec4(0,0,0,rand(vUv));
vec4 color = vec4(1,0,0,1);
// vec4 color = texture2D(tx, vUv);
//color.r = rand(vUv);
//color.a = rand(vUv);
gl_FragColor = color;
}
`,
});
const ps = new THREE.Points(wrapMesh.geometry, m);
/**
* 每个粒子的缩放 - 使每个粒子大小不一致
*/
const count = ps.geometry.attributes.position.array.length / 3;
const scale = new Float32Array(count);
for (let i = 0; i < count; i++) {
scale[i] = Math.random() / 2 + 0.2; // 0.2-0.7
}
//缩放参数是float类型不是vec3所以itemSize为1 并且需要position的三分之一的数量
//将scale传入自定义着色器 每个顶点着色器都会得到一个attribute float scale是当前像素对应的值 和position一样待遇 不过position是three自定添加的
ps.geometry.setAttribute("scale", new THREE.BufferAttribute(scale, 1));
window.render();
});
