Three.js中的几种贴图效果

Three.js中通过给物体对象设置不同纹理,达到不同的显示效果,本篇通过效果图,简单的介绍几种纹理效果。
普通贴图
作用在物体上,显示图片的本身效果,three.js上设置的方式:

const texture = new THREE.TextureLoader().load(贴图路径);
let material = new THREE.MeshBasicMaterial();
material.map = texture;

在这里插入图片描述
凹凸贴图
作用在物体上,具有凹凸的效果,three.js上设置的方式:

const bumpTexture = new THREE.TextureLoader().load(贴图路径);
  let bumpMaterial = new THREE.MeshPhongMaterial({
               //普通纹理贴图
               map:texture,
               //凹凸纹理
               bumpMap:bumpTexture,
               bumpScale:2
      });

在这里插入图片描述
凹凸贴图示例图片效果:
在这里插入图片描述
法向贴图
作用在物体上,显示物体的细节效果,three.js上设置的方式:

const normalTexture = new THREE.TextureLoader().load(贴图路径);
let normalMaterial = new THREE.MeshPhongMaterial({
                //普通贴图
                map:texture,
              //法向贴图
                        normalMap:normalTexture,
                       normalScale:new THREE.Vector2(1,1)
                    });

在这里插入图片描述
法向贴图示例图片效果:
在这里插入图片描述
高光贴图

作用在物体上,部分区域显示高光的效果,three.js上设置的方式:

const specularMap = new THREE.TextureLoader().load(贴图路径); 
let specMaterial = new THREE.MeshPhongMaterial({

             //基础贴图
              map:map,
              specularMap:specularMap,
              specular:0x0000ff,
              shininess:2
        });

在这里插入图片描述
高光贴图示例图片效果:
在这里插入图片描述
其他还有光照贴图、环境贴图等,具体的参见three.js官方文档查看。
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值