# Working with Sphere

**URL:** <https://discourse.threejs.org/t/working-with-sphere/76305>\
**Category:** Questions\
**Tags:** spheregeometry, matrix, geometry\
**Created:** [January 10, 2025, 12:42pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305 "2025-01-10T12:42:12Z")\
**Posts on this page:** 10\
**Page:** 2

<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:** [January 12, 2025, 1:11pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/21 "2025-01-12T13:11:52Z")

</div>

> [@dubois](#):
>
> Also how can you possibly find a single closest point, it’s either going to be the whole sphere (if you’re in the center) or a circle (a cone intersecting the sphere). In both cases it’s infinitely many

🤔 With the method I shared above it should always find the closest relative point, that being said, that’s not to account for an exact center or precisely half way between points, demo… (EDIT: increased the sphere geo to 30 x 30 in the demo, still works as expected…)

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

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [January 12, 2025, 2:55pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/22 "2025-01-12T14:55:04Z")

</div>

There is no closest point, in both cases I described you will get infinitely many points. However if the reference point is outside the sphere then yeah you will get one point.

Edit,

Maybe I’m wrong I need to sketch this out

Edit2

Yeah I was wrong lol, there will be one closest point inside too. Only when you’re in the center it’s infinite

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 12, 2025, 3:49pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/23 "2025-01-12T15:49:20Z")

</div>

@dubois so after you’re edit do you know how I could get the closest point?

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 12, 2025, 4:06pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/24 "2025-01-12T16:06:59Z")

</div>

@dubois @Lawrence3DPK @manthrax I was wondering if I could get the intersection point using raycaster?

---

<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:** [January 12, 2025, 4:18pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/25 "2025-01-12T16:18:51Z")

</div>

Yes this is also an option, the direction of the ray would be…

```javascript
dir = new THREE.Vector3(0,0,0).copy(speaker.position).sub(sphere.position).normalize()

raycaster.set(sphere.position, dir) 

speaker.position.copy(intersects.point)

```

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 12, 2025, 5:13pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/26 "2025-01-12T17:13:28Z")

</div>

@Lawrence3DPK  
I’ve tried the following

```javascript
  constructor ( speakerTriplets:Speaker[][], sphere:THREE.Mesh ) {

    this.triplets = speakerTriplets.map( triplet => {

      return ( triplet.map( speaker => {

        const raycaster = new THREE.Raycaster();

        const dir = new THREE.Vector3( 0, 0, 0 ).copy( speaker.object.position ).sub( sphere.position ).normalize();

        raycaster.set( sphere.position, dir );

        speaker.object.position.copy( raycaster.intersectObject( sphere )[0].point )

        return [speaker.object.position.x, speaker.object.position.y, speaker.object.position.z]

      } ))

    })

  }

```

but I get

> TypeError: Cannot read properties of undefined (reading ‘point’)

any idea?

---

<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:** [January 12, 2025, 5:25pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/27 "2025-01-12T17:25:47Z")

</div>

Try this…

```javascript
constructor ( speakerTriplets:Speaker[][], sphere:THREE.Mesh ) {

    const raycaster = new THREE.Raycaster();
    const dir = new THREE.Vector3( 0, 0, 0 )
    let intersects:
    this.triplets = speakerTriplets.map( triplet => {

      return ( triplet.map( speaker => {

        dir.copy( speaker.object.position ).sub( sphere.position ).normalize();

        raycaster.set( sphere.position, dir );
        intersects = raycaster.intersectObject(sphere)
        speaker.object.position.copy( intersects[0].point )

        return [speaker.object.position.x, speaker.object.position.y, speaker.object.position.z]

      } ))

    })

  }

```

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 12, 2025, 5:30pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/28 "2025-01-12T17:30:55Z")

</div>

I had to correct your code to

> constructor ( speakerTriplets:Speaker, sphere:THREE.Mesh ) {
> 
> ```
> this.triplets = speakerTriplets.map( triplet => {
> 
> return ( triplet.map( speaker => {
> 
> const raycaster = new THREE.Raycaster();
> 
> const dir = new THREE.Vector3( 0, 0, 0 ).copy( speaker.object.position ).sub( sphere.position ).normalize();
> 
> raycaster.set( sphere.position, dir );
> let intersects = raycaster.intersectObject(sphere)
> speaker.object.position.copy( intersects[0].point )
> 
> return [speaker.object.position.x, speaker.object.position.y, speaker.object.position.z]
> 
> } ))
> 
> })
> 
> ```
> 
> }

but I get the same error. Any ideas? Thanks in advance

---

<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:** [January 12, 2025, 5:38pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/29 "2025-01-12T17:38:48Z")

</div>

Good catch updated the code above… Ah right, because you’re shooting a ray from inside to out I think you may have to set your sphere material to `THREE.Backside` or `THREE.DoubleSide`for the ray to detect the surface.

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 12, 2025, 5:42pm UTC](https://discourse.threejs.org/t/working-with-sphere/76305/30 "2025-01-12T17:42:17Z")

</div>

@Lawrence3DPK @dubois @manthrax Thanks a lot for all of your time it finally worked

[Previous page](https://discourse.threejs.org/t/working-with-sphere/76305.md?page=1)