three.js obj 和 mtl 文件用阴影呈现黑色

Posted 2023-02-19

【中文标题】three.js obj 和 mtl 文件用阴影呈现黑色

【英文标题】：three.js obj and mtl file renders black with shadows

【发布时间】：2017-01-26 09:42:08

【问题描述】：

我正在尝试使用 three.js 在浏览器中加载 3dsmax .obj 和 .mtl 文件。

我正在使用本教程和代码..

obj 模型已成功加载，但它看起来很暗，而不是应有的样子。

我应该怎么做才能使物体中没有黑点。

我应该如何从各个方向添加灯光？

这是脚本 -

<script>

    var lesson6 = 
     scene: null,
     camera: null,
      renderer: null,
     container: null,
    controls: null,
    clock: null,
   stats: null,

   init: function()  // Initialization

// create main scene
this.scene = new THREE.Scene();
this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);

var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight;

// prepare camera
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 2000;
this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
this.scene.add(this.camera);
this.camera.position.set(0, 100, 300);
this.camera.lookAt(new THREE.Vector3(0,0,0));

// prepare renderer
this.renderer = new THREE.WebGLRenderer( antialias:true );
this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
this.renderer.setClearColor(this.scene.fog.color);
this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;

// prepare container
this.container = document.createElement('div');
document.body.appendChild(this.container);
this.container.appendChild(this.renderer.domElement);

// events
THREEx.WindowResize(this.renderer, this.camera);

// prepare controls (OrbitControls)
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
this.controls.target = new THREE.Vector3(0, 0, 0);
this.controls.maxDistance = 2000;

// prepare clock
this.clock = new THREE.Clock();

// prepare stats
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.left = '50px';
this.stats.domElement.style.bottom = '50px';
this.stats.domElement.style.zIndex = 1;
this.container.appendChild( this.stats.domElement );

// add spot light
  var spLight = new THREE.SpotLight(0xffffff, 1.75, 2000, Math.PI / 3);

spLight.castShadow = true;

spLight.position.set(-200, 500, -150);

this.scene.add(spLight);



// add simple ground
var ground = new THREE.Mesh( new THREE.PlaneGeometry(200, 200, 10, 10), new      THREE.MeshLambertMaterial(color:0x999999) );
 ground.receiveShadow = true;
 ground.position.set(0, 0, 0);
  ground.rotation.x = -Math.PI / 2;
this.scene.add(ground);

   // load a model
   this.loadModel();
  ,
   loadModel: function() 
 // prepare loader and load the model
  var oLoader = new THREE.OBJMTLLoader();
  oLoader.load('1.obj', '1.mtl', function(object) 

 object.position.x = 80;
 object.position.y = 0;
 object.position.z = 30;
 object.scale.set(10,10,10);
  lesson6.scene.add(object);
  );
  
 ;

 // Animate the scene
 function animate() 
  requestAnimationFrame(animate);
 render();
 update();
 

// Update controls and stats
function update() 
 lesson6.controls.update(lesson6.clock.getDelta());
 lesson6.stats.update();
 

// Render the scene
 function render() 
if (lesson6.renderer) 
 lesson6.renderer.render(lesson6.scene, lesson6.camera);



// Initialize lesson on page load
function initializeLesson() 
 lesson6.init();
 animate();


 if (window.addEventListener)
window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
  window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;

</script>

Default obj and mtl file preview- [![enter image description here][2]][2]

【参考方案1】：

参考：three.js load obj/mtl renders black

OBJMTLLoader 自 r74 以来已被删除。您应该使用 MTLLoader 和 OBJLoader。

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('obj/');
mtlLoader.load('1.mtl', function(materials)
    materials.preload();
    //OBJ LOADER
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.setPath('obj/');
    objLoader.load('1.obj', function(object)
        objModel = object;
        scene.add(objModel);
    );
);

还可以尝试在场景中添加环境光以检查材质是否已正确加载。

var ambientLight = new THREE.AmbientLight('#fff');
scene.add(ambientLight);

【讨论】：

我添加了 OBJLoader 并添加了此代码，但它没有加载对象。我对此很陌生。我只想加载要在浏览器中看到的对象。是否有一些好的查看器可以添加我的 .obj 和 .mtl 并加载适当的照明？

TypeError: mtlLoader.setPath 不是函数

我猜你没有在文件中加载 MTLLoader.js。

` `是的，我添加了它。以及所有这些文件。

我使用了与上面相同的代码，它对我来说效果很好。检查路径是否正确，或者您是否收到任何 CORS 错误。