Currently, I am working on creating an earth scene using Three.js and everything seems to be going well except for the large and distracting reflection disc that appears on the surface of the earth object. Does anyone have any suggestions on how to either remove this reflection entirely or at least reduce it significantly?
Lighting Setup:
//Setting up the renderer
renderer = new THREE.WebGLRenderer( { canvas : spaceCanvas} );
renderer.setSize( 672, 472 );
renderer.shadowMap.enabled = true;
renderer.shadowMap.renderReverseSided = false;
//Creating the main scene
mainScene = new THREE.Scene();
mainCamera = new THREE.PerspectiveCamera( 45, window.innerWidth /window.innerHeight, 0.01, 2000 );
mainCamera.position.z = 2.25;
//Adding lighting to the scene
var ambLight = new THREE.AmbientLight( 0x222222 );
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set(5,3,5);
light.castShadow = true;
light.shadow.camera.near = 0.01;
// Setting up shadow camera properties
/* Additional light properties... */
mainScene.add(light, ambLight);
Earth Object Setup:
function CreateEarth(){
earth = new THREE.Object3D();
THREE.crossOrigin = "";
var loader = new THREE.TextureLoader();
// Loading textures for earth object
/* Additional texture loading code... */
var earthGeometry = new THREE.SphereGeometry( 0.5, 32, 32 );
var earthMaterial = new THREE.MeshPhongMaterial({
// Applying textures to the earth object
/* Texture mapping properties... */
});
earthMesh = new THREE.Mesh(earthGeometry, earthMaterial );
earth.add(earthMesh);
function CreateEarthAtmosphere(){
var loader = new THREE.TextureLoader();
// Loading cloud texture
/* Additional cloud texture loading code... */
var atmosphereGeometry = new THREE.SphereGeometry(0.51, 32, 32);
var atmosphereMaterial = new THREE.MeshPhongMaterial({
// Applying cloud texture to create atmosphere around earth
/* Cloud texture mapping properties... */
});
atmosphereMesh = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
earthMesh.add(atmosphereMesh)
}