Slider-particle-z
デモ
ソースコード
import { PlaneGeometry, Vector3, Float32BufferAttribute } from "three";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragment.glsl";
import { utils } from "negl";
import { ParticleSlider } from "#/parts/helper/slider/ParticleSlider";
export default class extends ParticleSlider {
setupGeometry() {
const width = this.rect.width,
height = this.rect.height,
wSeg = Math.floor(width / this.pointInterval),
hSeg = Math.floor(height / this.pointInterval);
const plane = new PlaneGeometry(width, height, wSeg, hSeg);
// 対角線上に詰められた遅延時間用の頂点データ
// Vertex data for latency packed along the diagonal.
const intensityVertices = utils.getDiagonalVertices(
hSeg,
wSeg,
() => random(0, 1500),
0
);
function random(a, b) {
return a + (b - a) * Math.random();
}
plane.setAttribute(
"aIntensity",
new Float32BufferAttribute(intensityVertices, 1)
);
return plane;
}
setupUniforms() {
const uniforms = super.setupUniforms();
uniforms.uPointSize = { value: 5 };
uniforms.uSpeed = { value: 0.05 };
uniforms.uCnoise = { value: new Vector3(0.005, 0, 0.01) };
uniforms.uExpand = { value: new Vector3(1, 1, 1) };
return uniforms;
}
setupVertex() {
return vertexShader;
}
setupFragment() {
return fragmentShader;
}
debug(folder) {
super.debug(folder);
folder
.add(this.uniforms.uSpeed, "value", 0, 0.1, 0.001)
.name("uSpeed")
.listen();
folder
.add(this.uniforms.uPointSize, "value", 2, 10, 0.1)
.name("uPointSize")
.listen();
folder
.add(this.uniforms.uCnoise.value, "x", 0, 0.01, 0.001)
.name("cnoise.x")
.listen();
folder
.add(this.uniforms.uCnoise.value, "y", 0, 0.01, 0.001)
.name("cnoise.y")
.listen();
folder
.add(this.uniforms.uCnoise.value, "z", 0, 0.01, 0.001)
.name("cnoise.z")
.listen();
folder
.add(this.uniforms.uExpand.value, "x", 0, 10, 0.1)
.name("expand.x")
.listen();
folder
.add(this.uniforms.uExpand.value, "y", 0, 10, 0.1)
.name("expand.y")
.listen();
folder
.add(this.uniforms.uExpand.value, "z", 0, 10, 0.1)
.name("expand.z")
.listen();
}
}
利用方法
⚠️
ダウンロードしたコードをプロジェクトに配置し、以下のコードを記述してください。
index.html
<div class="slider-particle">
<img
class="slider"
data-webgl="slider-particle-z"
data-tex-1="/sample1.jpg"
data-tex-2="/sample2.jpg"
data-tex-3="/sample3.jpg"
data-tex-4="/sample4.jpg"
data-tex-5="/sample5.jpg"
/>
</div>
使用画像・動画
- こちらを参考にダウンロードした各ファイルを配置してください。