# Sphere parts (angle per instance)

**URL:** <https://discourse.threejs.org/t/sphere-parts-angle-per-instance/37465>\
**Category:** Resources\
**Tags:** spheregeometry, instanced-mesh\
**Created:** [April 25, 2022, 4:58pm UTC](https://discourse.threejs.org/t/sphere-parts-angle-per-instance/37465 "2022-04-25T16:58:13Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 25, 2022, 4:58pm UTC](https://discourse.threejs.org/t/sphere-parts-angle-per-instance/37465/1 "2022-04-25T16:58:13Z")

</div>

Hi community!

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/b/aba631ec697041700f62e5b3bc23c14085f16f66.jpeg)

**Demo:**  
https://codepen.io/prisoner849/embed/preview/bGayOoj?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=bGayOoj

Code:

```nohighlight
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](https://stackoverflow.com/a/72002944/4045502)