I am facing an issue with ThreeJS. I have a scene set up like this:
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);
var aspectRatio = GLOBAL.WIDTH / GLOBAL.HEIGHT;
var camera = new THREE.PerspectiveCamera(
45,
aspectRatio,
0.1,
1000
);
camera.position.z = 50;
scene.add(camera);
var renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.setClearColor(0xffffff, 0);
renderer.setSize(GLOBAL.WIDTH, GLOBAL.HEIGHT);
renderer.shadowMap.enabled = true;
var container = $('.threejs-container');
container.append(renderer.domElement);
window.scene = scene;
Despite not having any lights in the scene, my objects are still visible. However, objects that are far from the camera appear yellow before displaying their actual color. For instance, an object with a z position at 900 shows up as yellow, while an object with a z position of 100 appears normal.
You can see an example of this issue with circles here: https://i.sstatic.net/c9KOl.jpg
Could someone provide me with some guidance on how to address this issue?
Thank you 🙂