Three.js贴图效果一览

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

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

贴图的重要性

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

图片

//创建一个球体几何对象
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

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

//材质对象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

网格法向量材质,是一种比较特殊的材质。它使得物体的每一个面的颜色都从该面向外指的法向量计算得到的。
在这里插入图片描述

//材质对象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_ 不对灯光作出反应。图片

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

//材质对象Material
const material = new THREE.MeshMatcapMaterial({
});
material.matcap= texture;

材质特别属性简介
matcap贴图属性

MeshDepthMaterial

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

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一样可以实现光源和网格表面的漫反射光照计算,还可以产生高光效果(镜面反射)。

图片

//点光源
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贴图效果。

图片

//材质对象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

图片

  • 地址:https://www.textures.com/library

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

polyhaven

图片

  • 地址:https://polyhaven.com/textures

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

MatCaps

图片

  • 地址:https://github.com/nidorx/matcaps

  • 简介:是专为MeshMatcapMaterial材质准备的,太赞了!

plaintextures

图片

  • 地址:https://www…com/pbr/category/all/1

  • 简介:网站能提供免费纹理、画笔和照片 高级账号可以下载更高分辨率的素材。

Texture Niaja

图片

  • 地址:https://texture.ninja/category/Wood/2

  • 简介:网站能提供5106种贴图,如果你需要指纹贴图的话,这会是很好的选择!

图片切割

图片图片

  • 地址:https://matheowis.github.io/HDRI-to-CubeMap/

  • 简介:上传图片文件可以切割成6等分,环境贴图可以用到哈!

纹理生成器1

图片

  • 地址:http://www.tartanmaker.com/

纹理生成器2

图片

  • 地址:https://coolbackgrounds.io/

纹理生成器3

图片

  • 地址:http://www.stripegenerator.com/

结论

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

参考资料

three.js journey

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

关注柳杉前端公众号,获取更多资料

  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three.js是一个用于在Web上创建和显示3D图形的JavaScript库。要在Three.js中添加纹理(贴图),可以按照以下步骤进行操作: 1. 导入所需的库文件和模型文件。确保你已经导入了Three.js的核心库以及其他所需的扩展库(如OrbitControls.js)。 2. 创建一个场景(Scene),相机(Camera)和渲染器(Renderer)。 ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 3. 创建一个几何体(Geometry)并为其添加材质(Material)。 ```javascript var geometry = new THREE.BoxGeometry(1, 1, 1); var texture = new THREE.TextureLoader().load('path/to/texture.jpg'); var material = new THREE.MeshBasicMaterial({ map: texture }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); ``` 在这个例子中,我们创建了一个立方体几何体,并使用`TextureLoader`加载一个纹理图片。然后,我们使用`MeshBasicMaterial`将纹理应用到立方体上。 4. 设置相机位置并添加交互控制(可选)。 ```javascript camera.position.z = 5; var controls = new THREE.OrbitControls(camera, renderer.domElement); ``` 这将设置相机的位置并添加鼠标和触摸交互控制。 5. 渲染场景。 ```javascript function animate() { requestAnimationFrame(animate); // 进行一些动画或交互操作 renderer.render(scene, camera); } animate(); ``` 以上是一个基本的例子,它演示了如何在Three.js中添加纹理。你可以根据自己的需求进行更多的定制和扩展。记得将`'path/to/texture.jpg'`替换为你自己的纹理图片路径。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值