记从polyhaven下载贴图文件应用到three.js的问题

合集 - three.js(6)

1.three.js中使用r3f在模型上打多处孔洞（模型相减）2022-10-202.r3f给物体不同的面设置不同的材质2022-11-08

3.记从polyhaven下载贴图文件应用到three.js的问题2023-11-21

4.r3f加载IFC模型2023-05-315.r3f喷雾火焰组件2023-05-296.three.js中某个物体跟随camera进行旋转2023-04-11

收起

下载到的贴图文件

在three.js中主要用到了rubber_tiles_ao_1k.jpg、rubber_tiles_diff_1k.jpg、rubber_tiles_disp_1k.png这三张贴图。
后缀为arm的贴图尚未使用。(ARM即 Albedo(反照率)、Rougness(粗糙度)、Metallic(金属度)这三个单词的缩写，three.js中似乎没有对应的loader来加载此种贴图)

最终效果

项目源代码

import { useTexture } from "@react-three/drei";
import React from "react";

function ImgCube() {
  // ao贴图
  const aoMap = useTexture(
    "/map/rubber_tiles_1k/textures/rubber_tiles_ao_1k.jpg"
  );
  //漫反射贴图
  const roughnessMap = useTexture(
    "/map/rubber_tiles_1k/textures/rubber_tiles_diff_1k.jpg"
  );
  //位移贴图
  const displacementMap = useTexture(
    "/map/rubber_tiles_1k/textures/rubber_tiles_disp_1k.png"
  );

  return (
    <group>
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial
          color={"black"}
          aoMap={aoMap}
          roughnessMap={roughnessMap}
          bumpMap={displacementMap}
          bumpScale={0.02}}
        />
      </mesh>
    </group>
  );
}

export default ImgCube;

之后下载的贴图可参照此代码对应，可获得较为真实的效果