Point face of plane at circle

Questions
1

Hi everyone, new to Three here so bear with me. I have a Sphere and then a bunch of planes that I’ve generated on various points throughout the sphere:

image
image1416×1136 9.93 KB

I’d like to get the face of each of the planes to point at the sphere. My googling has lead me to needing to do something with quaternions, but I’m not sure what the right approach with (and also am very inexperienced with the math needed here)

Would appreciate any help! I’ve uploaded my code to JSFiddle: Edit fiddle - JSFiddle - Code Playground

2

Hi!
As a quick fix, try this:

  let pt = randomSpherePoint(2);
  plane.position.setFromSpherical(pt);
  plane.lookAt(plane.position.clone().setLength(3)); // add this line
3

That worked! Thank you so much :slight_smile:

Do you happen to know how to get this working within React Three Fiber? Tried the following, and position works but the pointing at does not. No worries if not — I understand they’re a separate project:

{ Array.from(Array(100).keys()).map((i) => {
              let point = randomSpherePoint(2)
              let vector = new THREE.Vector3().setFromSpherical(point)
              let lookAt = vector.clone().setLength(3)

              return (
                <mesh position={vector} lookAt={lookAt} onClick={(e) => console.log(e)} key={i}>
                  <planeGeometry args={[0.1, 0.1]}/>
                  <meshStandardMaterial color={'green'} />
                </mesh>
              )
            })}
4

Unfortunately, no. But I’m sure there are specialists on the forum, who know how :slight_smile: