Having trouble getting fog to render in my scene - any suggestions?
I've scoured the internet for solutions, but can't seem to find any that work. Check out this screenshot to see the issue:
https://i.sstatic.net/ThJRh.png
Here is the code snippet I'm using: https://jsfiddle.net/7orbmn4t/
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xcce0ff);
scene.fog = new THREE.Fog(0xff0000, 10, 500);
var camera = new THREE.PerspectiveCamera(
90,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.rotation.x = 0.7853;
camera.position.set(0, 0, 15);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
scene.add( new THREE.AmbientLight( 0xffffff ) );
var geometry = new THREE.PlaneBufferGeometry(100, 100, 0);
var material = new THREE.MeshLambertMaterial({
color: 0x898989,
fog: true
});
var plane = new THREE.Mesh(geometry, material);
scene.add(plane);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);