three.js法线贴图与凹凸贴图的对比

zhuoyunluo77

已于 2022-09-06 17:23:35 修改

阅读量794

点赞数

分类专栏： three.js 文章标签： javascript 前端

于 2022-09-06 17:22:22 首次发布

本文链接：https://blog.csdn.net/w__qwwq/article/details/126729316

版权

本文通过对比图展示了three.js中法线贴图与凹凸贴图的区别，并详细介绍了如何为球体添加这两种贴图的实现过程，包括贴图的加载和场景初始化。

摘要由CSDN通过智能技术生成

一、对比图：

法线贴图与凹凸贴图对比图

二、实现过程

加载贴图：

// TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
  var textureLoader = new THREE.TextureLoader();
 // 加载纹理贴图
  var texture = textureLoader.load('./Earth.png');
// 加载法线/凹凸贴图
  var textureNB = textureLoader.load('./EarthNormal.png');

1、给球体添加法线贴图

 var geometry = new THREE.SphereGeometry(100, 25, 25); //加载球体
 // 加载法线/凹凸贴图
  var textureNB = textureLoader.load('./EarthNormal.png');
 //法线贴图
  var material = new THREE.MeshPhongMaterial({
    map: texture, // 普通颜色纹理贴图
    normalMap: textureNB, //法线贴图
    //设置深浅程度，默认值(1,1)。
    normalScale: new THREE.Vector2(1.2, 1.2),
  }); //材质对象Material
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

  mesh.position.set(150,0,0);
  scene.add(mesh);

2、给球体添加凹凸贴图

 var geometry = new THREE.SphereGeometry(100, 25, 25); //加载球体
  // 凹凸贴图
  var materialBump = new THREE.MeshPhongMaterial({
    map:texture, //普通颜色纹理图片
    bumpMap:textureNB,  // 凹凸贴图
    bumpScale:3  //设置凹凸高度，默认值1
  });

   var mesh1 = new THREE.Mesh(geometry,materialBump);
   mesh1.position.set(-150,0,0);
   scene.add(mesh1);

3、初始化场景

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title

最低0.47元/天解锁文章

zhuoyunluo77

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
three.js法线贴图与凹凸贴图的对比

three.js法线贴图与凹凸贴图的对比
复制链接

扫一扫

专栏目录