Three.js贴图效果一览!

·  阅读 1189
Three.js贴图效果一览!

我正在参与掘金创作者训练营第5期,点击了解活动详情

纹理贴图(Textures)字面意思就是給几何体对象贴上不同的纹理图!好比于我们每天选择穿不同的衣服,我们穿不同的衣服带来的感官会有很大变化!同理几何体不同贴图的视觉效果也会有千差万别。纹理贴图是 Three.js一个很重要的内容,掌握了纹理贴图可以让3d效果产生质的飞跃。

那现在就让我们进入正题吧!go!go!go!

贴图的重要性

如果没有纹理贴图,我们看到的3d物体将会是很糟糕的!例如下面这个最基础贴图例子。

QQ截图20220807084255.png

//创建一个球体几何对象
const circlegeometry = new THREE.SphereBufferGeometry(0.5, 16, 16)
//创建一个立方体几何对象Geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);
//创建一个圆环几何对象
const tourGeometry = new THREE.TorusBufferGeometry(0.3, 0.15, 16, 32);
复制代码
// 加载贴图
let textureLoader = new THREE.TextureLoader();
const texture=textureLoader.load('/three/grass.png');

//材质对象Material
const material = new THREE.MeshBasicMaterial({
    // color: 0xb9d3ff
});
material.map= texture;
复制代码

不同材质对象的贴图效果

不同的人穿同样的衣服显然是不合适的,好比一个140kg的胖子穿s码的T恤,那肯定是穿不下的!纹理贴图也是一样的道理,它并不是适合每种材质对象(Material)。材质对象按大类分可分为五种。如下

  • 点材质
  • 线材质
  • 网格材质
  • 精灵Sprite材质
  • 自定义着色器材质

今天我们主要介绍网络(Mesh)材质。顾名思义,网格类模型才会使用的材质对象。那现在就来看看它带来的贴图效果吧。

MeshBasicMaterial

网格基础材质,不受带有方向光源影响,没有棱角感。使用示例如下: QQ截图20220807093035.png

//材质对象MeshBasicMaterial
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
    transparent:true,
    opacity:.5
});
material.map= texture;
material.wireframe=true;
复制代码
材质常用属性简介
color材质颜色,比如蓝色0x0000ff
wireframe将几何图形渲染为线框。 默认值为false
opacity透明度设置,0表示完全透明,1表示完全不透明
transparent是否开启透明,默认false

MeshNormalMaterial

网格法向量材质,是一种比较特殊的材质。它使得物体的每一个面的颜色都从该面向外指的法向量计算得到的。 QQ截图20220807100154.png

//材质对象MeshNormalMaterial
const material = new THREE.MeshNormalMaterial({
    // color: 0x00ff00,
    // transparent:true,
    // opacity:.5
});
// material.map= texture;
// material.wireframe=true;
material.flatShading=true
复制代码
材质常用属性简介
flatShading可以让每个小平面更加的平坦突出

MeshMatcapMaterial

由一个材质捕捉(MatCap,或光照球(Lit Sphere))纹理所定义,其编码了材质的颜色与明暗。由于mapcap图像文件编码了烘焙过的光照,因此MeshMatcapMaterial 不对灯光作出反应。 QQ截图20220807103416.png

const texture=textureLoader.load('/three/5B4CBC_B59AF2_9B84EB_8F78E4.png');

//材质对象Material
const material = new THREE.MeshMatcapMaterial({
});
material.matcap= texture;
复制代码
材质特别属性简介
matcap贴图属性

MeshDepthMaterial

使用这种材质的物体,其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。当物体离相机较近时会呈现白色,较远时会呈现黑色。贴图和颜色对其无效果,可以将这种材质与其他材质相结合,从而很容易创建逐渐消失的效果。 QQ截图20220807111626.png

const material = new THREE.MeshDepthMaterial({
    // color: 0x00ff00,
    // transparent:true,
    // opacity:.5
});
复制代码
const width = container.clientWidth; //窗口宽度
const height = container.clientHeight; //窗口高度
const k = width / height; //窗口宽高比
const s = 1.2; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 100);
camera.position.set(2, 3, 4); //设置相机位置
// camera.position.set(20, 30, 40); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
复制代码

