1. 基本使用

使用 MeshStandardMaterial 实例渲染 RGB 材质

// 添加环境光
const light = new THREE.AmbientLight("#ffffff")
scene.add(light)
// 直线光
const directionalLinght = new THREE.DirectionalLight("#ffffff",0.5)
directionalLinght.position.set(10,10,10)
scene.add(directionalLinght)
// 置换贴图
const doorHeightTexture = textureLoader.load("/gltf/Default_metalRoughness.jpg")
      
//粗糙程度
const roughnessTexture = textureLoader.load("/gltf/Default_metalRoughness.jpg")
​
// 金属贴图
const metalnessTexture = textureLoader.load("/gltf/Default_albedo.jpg")
​
// 法线贴图
const bumpMap = textureLoader.load("/gltf/Default_albedo.jpg")
// 创建几何体
const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1,1)
// 创建RBG材质
const standardMaterial = new THREE.MeshStandardMaterial({
        color:"#ffff00",
        map:doorColorTexture,
        displacementMap:doorHeightTexture, // 这是置换图片
        displacementScale:0.1, // 设置突出的程度
        roughness:0, // 光滑程度
        roughnessMap:roughnessTexture, // 粗糙程度
        metalness:0.5, // 金属相似程度
        metalnessMap:metalnessTexture, // 金属贴图
        bumpMap:bumpMap, // 法线贴图
​
})
cube = new THREE.Mesh(cubeGeometry,standardMaterial);
scene.add(cube)

2. 纹理加载管理器

      // 设置纹理加载管理器
      const loadingManager = new THREE.LoadingManager(
        ()=>{
          console.log("加载完成")
        },
        (url,num,total)=>{
          console.log(`当前正在加载: ${url}; 当前加载第几个: ${num} ; 加载的总数: ${total}`)
          console.log("加载总进度:",((num/total)*100).toFixed(2)+"%")
        },
        ()=>{
          console.log("加载报错")
        }
      )
      // 导入纹理
      const textureLoader = new THREE.TextureLoader(loadingManager);
      const doorColorTexture = textureLoader.load("/gltf/Default_albedo.jpg")

3. 环境贴图

// 导入环境贴图
const cubeTextureLoader = new THREE.CubeTextureLoader();  
const envMapTexture = cubeTextureLoader.load([
    "/vr/px.jpg",
    "/vr/nx.jpg",
    "/vr/py.jpg",
    "/vr/ny.jpg",
    "/vr/pz.jpg",
    "/vr/nz.jpg"
])
// 创建球体
const geometry   = new THREE.SphereGeometry(1,20,20);
// 设置材质
const material = new THREE.MeshStandardMaterial({
   metalness:0.7,
   roughness:0.1,
   // envMap:envMapTexture
})
// 设置场景的背景
scene.background = envMapTexture;
// 给所有的物体添加默认的环境贴图
scene.environment = envMapTexture;
cube = new THREE.Mesh(geometry,material);
scene.add(cube)

3. 导入HBR贴图

import {RGBELoader} from "three/examples/jsm/loaders/RGBELoader"
const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync("/equirectangular/blouberg_sunrise_2_1k.hdr").then((texture)=>{
    texture.mapping = THREE.EquirectangularReflectionMapping; // hdr设置背景图为VR全景效果
    scene.background = texture; // 设置背景颜色
    scene.environment = texture; // 设置其他物体反光为环境材质
})