Doubt in Gradient effect

Questions
, , , ,
1

i need gradient effect for my particles like in this image

cv-casestudy-04
cv-casestudy-041169×796 216 KB

what i have is this

Screenshot (111)
Screenshot (111)1920×1080 127 KB

const sphereGeometry = new THREE.SphereGeometry(0.008, 16, 16);
    const particles = new THREE.InstancedMesh(
      sphereGeometry,
      new THREE.MeshStandardMaterial(),
      10000
    );
    particles.instanceMatrix.setUsage(THREE.DynamicDrawUsage);

    const group = new THREE.Group();
    scene.add(group);

    let sampler;
    let model;
    loader.load('/earth.glb', (gltf) => {
      model = gltf.scene;
      gltf.scene.traverse((obj) => {
        if (obj.isMesh) {
          obj.scale.set(0.4, 0.4, 0.4)
          obj.material.color = 0xff0fff
          sampler = new MeshSurfaceSampler(obj).build();
          const matrix = new THREE.Matrix4();
          for (let i = 0; i < 30000; i++) {
            const sample = new THREE.Vector3();
            sampler.sample(sample);
            matrix.makeTranslation(sample.x, sample.y, sample.z);
            particles.setMatrixAt(i, matrix);
          }
          group.add(particles)
          group.scale.set(0.4,0.4,0.4)
        }
      });
    });
2

seeing as your using an instance mesh you can use instanceMesh.setColorAt it’s likely the gradient example you need above is using points material with a custom shader, what’s the link to that example?

1 Like