CODEWITHSUNDEEP
three.js
Khaldoun Al Halabi
Khaldoun Al Halabi

Reputation: 153

why is there Black circles in my geometry in three.js?

js and I am trying to create an earth with sphere geometry every things fine when I use this :

const geometry = new THREE.SphereGeometry( 500, 64, 32 );

but when I try to make it bigger like this :

const geometry = new THREE.SphereGeometry( 10000, 64, 32 );

it get a black circles in it like this : enter image description here

this is my earth geometry code :

const geometry = new THREE.SphereGeometry( 10000, 64, 32 );
  const material = new THREE.MeshBasicMaterial({color: 'rgb(135,206,235)' , side: THREE.DoubleSide})  ;
  const sphere = new THREE.Mesh( geometry, material );
  scene.add( sphere );

this is my camera code (I think the wrong is in it) :

var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);

Upvotes: 1

Views: 154

Answers (1)

M -
M -

Reputation: 28462

You'll need to set your camera.far property to a higher value. Right now it's set to 1,000 but with spheres that are 10,000 in radius, there are going to be parts of the circle that get clipped beyond the camera's maximum range. Those are the black areas you're seeing.

See here for docs on the Camera.far property

Upvotes: 3

Related Questions