Sphere parts (angle per instance)

Resources
,
1

Hi community!

Picture:

изображение
изображение1920×1080 239 KB

Demo:

Code:

const MAX_COUNT = 10000;
let g = new THREE.SphereGeometry(1, 20, 10, 0, Math.PI * 2, Math.PI * 0.25, Math.PI * 0.5);
let m = new THREE.MeshLambertMaterial({
  side: THREE.DoubleSide,
  onBeforeCompile: shader => {
    shader.vertexShader = `
      attribute float instPhi;
      
      
      vec3 setFromSphericalCoords( float radius, float phi, float theta ) {

        float sinPhiRadius = sin( phi ) * radius;

        float x = sinPhiRadius * sin( theta );
        float y = cos( phi ) * radius;
        float z = sinPhiRadius * cos( theta );

        return vec3(x, y, z);

      }
      
      ${shader.vertexShader}
    `.replace(
      `#include <beginnormal_vertex>`,
      `#include <beginnormal_vertex>
        
        vec3 sphPos = setFromSphericalCoords(1., instPhi * (1. - uv.y), PI * 2. * uv.x);
        objectNormal = normalize(sphPos);
        
     `).replace(
      `#include <begin_vertex>`,
       `#include <begin_vertex>
        transformed = sphPos;
       `
     );
    //console.log(shader.vertexShader);
  }
});
let im = new THREE.InstancedMesh(g, m, MAX_COUNT);
scene.add(im);

let v3 = new THREE.Vector3();
let c = new THREE.Color();
let instPhi = [];
let objMats = new Array(MAX_COUNT).fill().map((o, omIdx) => {
  let om = new THREE.Object3D();
  om.position.random().subScalar(0.5).multiplyScalar(100);
  om.rotation.setFromVector3(v3.random().multiplyScalar(Math.PI));
  om.userData = {
    rotStart: om.rotation.clone(),
    rotSpeed: new THREE.Euler().setFromVector3(v3.random().multiplyScalar(Math.PI * 0.25))
  }
  om.updateMatrix();
  im.setMatrixAt(omIdx, om.matrix);
  im.setColorAt(omIdx, c.set(Math.random() * 0xffffff))
  instPhi.push(Math.random() * Math.PI * 0.4 + 0.1);
  return om;
});
g.setAttribute("instPhi", new THREE.InstancedBufferAttribute(new Float32Array(instPhi), 1));

PS As usual, it’s all started on SO

4 Likes