1、glb,gltf模型导入场景中是黑的

出现原因分析

首先确定是否是gltf格式出现原因:

使用glft viewer 确定gltf 能否展示

查看exposure是否为大于0的数,在webGLRender 中设置

查看emissive和emssiveMap:

如果使用环境光看到黑色(或者其他纯色),将emssive设置为material.color,如果有纹理,将纹理赋值给emssiMap。

var textureLoader = new THREE.TextureLoader();
new THREE.GLTFLoader().load("./models/gb.glb", result => {
        var model = result.scene;
        scene.add(model);
        model.traverse( function ( child ) {
            if ( child.isMesh ) {
                //模型变亮
                child.material.emissive =  child.material.color;
                child.material.emissiveMap = child.material.map;
                //模型重新赋材质贴图
                 var texture = textureLoader.load( "./images/texture/gbmaterial.jpg" );
                 texture .repeat.set( 1,1 );
                 child.material.map = texture 
                 child.material.transparent = true
                  
                  //模型变亮,或重新赋颜色
                  child.material.color.set(0xffffff)
            }
        } );

 })

 示例如下:

这里我导入一个钢包的模型,在只有环境换时,是黑秋秋的,然后我尝试给加几个平行光增加亮度,如下:

 效果还是不够理想,我尝试给模型本身增加亮度,效果如下:

 效果仍然不够真实,最后我随便下载了一张金属材质的图片,赋值给模型,效果如下:

 实际代码使用片段:

var  model = obj.scene;
model.position.set(0,0,0)
scene.add(model)
model.traverse( function ( child ) {
        if ( child.isMesh ) {
             //添加贴图           
              var texture = textureLoader.load( "../images/gbmaterial.jpg" );
              texture.repeat.set( 1,1 );
              child.material.map = texture
                //给个颜色增加亮度
              child.material.color.set('#ddd');
         }
});

 2、也可以给模型赋值视频video材质

gltf.scene.traverse(child=>{
    console.log("name:",child.name);
    
     if(child.name=='曲面屏'){
      const video = document.createElement('video');
      video.src = "../meadis/video01.mp4";
      video.muted = true;
      video.autoplay = "autoplay";
      video.loop = true;
      video.play();
      const videoTexture = new THREE.VideoTexture(video);
      const videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
      child.material = videoMaterial;
    }

})

这样就可以在一个展馆的曲面屏上投放视频,也可以在建筑物外立面添加视频起到宣传作用

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