Threejs中使模型变亮或模型重新贴图

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;
    }

})

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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
threejs 建筑模型贴图是指在使用threejs进行建筑模型渲染时,给建筑物的表面贴上纹理、颜色或材质等效果。在threejs中,建筑模型贴图可以通过以下几个步骤实现: 第一步,准备模型:首先需要准备好建筑模型的数据,可以使用3D建模软件(如Blender、Maya等)创建建筑模型。在模型中,每个面都是由三角形构成的,每个三角形都具有自己的顶点坐标、法线向量、纹理坐标等属性。 第二步,导入模型:将建筑模型导入到threejs中。通过加载3D模型文件(如OBJ、GLTF等),可以将建筑模型加载到threejs场景中进行渲染。在导入模型的过程中,建筑模型的顶点数据、面索引以及其他属性将被解析并存储在threejs内部的数据结构中。 第三步,创建材质:在threejs中,可以通过创建材质对象来给建筑模型的表面添加纹理。材质可以包括颜色、光照属性、纹理等信息。可以使用内置的材质类型(如MeshBasicMaterial、MeshPhongMaterial)或自定义材质类型来实现所需的效果。 第四步,贴图:将纹理图像应用到建筑模型的材质上。可以加载图片文件作为纹理,拥有纹理坐标信息的每个面将根据其顶点的纹理坐标与图像上的像素进行映射。通过修改材质的属性,如map、color、emissive等,可以实现不同的贴图效果。 第五步,渲染:最后,通过调用渲染器(Renderer)的渲染方法将建筑模型以及贴图效果显示在屏幕上。渲染器会根据光照、摄像机视角等参数对建筑模型进行光栅化,并应用贴图材质的效果,最终将建筑模型的可视化结果呈现给用户。 通过以上几个步骤,就可以实现在threejs中对建筑模型进行贴图的效果。贴图可以为建筑模型增加细节、纹理、颜色等,使其更加真实、生动。同时,通过调整材质的属性,还可以实现建筑模型的反射、折射等效果,提升模型的视觉质感。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我的2009

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值