Three.js纹理贴图-Toy模板网

这篇具有很好参考价值的文章主要介绍了Three.js纹理贴图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Three.js入门

Three.js光源

Three.js阴影

Three.js纹理贴图

纹理是一种图像或图像数据，用于为物体的材质提供颜色、纹理、法线、位移等信息，从而实现更加逼真的渲染结果。
纹理可以应用于Three.js中的材质类型，如MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial、MeshStandardMaterial等。

UV映射

UV映射是2D图像投影到3D模型的表面以进行纹理映射的3D建模过程（也即把位图贴到3D几何形状的过程或者方法）。在这个过程中，3D模型上的每个顶点都会被赋予一个二维坐标（U, V）。

由于X，Y，Z已经表示模型空间中的3D图形的轴了。所以用U和V分别表示纹理坐标的水平和垂直方向。

顶点UV坐标可以在0~1.0之间任意取值，纹理贴图左下角对应的UV坐标是(0,0)，右上角对应的坐标(1,1)。

UV映射公式如下：

(u,v) -> (x,y,z)

(u,v)代表纹理上的坐标，(x,y,z)代表几何图形上的点(向量)。

以立方缓冲几何体的一个面为例：
Three.js纹理贴图,three.js,javascript,贴图,开发语言

贴图的左下角(0,0) 映射到几何体的(-1,-1,1);
贴图的左下角(1,0) 映射到几何体的(1,-1,1);
贴图的左下角(0,1) 映射到几何体的(-1,1,1);
贴图的左下角(1,1) 映射到几何体的(1,1,1);

three.js的所有内置的几何体都内置了UV映射，所以开发者不需要担心这个问题。

纹理的使用方法

加载纹理

// 1.
const textureLoader = new THREE.TextureLoader();
// 2.
const texture = textureLoader.load(uv);

const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
const boxMaterial = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  map: texture, // 2.重点位置
});
const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(boxMesh);

使用TextureLoader进行加载纹理；

加载图像并在纹理准备就绪后更新纹理，然后设置给MeshStandardMaterial的map。

Three.js纹理贴图,three.js,javascript,贴图,开发语言

纹理变换

repeat

我们可以使用 repeat 属性对纹理进行重复显示，repeat 是一个 Vector2 实例，所以可以指定 x 和 y 属性。

texture.repeat.x = 2;
texture.repeat.y = 2;

Three.js纹理贴图,three.js,javascript,贴图,开发语言

默认情况下纹理不会重复(THREE.ClampToEdgeWrapping)，最后一个像素被拉伸了，我们需要设置 wrapS 和 wrapT可重复。

texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping

Three.js纹理贴图,three.js,javascript,贴图,开发语言

wrapS和wrapT

上面重复的纹理方向是相同的，可以设置为镜像方向。

