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

下载到的贴图文件

在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;

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