Question

我正在尝试为程序添加一个级别.obj，但它呈现黑色。 .mtl文件要求在各处放置几张图像（没有一个空间没有纹理）。我在上一个项目中曾经使用过相同的对象，但它可以工作，但在当前项目中却没有。当我移除材质时，灯光会影响它，但是当我添加材质时，它会变成黑色。渲染器连续渲染。另外，控制台中没有错误。

这是我当前项目中使用的代码：（MaterialLoader是MTLLoader实例，ObjectLoader是OBJLoader实例）

MaterialLoader.load("bbb/bbb.mtl",
            function(materials) {
                materials.preload()
                    ObjectLoader.setMaterials(materials)
                ObjectLoader.load("bbb.obj",
                    function(model) {
                        let mesh = model.children[0]
                        scene.add(mesh)
                    }, null, function(error) {alert(error)}
                )
            }, null, function(error) {alert(error)}
        )

这是我上一个项目中的代码（loader变量是OBJLoader实例，材料在这里成功加载。）

mtlLoader.load(
            "bbb.mtl",
            function(materials) {
                materials.preload()
                loader.setMaterials(materials)
                loader.load("bbb.obj",
                    function(obj) {
                        level = obj.children[0]
                        scene.add(level)
                    }, null,
                    function(error) { alert(error) }
                )
            }, null,
            function(error) { alert(error) }
        )

Answer 1

您的代码在测试时有效！可能是材质导出，uv展开，纹理的路径，是否在场景中添加了照明等问题。这是我的测试代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,320/240,1,500);
camera.position.set( 0,2,2 );
camera.lookAt( scene.position );
var lightIntensity = 1;
var lightDistance = 10;
var light = new THREE.AmbientLight( 0xFFFFFF, lightIntensity, lightDistance );
light.position.set( 0, 5, 0 );
scene.add( light );
var grid = new THREE.GridHelper(10,10);
scene.add( grid );
var renderer = new THREE.WebGLRenderer({});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 320,240 );
renderer.domElement.style.margin = '0 auto';
renderer.domElement.style.display = 'block';
renderer.domElement.style.backgroundColor = '#dddddd';
$(document.body).append(renderer.domElement);
function update(){
  renderer.render( scene, camera );
  requestAnimationFrame( update );
}
update();
mtl_loader = new THREE.MTLLoader();
mtl_loader.load("assets/doughnut.mtl",
    function(materials) {
        materials.preload()
            var obj_loader = new THREE.OBJLoader();
            obj_loader.setMaterials(materials)
            obj_loader.load("assets/doughnut.obj",
            function(object) {
                let mesh = object.children[0]
                scene.add(mesh);
            }, null, function(error) {alert(error)}
        )
    }, null, function(error) {alert(error)}
);

Answer 2

https://discourse.threejs.org/t/objloader-mtlloader-not-loading-texture-image/2534 尝试更改对象材质颜色，如下所示：

model.children[0].material.color.r = 1;
model.children[0].material.color.g = 1;
model.children[0].material.color.b = 1;

它对我有用

three.js mtl加载程序呈现黑色

2 个答案: