three+kokomi+marcher实现webgl时光穿梭动画效果代码-html代码-BFW代码库

three+kokomi+marcher实现webgl时光穿梭动画效果代码

代码语言：html

所属分类：动画

代码描述：three+kokomi+marcher实现webgl时光穿梭动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua-1.5.5.css">
  
<style>
body {
  margin: 0;
  overflow: hidden;
}
</style>



</head>

<bod >
  <div id="sketch" class="relative w-screen h-screen bg-black"></div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.139.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/kokomi.umd.1.9.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marcher.umd.1.2.5.js"></script>
      <script  >
"use strict";
const vertexShader = `
#define GLSLIFY 1
highp float random(vec2 co)
{
    highp float a=12.9898;
    highp float b=78.233;
    highp float c=43758.5453;
    highp float dt=dot(co.xy,vec2(a,b));
    highp float sn=mod(dt,3.14);
    return fract(sin(sn)*c);
}

uniform float iTime;

attribute vec2 aSeed;
attribute float aSize;

varying float vRandColor;

void main(){
    vec3 p=position;
    
    float t=iTime*1000.;
    float v=.01;
    float s=v*t;
    // p.z=p.z+s;
    p.z=mod(p.z+s,2000.);
    
    vec4 mvPosition=modelViewMatrix*vec4(p,1.);
    gl_Position=projectionMatrix*mvPosition;
    
    float pSize=aSize*(200./-mvPosition.z);
    gl_PointSize=pSize;
    
    float randColor=random(aSeed);
    vRandColor=randColor;
}
`;
const fragmentShader = `
#define GLSLIFY 1
float circle(vec2 st,float r){
    vec2 dist=st-vec2(.5);
    return 1.-smoothstep(r-(r*1.15),r,dot(dist,dist)*4.);
}

uniform vec3 iColor1;
uniform vec3 iColor2;

varying float vRandColor;

void main(){
    vec2 p=gl_PointCoord-.5+.5;
    
    vec3 color=iColor1;
    if(vRandColor>0.&&vRandColor<.5){
        color=iColor2;
    }
    
    float shape=circle(p,1.);
    
    vec3 col=color*shape;
    
    gl_FragColor=vec4(col,1.);
}

`;
class Particles extends kokomi.Component {
    constructor(base, config = {}) {
        super(base);
        const { count = 10000, pointColor1 = "#ff6030", pointColor2 = "#1b3984", pointSize = 3 } = config;
        this.count = count;
        this.pointColor1 = pointColor1;
        this.pointColor2 = pointColor2;
        this.pointSize = pointSize;
        this.geometry = null;
        this.material = null;
        this.points = null;
        this.create();
    }
    create() {
        const { base, count } = this;
        const { scene } = base;
        this.dispose();
        const geometry = new THREE.BufferGeometry();
        this.geometry = geometry;
        const positions = kokomi.makeBuffer(count, () => THREE.MathUtils.randFloat(-0.5, 0.5) * 50);
        geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
        const seeds = kokomi.makeBuffer(count, () => THREE.MathUtils.randFloat(0, 1), 2);
        geometry.setAttribute("aSeed", new THREE.BufferAttribute(seeds, 2));
        const sizes = kokomi.makeBuffer(count, () => this.pointSize + THREE.MathUtils.randFloat(0, 1), 1);
        geometry.setAttribute("aSize", new THREE.BufferAttribute(sizes, 1));
        const material = new THREE.ShaderMaterial({
            vertexShader,
       .........完整代码请登录后点击上方下载按钮下载查看