MeshLambertMaterial 和 MeshPhongMaterial

MeshLambertMaterial这是一种暗淡的非光泽表面的材质,没有镜面高光,并且会对光源做出反应。高光网格材质MeshPhongMaterial除了和MeshLambertMaterial一样可以实现光源和网格表面的漫反射光照计算,还可以产生高光效果(镜面反射)。

QQ截图20220807124212.png

//点光源
const point = new THREE.PointLight(0xffffff,.5);
point.position.set(4, 4, 4); //点光源位置
scene.add(point); //点光源添加到场景中
// //环境光
const ambient = new THREE.AmbientLight(0xffffff,.5);
scene.add(ambient);
复制代码
// MeshLambertMaterial 
const material = new THREE.MeshLambertMaterial({
    color: 0xff0000,  
});
// MeshPhongMaterial
const material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    specular:0xffffff,//高光部分的颜色
    shininess:60,//高光部分的亮度,默认30
});
复制代码
MeshLambertMaterial特别属性简介
specular高光部分的颜色
shininess高光部分的亮度,默认30

MeshStandardMaterial

MeshStandardMaterialMeshPhysicalMaterial类是PBR物理材质,可以更好的模拟光照计算,相比光网格材质MeshPhongMaterial渲染效果更逼真。我们今天只看MeshStandardMaterial贴图效果。

QQ截图20220807170243.png

//材质对象Material
const material = new THREE.MeshStandardMaterial();
material.metalness=0.45; // 金属度属性
material.roughness=0.65; //粗糙度属性
material.map= texture;
复制代码
// 环境贴图
const envTextTure=cubeTextureLoader.load([
    '/three/texture/px.png',
    '/three/texture/nx.png',
    '/three/texture/py.png',
    '/three/texture/ny.png',
    '/three/texture/pz.png',
    '/three/texture/nz.png'
])
//材质对象Material
const material = new THREE.MeshStandardMaterial();
material.metalness=0.7; // 金属度属性
material.roughness=0.2; //粗糙度属性
material.envMap=envTextTure;
复制代码
材质特别属性简介
metalness金属度属性(0.0到1.0之间的值可用于生锈的金属外观)
roughness粗糙度属性(0.0表示平滑的镜面反射,1.0表示完全漫反射. 默认 0.5)

网站推荐

这些网站主要是关于贴图推荐纹理贴图工具。好的贴图可以让我们的物体更加的惟妙惟肖。所以推荐一下,希望对大家有帮助!

textures

image.png

  • 地址:www.textures.com/library
  • 简介:这个网站贴图类别是我看过最齐全的啦!强大的搜索功能允许你搜索特定的纹理以及标签。不过国内加载有时会有点慢,不知道是不是我网络问题。不过还是极力推荐的!

polyhaven

image.png

  • 地址:polyhaven.com/textures
  • 简介:这是一个完全免费的3D素材网站。里面的贴图质量非常的高,贴图素材也很丰富!

MatCaps

image.png

plaintextures

QQ截图20220807161838.png

  • 地址:www..com/pbr/categor…
  • 简介:网站能提供免费纹理、画笔和照片 高级账号可以下载更高分辨率的素材。

Texture Niaja

QQ截图20220807162211.png

  • 地址:texture.ninja/category/Wo…
  • 简介:网站能提供5106种贴图,如果你需要指纹贴图的话,这会是很好的选择!

图片切割

image.png image.png

纹理生成器1

image.png

纹理生成器2

image.png

纹理生成器3

image.png

结论

本篇文章只是粗浅介绍了纹理贴图和常用网络材质的使用方法,并顺便引入了相机和光源。最后展示的贴图效果还是很不错的。如果你需要深入学习的话还是需要翻阅大量有关资料的。

参考资料

three.js journey

Three.js零基础入门教程(郭隆邦

分类:
前端
收藏成功!
已添加到「」, 点击更改