首页 > 解决方案 > 三JS,OBJ的颜色不显示

问题描述

我已经加载了 .obj 文件并将颜色设置为其细节,但它只显示为全黑

const loader = new OBJLoader();
loader.load( src, function ( obj ) {
  obj.traverse( function ( child ) {
    child.material.color.setHex(0xFF0000);
    console.log("child.material.color: ", child.material.color);
  }
}

scene.add(obj);

...

var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 300, 0 );
scene.add( hemiLight );

var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 75, 300, -75 );
scene.add( dirLight );

console.log 打印出对象 Color: {r: 1, g: 0, b: 0, isColor: true}

那么,有什么我错过的吗?

标签: three.js

解决方案


在我看来,它就像你拥有它的方式,你实际上并没有将它添加到场景中,因为 'obj' ref 仅在 (async) 回调中有效。

如果将 scene.add(obj) 移动到回调中,它应该可以工作。

我创建了一个代码笔: https ://codepen.io/flatworldstudio/pen/ExNpedV

寻找这一点:

 loader.load(src, function (obj) {
    console.log(obj);
    scene.add(obj);
    ref = obj;
    obj.traverse(function (child) {
      if (child.material) {
        child.material.color.setHex(0xff0000);
        console.log("child.material.color: ", child.material.color);
      }
    });
  });

推荐阅读