THREE DirectionalLight falling off with distance - three.js

Question

According to the docs for THREE.DirectionalLight:
This light will behave as though it is infinitely far away and the rays produced from it are all parallel.
But, I'm finding that as a move an object with THREE.MeshStandardMaterial farther away from the light (but kept at the same relative angle), the intensity of the light decreases. This doesn't seem right to me.
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
var dpr = window.devicePixelRatio;
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
renderer.setPixelRatio(dpr);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 700;
var planeGeom = new THREE.PlaneGeometry(200, 200);
var plane = new THREE.Mesh(planeGeom, new THREE.MeshStandardMaterial({color: 0xff00ff, metalness: 1}));
plane.position.z = -10;
scene.add(plane);
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-50, 50, 100);
scene.add(light);
var helper = new THREE.DirectionalLightHelper(light, 10);
scene.add(helper);
function update(time) {
plane.position.x = 200 * Math.sin(time);
plane.position.y = 200 * Math.cos(time/2);
}
function render() {
requestAnimationFrame(render);
update(performance.now() / 1000);
renderer.render(scene, camera);
}
render();
body {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
I expect the plane to be lit the same no matter what position it's in. What am I doing wrong?

Answer 1

You are using MeshStandardMaterial and have set metalness to 1.
Metals reflect primarily specularly; the diffuse component of the reflection is minimal.
So what you are seeing is the "hot spot" of the reflection. Set the metalness to zero, for example, and you will see primarily a diffuse reflection.
Also, when using MeshStandardMaterial, you should include an environment map (material.envMap) so there is something to reflect. Materials -- especially metals -- will look much better that way.
three.js r.87