Javascript 显示白色模型的Three.js

我正在尝试使用three.js在网页中显示3D.obj模型。该模型是一个obj文件。我可以看到使用three.js脚本的模型，但是它有一个奇怪的while颜色

原始模型看起来像。（使用3D查看器上载obj文件）。但是我得到的输出是完全白色的

如果（！Detector.webgl）{
Detector.addGetWebGLMessage（）；
}
var容器；
摄像机、控件、场景、渲染器；
无功照明、环境照明、钥匙灯、填充灯、背光；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
/*摄像机*/
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，1900000000）；
摄像机位置z=4000；
/*场面*/
场景=新的三个。场景（）；
照明=假；
环境光=新的三个环境光（0xffffff）；
场景。添加（环境光）；
keyLight=新三点方向光（新三点颜色（'hsl（30,10,7%）），1.0）；
按键灯。位置。设置（-100，0，100）；
fillLight=新三点方向光（新三点颜色（'hsl（240,10%，7%）），0.75）；
fillLight.position.set（100,0100）；
背光=新的三方向光（0xffffff，1.0）；
backLight.position.set（100,0，-100）.normalize（）；
/*模型*/
var mtlLoader=new THREE.mtlLoader（）；
mtlLoader.setBaseUrl（'caster/'）；
mtlLoader.setPath（'caster/'）；
mtlLoader.load（'edger-QLgame.mtl'，功能（材料）{
材料。预加载（）；
//materials.materials.default.map.magFilter=THREE.NearestFilter；
//materials.materials.default.map.minFilter=THREE.LinearFilter；
var objLoader=new THREE.objLoader（）；
//objLoader.setMaterials（物料）；
mtlLoader.setBaseUrl（'caster/'）；
setPath（'caster/'）；
objLoader.load（'edger-QLgame.obj'，函数（对象）{
场景。添加（对象）；
});
});
/*渲染器*/
renderer=new THREE.WebGLRenderer（）；
//renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
setClearColor（新的三种颜色（“hsl（0,0%，10%）”））；
renderer.gammaOutput=true；
container.appendChild（renderer.domeElement）；
/*控制*/
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.enableDamping=true；
控制。阻尼系数=0.25；
controls.enableZoom=true；
/*事件*/
addEventListener（'resize'，onWindowResize，false）；
window.addEventListener（'keydown'，onKeyboardEvent，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数onKeyboardEvent（e）{
如果（e.code=='KeyL'）{
照明=！照明；
if（照明）{
环境强度=0.25；
场景。添加（关键灯光）；
场景。添加（fillLight）；
场景。添加（背光）；
}否则{
环境强度=1.0；
场景。移除（按键灯）；
场景。移除（fillLight）；
场景。移除（背光）；
}
}
}
函数animate（）{
请求动画帧（动画）；
控件更新（）；
render（）；
}
文件。添加的文件列表器（'mouseweel'，OnDocumentMouseweel，false）；
函数render（）{
渲染器。渲染（场景、摄影机）；
}
DocumentMouseWheel函数（事件）{
var fovMAX=160；
var fovMIN=1；
camera.fov-=event.wheelDeltaY*0.05；
camera.fov=Math.max（Math.min（camera.fov，fovMAX），fovMIN）；
camera.projectionMatrix=new THREE.Matrix4（）.makePerspective（camera.fov，window.innerWidth/window.innerHeight，camera.near，camera.far）；
}

---

必须将mtl文件中的材质指定给对象。但是你已经提到了这一部分（…setMaterials…），我评论了这一部分是为了测试。即使添加mtl文件，结果也是相似的。谢谢。试着调暗或关闭环境灯。与mtl文件中设置的白色材质或未设置mtl的白色默认材质结合使用时，将生成没有阴影的白色。其他灯光没有任何效果。如果我关闭环境光，模型会变得太暗。但是你看到阴影了吗？可以将环境光设置为

0x888888

。

  <script>
      if (!Detector.webgl) {
          Detector.addGetWebGLMessage();
      }

      var container;

      var camera, controls, scene, renderer;
      var lighting, ambient, keyLight, fillLight, backLight;

      init();
      animate();

      function init() {
          container = document.createElement('div');
          document.body.appendChild(container);

          /* Camera */
          camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 1, 90000000000);
          camera.position.z = 4000;

          /* Scene */
          scene = new THREE.Scene();
          lighting = false;

          ambient = new THREE.AmbientLight(0xffffff);
          scene.add(ambient);

          keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 10%, 7%)'), 1.0);
          keyLight.position.set(-100, 0, 100);

          fillLight = new THREE.DirectionalLight(new                THREE.Color('hsl(240, 10%, 7%)'), 0.75);

          fillLight.position.set(100, 0, 100);

          backLight = new THREE.DirectionalLight(0xffffff, 1.0);
          backLight.position.set(100, 0, -100).normalize();

          /* Model */
          var mtlLoader = new THREE.MTLLoader();
          mtlLoader.setBaseUrl('caster/');
          mtlLoader.setPath('caster/');
          mtlLoader.load('edger-QLgame.mtl', function (materials) {

          materials.preload();

          //materials.materials.default.map.magFilter = THREE.NearestFilter;
          //materials.materials.default.map.minFilter = THREE.LinearFilter;

          var objLoader = new THREE.OBJLoader();
          //objLoader.setMaterials(materials);
          mtlLoader.setBaseUrl('caster/');
          objLoader.setPath('caster/');
          objLoader.load('edger-QLgame.obj', function (object) {
              scene.add(object);
          });
      });

      /* Renderer */
      renderer = new THREE.WebGLRenderer();
      //renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(new THREE.Color("hsl(0, 0%, 10%)"));
      renderer.gammaOutput = true;

      container.appendChild(renderer.domElement);

      /* Controls */
      controls = new THREE.OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.dampingFactor = 0.25;
      controls.enableZoom = true;

     /* Events */
     window.addEventListener('resize', onWindowResize, false);
     window.addEventListener('keydown', onKeyboardEvent, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);   
}

function onKeyboardEvent(e) {  
    if (e.code === 'KeyL') {
        lighting = !lighting;

        if (lighting) {
            ambient.intensity = 0.25;
            scene.add(keyLight);
            scene.add(fillLight);
            scene.add(backLight);
        } else {
            ambient.intensity = 1.0;
            scene.remove(keyLight);
            scene.remove(fillLight);
            scene.remove(backLight);
        }
    }
}

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    render();
}
document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

function render() {
    renderer.render(scene, camera);
}

function onDocumentMouseWheel( event ) {
    var fovMAX = 160;
    var fovMIN = 1;

    camera.fov -= event.wheelDeltaY * 0.05;
    camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN );
    camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far);
}