Three.js MeshLambertMaterial の color指定が効かない

Question

追記: バージョンは91です。

https://jsfiddle.net/7mmk9zfj/

↑デモです。

MeshBasicMaterial では問題ありません。
MeshLambertMaterial ではなにか他にオプションを渡す必要があるのでしょうか。

var width = window.innerWidth;
  var height = window.innerHeight;

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);
  renderer.setClearColor(0xbb6666);

  var axes = new THREE.AxesHelper(30);
  scene.add(axes);

  var geometry = new THREE.SphereGeometry(10, 10, 10);
  var material = new THREE.MeshLambertMaterial({
    wireframe: true,
    // color: new THREE.Color(0xff0000)
    color: 0xff0000
  });
  var sphere = new THREE.Mesh(geometry, material);

  scene.add(sphere);
  camera.position.y = 10;
  camera.position.z = 100;

  renderer.render(scene, camera);

  document.querySelector('#WebGL-output').appendChild(renderer.domElement);

Answer 1

おそらく光源が存在しないからです。

var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

こんな感じでDirectionalLightを追加するといいと思います。

Comments

[machine_machine]

ありがとうございます！
色が表示されました。

光源についてはわからないことが多いので勉強します。
（試しにご回答の `DirectionalLight ` を `SpotLight` にしてみると色がなくなるんですね。このあたりの違いも確認します）