# What material do I need to use to implement this kind of sphere?

**URL:** <https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464>\
**Category:** Questions\
**Tags:** textures, materials, geometry\
**Created:** [July 23, 2024, 9:18am UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464 "2024-07-23T09:18:15Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![LeoKnight](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/leoknight/32/50008_2.png) [@LeoKnight](https://discourse.threejs.org/u/LeoKnight)\
**Post date:** [July 23, 2024, 9:18am UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464/1 "2024-07-23T09:18:15Z")

</div>

Hi, community, I need to implement a sphere composed of multiple small pieces of paper. I am a beginner and used point to implement the sphere. What kind of metrial should I use to achieve this effect in the picture?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b0e1d2385c9392f34d31795d3b210e999f7058cb.jpeg)

Here is the demo in codesandbox  
[codesandbox](https://codesandbox.io/p/sandbox/sphere-jkzkv9?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clyy6l94a00063b6nnugq4281%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clyy6l94a00023b6n2szo057b%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clyy6l94a00033b6nx0bsb64a%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clyy6l94a00053b6n4y1b87v8%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clyy6l94a00023b6n2szo057b%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyy6l94a00013b6ncorwjx3n%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clyy6l94a00023b6n2szo057b%2522%252C%2522activeTabId%2522%253A%2522clyy6l94a00013b6ncorwjx3n%2522%257D%252C%2522clyy6l94a00053b6n4y1b87v8%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clyy6l94a00043b6nh3369on7%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clyy6l94a00053b6n4y1b87v8%2522%252C%2522activeTabId%2522%253A%2522clyy6l94a00043b6nh3369on7%2522%257D%252C%2522clyy6l94a00033b6nx0bsb64a%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clyy6l94a00033b6nx0bsb64a%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

---

<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:** [July 23, 2024, 9:38am UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464/2 "2024-07-23T09:38:25Z")

</div>

Looks like a box turned into a sphere 🤔

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [July 23, 2024, 10:07am UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464/3 "2024-07-23T10:07:31Z")

</div>

[https://threejs.org/examples/?q=point#webgl\_interactive\_points](https://threejs.org/examples/?q=point#webgl_interactive_points)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [July 23, 2024, 11:43am UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464/4 "2024-07-23T11:43:13Z")

</div>

yes indeed, it looks like a cube that’s had it’s positions array normalized…

```javascript
const SphericalCube = () => {
  const cube = new BoxGeometry(6, 6, 6, 10, 10, 10);
  const noralizedVertices = [];
  for (var i = 0; i < cube.attributes.position.array.length; i++) {
    if (i % 3 === 0) {
      const nV = new Vector3(
        cube.attributes.position.array[i],
        cube.attributes.position.array[i + 1],
        cube.attributes.position.array[i + 2]
      );

      nV.normalize().multiplyScalar(3);
      noralizedVertices.push(nV);
    }
  }

  const geometry = new BufferGeometry();
  geometry.setFromPoints(noralizedVertices);

  return (
    <points geometry={geometry}>
      <pointsMaterial color={"#FDFDFD"} size={0.05} />
    </points>
  );
};

```

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/2/027bf7cc8dad2fd9e00737c845a31b48a4426375.png)

---

<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:** [July 23, 2024, 12:18pm UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464/5 "2024-07-23T12:18:07Z")

</div>

For me it looks more like instanced planes in the spherical formation, based on a box 🤔

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/2/22468a612fc0600108a02867096bcdddbb493364.png)

Demo: [https://codepen.io/prisoner849/full/poXbKGo](https://codepen.io/prisoner849/full/poXbKGo)

---

<div class="post-metadata">

**Author:** ![LeoKnight](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/leoknight/32/50008_2.png) [@LeoKnight](https://discourse.threejs.org/u/LeoKnight)\
**Post date:** [July 23, 2024, 1:40pm UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464/6 "2024-07-23T13:40:54Z")

</div>

Wow, your implementation is really amazing, very close to the requirements, the dark spots do not appear randomly in the sphere, but the sphere rotates like the moon, each particle is facing the center of the sphere at the same angle, the lower left corner will be dark because of the angle of the particles. Thank you very much!

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [July 23, 2024, 6:52pm UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464/7 "2024-07-23T18:52:47Z")

</div>

Purely in terms of form, it reminds me of this:

[MorphBoxSphere](https://hofk.de/main/discourse.threejs/2021/MorphBoxSphere/MorphBoxSphere.html)

from the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [July 23, 2024, 10:42pm UTC](https://discourse.threejs.org/t/what-material-do-i-need-to-use-to-implement-this-kind-of-sphere/68464/8 "2024-07-23T22:42:28Z")

</div>

```javascript
let box = new THREE.BoxGeometry(1,1,1,10,10,10);
let v = box.attributes.position.array;
let tmp = new THREE.Vector3()
for(let i=0;i<v.length;i+=3){
   tmp.set(v[i],v[i+1],v[i+2]);
   tmp.normalize();
   v[i]=tmp.x;
   v[i+1]=tmp.y;
   v[i+2]=tmp.z;
}
let m = new THREE.Mesh(box, new THREE.MeshStandardMaterial());
scene.add(m)

```