Three.js凹凸贴图bumpMap和法线贴图.normalMap

参考资料:threejs中文网

threejs qq交流群:814702116

凹凸贴图bumpMap和法线贴图.normalMap

本文是Three.js电子书的8.6节

一个复杂的曲面模型,往往模型顶点数量比较多,模型文件比较大,为了降低模型文件大小,法线贴图.normalMap算法自然就产生了,复杂的三维模型3D美术可以通过减面操作把精模简化为简模,然后把精模表面的复杂几何信息映射到法线贴图.normalMap上。

凹凸贴图、法线贴图 法线贴图 凹凸贴图 材质对象 法线贴图通过RGB三个分量分别表示法向量的xyz三个方向 通过图片保留几何体表面的几何细节 绘制精模、简模 通过精模烘培出法线贴图 导出简模和法线贴图 3D美术 解析导出的模型和法线贴图 程序员 协作 低模+法线贴图=高模 降低模型大小,减少顶点的计算 3D美术烘培使用 精模 导出给程序员使用 简模 节约顶点数量 好处 图片像素的灰度值表示几何表面的高低深度 如果定义了法线贴图,则将忽略该贴图 没有凹凸、法线贴图属性 MeshLambertMaterial、MeshBasicMaterial map属性 颜色纹理贴图 .bumpMap : Texture 表示深浅程度,默认值1 .bumpScale : Float 凹凸贴图 .normalMap : Texture 表示深浅程度 默认值是Vector2设置为(1,1) .normalScale : Vector2 法线贴图 属性 MeshPhongMaterial

法线贴图

下面代码在没有设置法线贴图之前就是一个立方体网格模型Mesh,然后把一个携带圆形凹坑信息的法线贴图3_256.jpg设置到立方体网格模型的面上,你可以看到面上多个凹陷效果。你可以测试源码案例中法线贴图目录下的其它法线贴图文件,查看渲染效果。

法线贴图3_256.jpg
在这里插入图片描述

立方体设置法线贴图后的效果
在这里插入图片描述

// TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理
var textureLoader = new THREE.TextureLoader();
// 加载法线贴图
var textureNormal = textureLoader.load('./法线贴图/3_256.jpg');
var material = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  normalMap: textureNormal, //法线贴图
  //设置深浅程度,默认值(1,1)。
  normalScale: new THREE.Vector2(3, 3),
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

法线贴图:地球案例

地球表面法线贴图记录了地面表面的几何信息。
在这里插入图片描述
你可以对比两个地球的渲染效果,一个设置法线贴图,一个不设置法线贴图。

在这里插入图片描述

var geometry = new THREE.SphereGeometry(100, 25, 25); //球体
// TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理
var textureLoader = new THREE.TextureLoader();
// 加载纹理贴图
var texture = textureLoader.load('./Earth.png');
// 加载法线贴图
var textureNormal = textureLoader.load('./EarthNormal.png');
var material = new THREE.MeshPhongMaterial({
  map: texture, // 普通颜色纹理贴图
  normalMap: textureNormal, //法线贴图
  //设置深浅程度,默认值(1,1)。
  normalScale: new THREE.Vector2(1.2, 1.2),
}); //材质对象Material

凹凸贴图

凹凸贴图和法线贴图功能相似,知识没有发现贴图表达的几何体表面信息更丰富。凹凸贴图是用图片像素的灰度值表示几何表面的高低深度,如果模型定义了法线贴图,就没有必要在使用凹凸贴图。

你可以对比两面墙一个使用凹凸贴图一个不使用凹凸贴图的视觉效果。

在这里插入图片描述在这里插入图片描述

var textureLoader = new THREE.TextureLoader();
// 加载颜色纹理贴图
var texture = textureLoader.load('./凹凸贴图/diffuse.jpg');
// 加载凹凸贴图
var textureBump = textureLoader.load('./凹凸贴图/bump.jpg');
var material = new THREE.MeshPhongMaterial({
  map: texture,// 普通纹理贴图
  bumpMap:textureBump,//凹凸贴图
  bumpScale:3,//设置凹凸高度,默认值1。
}); //材质对象Material
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
在使用three.js加载gltf模型时,可能会遇到模型自带的材质加载不出来的问题,这可能是因为模型的材质格式不被three.js所支持。解决这个问题的方法是将模型的材质转化为可以被three.js所识别的材质格式。你可以使用GLTFLoader加载模型后,通过遍历模型的材质数组,将每个材质转化为对应的three.js材质类型,例如THREE.MeshBasicMaterialTHREE.MeshLambertMaterialTHREE.MeshPhongMaterial等。具体的实现可以参考以下代码示例: ```javascript var loader = new THREE.GLTFLoader(); loader.load( 'model.gltf', function ( gltf ) { gltf.scene.traverse( function ( child ) { if ( child.isMesh ) { for ( var i = 0; i < child.material.length; i ++ ) { var material = child.material[ i ]; if ( material.isGLTFSpecularGlossinessMaterial ) { material = THREE.MeshStandardMaterial().copy( material ); } else if ( material.isGLTFMaterial ) { material = THREE.MeshStandardMaterial().copy( material ); material.map = null; material.lightMap = null; material.aoMap = null; material.emissiveMap = null; material.bumpMap = null; material.normalMap = null; material.displacementMap = null; material.roughnessMap = null; material.metalnessMap = null; } material.needsUpdate = true; child.material[ i ] = material; } } } ); scene.add( gltf.scene ); }, undefined, function ( e ) { console.error( e ); } ); ``` 在这个示例中,我们通过遍历模型的材质数组,将每个材质转化为THREE.MeshStandardMaterial类型,这是three.js中支持的一种材质类型。如果你的模型不支持这种材质类型,你可以根据你的模型选择其他的材质类型。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

Threejs可视化

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

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

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

打赏作者

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

抵扣说明:

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

余额充值