texture.wrapS = THREE.MirroredRepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping`

Three.js纹理贴图,three.js,javascript,贴图,开发语言

offset

我们可以使用 offset 属性对纹理进行重复偏移，repeat 是一个 Vector2 实例，所以可以指定 x 和 y 属性。

texture.offset.x = 0.1;
texture.offset.y = 0.1;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

Three.js纹理贴图,three.js,javascript,贴图,开发语言

如果不设置THREE.RepeatWrapping重复，则会出现纹理空白区域。

rotation

texture.rotation = Math.PI / 4;

Three.js纹理贴图,three.js,javascript,贴图,开发语言

旋转是弧度，逆时针方向旋转。旋转的点默认是(0,0)这个点

center

如果要按照纹理的中心进行旋转，需要修改center。

texture.center = new THREE.Vector2(0.5, 0.5);

Three.js纹理贴图,three.js,javascript,贴图,开发语言

minFilter 和 magFilter

可以使用 minFilter 属性来设置纹理图的 minification 缩小过滤器，使用magFilter 属性来设置纹理图的 minification 放大过滤器。

当纹理的像素小于渲染像素时，我们需要将纹理放大；当纹理的像素大于渲染像素时，我们需要将纹理缩小

以放大过滤器为例：

Three.js纹理贴图,three.js,javascript,贴图,开发语言

Nearest就是找最近的一个像素点的颜色；
Linear 就是根据附近的四个像素点的平均颜色值️；

纹理类型

纹理有很多种类型，接下来我们就来介绍这些不同的纹理。

如果只是测试效果，可以在一些免费的纹理图片网站上去下载。譬如 www.3dtextures.me 等。

本文使用的纹理图片如下：
Three.js纹理贴图,three.js,javascript,贴图,开发语言

颜色纹理

颜色纹理只会将纹理的像素应用在几何体上。它等同于直接在 material 上设置 color 属性，但是 color 属性只能设置一种颜色，而颜色纹理可以为每一个位置设置颜色。

const textureLoader = new THREE.TextureLoader();
const colorTexture = textureLoader.load('path/to/color_texture.jpg');

const material = new THREE.MeshBasicMaterial({
  map: colorTexture // 增加颜色纹理
});

Three.js纹理贴图,three.js,javascript,贴图,开发语言

法线纹理

法线纹理它不会移动顶点，但是它会让光线认为面的朝向不同。所以看起来会有凹凸立体感。

const normalTexture = textureLoader.load('./images/door/normal.jpg');

const planeMaterial = new THREE.MeshStandardMaterial({
  map: texture,
  normalMap: normalTexture, // 增加法线纹理
});

Three.js纹理贴图,three.js,javascript,贴图,开发语言

立体视觉效果还是比较明显的

位移纹理

位移纹理是灰度图像，它将移动顶点以创造一些高度。使用高度纹理，你要添加更多的细分网格才能看到效果。

const displacementTexture = textureLoader.load("./images/door/height.jpg");

const planeGeometry = new THREE.PlaneGeometry(3, 3, 16, 16); // 增加网格
const planeMaterial = new THREE.MeshStandardMaterial({
  map: texture,
  normalMap: normalTexture,
  displacementMap: displacementTexture,// 增加高度纹理
});

Three.js纹理贴图,three.js,javascript,贴图,开发语言

可以通过displacementScale控制位移的距离。

金属纹理

金属纹理（metalness texture）是灰度图像，将指定哪个部分是金属（白色）和非金属（黑色）。此信息将有助于创造反射，给 material 增加金属质感。

const metalTexture = textureLoader.load("./images/door/metalness.jpg");


const planeMaterial = new THREE.MeshStandardMaterial({
  map: texture,
  normalMap: normalTexture,
  metalnessMap: metalTexture, // 增加金属纹理
});

Three.js纹理贴图,three.js,javascript,贴图,开发语言

增加金属感，是否有感觉？我没看出来。

粗糙度纹理

粗糙度（rougness texture）经常和金属度纹理一起使用，它也是灰度图，它将指定哪个部分是粗糙的（白色），哪一部分是光滑的（黑色）。

const roughTexture = textureLoader.load("./images/door/roughness.jpg");


const planeMaterial = new THREE.MeshStandardMaterial({
  map: texture,
  normalMap: normalTexture,
  metalnessMap: metalTexture, 
  roughnessMap: roughTexture, // 增加粗糙度纹理
});

这个例子看不出效果，就不截图了。

环境光遮蔽纹理

环境遮挡纹理（ambient occlusion texture）是灰度图像，它将在表面缝隙中添加假的阴影。虽然它在物理上不准确，但它有助于创建对比度。

const aoTexture = textureLoader.load("./images/door/ambientOcclusion.jpg");

const planeMaterial = new THREE.MeshStandardMaterial({
  map: texture,
  normalMap: normalTexture,
  metalnessMap: metalTexture, 
  roughnessMap: roughTexture, 
  aoMap: aoTexture, // 增加环境光遮蔽纹理
});

Three.js纹理贴图,three.js,javascript,贴图,开发语言

环境纹理

环境纹理来模拟物体周围的环境光照和反射。环境纹理通常用于创建反射镜面效果或提供全局光照。

  const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(2, 50, 50),
    new THREE.MeshPhysicalMaterial({
      roughness: 0,
      metalness: 0,
      color: 0xffea00,
      envMap: texture, // 设置环境纹理
      transmission: 1,
      ior: 2.3,
    })
  );

Three.js纹理贴图,three.js,javascript,贴图,开发语言