three.js obj和mtl文件呈現黑色陰影

Question

我想在瀏覽器中使用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] 

Answer 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);