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;
}
})
这样就可以在一个展馆的曲面屏上投放视频,也可以在建筑物外立面添加视频起到宣传作用