misterprada/morph-particles

Models -> Particles -> Morph + Animation + Smooth Scroll

How to install and run this template?
It's simple, just run the following commands:

npm i
npm run dev

ch.mp4

morph-particles's Issues

Adding new sections

Hello,

I am trying to add new sections in the index.html as well as add my own models.

1. I've added my own glb model in 'static/models',

2. added that model to sources.js,

export default [
    // blah blah blah
    {
        name: 'deskModel',
        type: 'gltfModel',
        path: 'models/my_desk.glb'
    }
]

3. and successfully imported the rendering in Page.js within setFBOParticles().

// add my own desk model
        this.deskGeometry = this.resources.items.deskModel.scene.children[0].children[0].geometry 
        this.deskGeometry.scale(2.2, 2.2, 2.2)
        this.deskGeometry.translate(-1, -2, 0.5)
        // this.deskGeometry.rotateY(-Math.PI / 2)
        this.deskGeometry.rotateZ(Math.PI / 9)

var uTextureF = this.makeTexture(this.deskGeometry);
        // console.log(uTextureB)
        // console.log(uTextureF)

        //simulation shader used to update the particles' positions
        this.simMaterial = new THREE.ShaderMaterial({
            uniforms:{
                uTextureA: { type: "t", value: uTextureA },
                uTextureB: { type: "t", value: uTextureB },
                uTextureC: { type: "t", value: uTextureC },
                uTextureD: { type: "t", value: uTextureD },
                uTextureE: { type: "t", value: uTextureE },
                uTextureF: { type: "t", value: uTextureF }, // my desk texture
                uTime: { value: 0 },
                uScroll : { value: this.normalizedScrollY },
                uTreePos : { value: new THREE.Vector3() },
            },
            defines:
            {
                uTotalModels : parseFloat(this.sectionCount).toFixed(2) ,
            },
            vertexShader: simVertex,
            fragmentShader:  simFragment
        });

4. Then I edited the shader file simulation.frag

void main() {

  float range = 1.0 / uTotalModels;
  vec3 pos;

  vec3 textureA = rotationMatrix3(vec3(1.0, 0.0, 0.0), sin(uTime) * 0.1) * texture2D( uTextureA, vUv ).xyz;

  vec3 textureB = rotationMatrix3(vec3(0.0, 1.0, 0.0), sin(uTime) * 0.3 + 3.14) * texture2D( uTextureB, vUv ).xyz;
  vec3 textureC = texture2D( uTextureC, vUv ).xyz;
  vec3 textureD = texture2D( uTextureD, vUv ).xyz;
  vec3 textureE = rotationMatrix3(vec3(0.0, 1.0, 0.0), uTime * 0.1) * texture2D( uTextureE, vUv ).xyz;
  vec3 textureF = rotationMatrix3(vec3(0.0, 1.0, 0.0), sin(uTime) * 0.3 + 3.14) * texture2D( uTextureF, vUv ).xyz; // THIS IS THE ADDITIONAL DESK TEXTURE



  if (uScroll < range) { // page 1
    float r = random(vUv) * 0.2;
    float t = remap(clamp(uScroll - (r * 0.5), 0.0, range - r), 0.0, range - r, 0.0, 1.0);
    pos = mix(textureA, textureF, t);
  } else if (uScroll < range * 2.0) { // page 2 THIS IS THE ADDITIONAL SECTION
    float r = random(vUv) * 0.2;
    float t = remap(clamp(uScroll - (r * 0.5), range, range * 2.0 - r), range, range * 2.0 - r, 0.0, 1.0);
    //pos = mix(textureF, textureB, (uScroll - range) * uTotalModels);
    pos = mix(textureF, textureB, t);
  } else if (uScroll < range * 3.0) { // page 3
    float r = random(vUv) * 0.2;
    float t = remap(clamp(uScroll - (r * 0.5), range, range * 2.0 - r), range, range * 2.0 - r, 0.0, 1.0);
    //pos = mix(textureB, textureC, (uScroll - range) * uTotalModels);
    pos = mix(textureB, textureC, t);
  } else if (uScroll < range * 4.0){ //page 4
    float r = random(vUv) * 0.2;
    float t = remap(clamp(uScroll, range * 2.0, range * 3.0 - r), range * 2.0, range * 3.0 - r, 0.0, 1.0);
    //float t = remap(clamp(uScroll - (r * 0.5), range * 2.0, range * 3.0 - r), range * 2.0, range * 3.0 - r, 0.0, 1.0);
    //pos = mix(textureC, textureD, (uScroll - range * 2.0) * uTotalModels);
    pos = mix(textureC, textureD, t);
  } 
  else { // last page
    float r = random(vUv) * 0.2;
    float t = remap(clamp(uScroll - (r * 0.5), range * 3.0, range * 4.0 - r), range * 3.0, range * 4.0 - r, 0.0, 1.0);
    textureE.y += uTreePos.y + 1.0;
    pos = mix(textureD, textureE, t);
  }

However, after adding my desk in the second section after the boymodel, my last section "Merry Christmas" isn't populating.

From index.html:

<section class="section">
                <h1>first section</h1>
            </section>

            <section class="section">
                <h4>second section (MY DESK MODEL)</h4>
            </section>

            <section class="section">
                <h2>3rd section</h2>
            </section>

            <section class="section">
                <h2>4th section</h2>
            </section>

            <section class="section">
                <h2>5th section</h2>
            </section>

            <section class="section">
                <h6>6th section (Christmas Tree)</h6>
            </section>

Please if you could add simple steps on how to add a section, it would be very helpful!

Thanks,