threejs gltf 修改materail材质颜色与贴图 贴图不生效

异常:可修改颜色但不能加贴图,图片路径无误

实际使用中的部分关键代码

//新建纹理
var texture = new THREE.TextureLoader().load( "texture/Bricks052_1K_Color.jpg" );
        texture.encoding = THREE.sRGBEncoding;
        texture.flipY = false;
        texture.needsUpdate = true;
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set( 4, 4 );
//新建材质
var tmaterial = new THREE.MeshStandardMaterial({ map: texture });
//加载模型部分代码
loader.load('model/000.glb',( gltf )=> {
            //改变子模型材质
            gltf.scene.children[0].material = tmaterial
            gltf.scene.children[0].material.needsUpdate  = true;
            gltf.scene.traverse( function ( child ) {
              //放射光颜色与放射光贴图 不设置可能导致黑模
              if ( child.isMesh ) {
                child.material.emissive =  child.material.color;
                child.material.emissiveMap = child.material.map ;
              }

            } );
            const senc = gltf.scene || gltf.scene[0];
            this.scene.add( senc  );
            //创建一个网格 将 宽度x =100 y=200 z=100、分段数皆为1立方体 与 材质 添加进去;
            //向场景添加长方体网格对象
          }, undefined, function ( error ) {

            console.error('加载错误:'+ error );

          } );

代码经使用盒模型测试替换效果是无误的

但是gltf模型只能改变颜色却无法显示贴图,经过一番苦苦搜索发现问题应该是模型本身的设置问题

导出的原模型不论有无贴图都须添加UVmap设置才能在threejs中操作,这里以Blender软件界面为例

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值