CODEWITHSUNDEEP
three.js
Nulik
Nulik

Reputation: 7380

Why does not the ambient light work in this example?

In the following example, the ambient light is not working (everything is black). Why is this happening? And how do I fix it? If I put spot light, it works, so it must be something wrong with the ambient light, but I followed the docs ... =:O

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);

material = new THREE.MeshStandardMaterial({
  color: 0x0c79bf,
  roughness: 0.71,
  metalness: 1,
  normalScale: new THREE.Vector2(1, -1), // why does the normal map require negation in this case?
  side: THREE.DoubleSide
});


var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

var alight = new THREE.AmbientLight(0x404040);
scene.add(alight);

camera.position.z = 5;

var animate = function() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();
body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

Upvotes: 3

Views: 2850

Answers (1)

WestLangley
WestLangley

Reputation: 104833

Ambient light in three.js is a simple model of indirect light which is reflected by the material diffusely.

In your example, you have set the material metalness property to 1; that is, you are modeling a pure metal. Pure metals do not reflect light diffusely -- they only reflect light specularly.

When using MeshStandardMaterial, you should always specify an environment map (material.envMap) so your metallic materials have something to reflect.

three.js r.89

Upvotes: 8

Related Questions