threejs - 基础网格材质

基础网格材质和贴图

一个以简单着色方式来绘制几何体的材质，这种材质不受光照影响

// 创建平面几何体
let planeGeometry = new THREE.PlaneGeometry(1, 1);
// 创建纹理加载器
let textureLoader = new THREE.TextureLoader()
// 加载纹理
let texture = textureLoader.load("./texture/watercover/CityNewYork002_COL_VAR1_1K.png")
// 加载ao贴图
let aoTexture = textureLoader.load("./texture/watercover/CityNewYork002_AO_1K.jpg")
// 创建基础材质
let planeMaterial = new THREE.MeshBasicMaterial({
  // 颜色
  color: 0xffffff,
  // 添加纹理贴图
  map: texture,
  // 允许透明
  transparent: true,
  // 添加ao贴图
  aoMap: aoTexture,
})
// 创建网格, 并把几何体和材质放到网格里
const cube = new THREE.Mesh(planeGeometry, planeMaterial);

// 将网格添加到场景中
scene.add(cube);

透明度贴图和光照贴图

alpha贴图是一张灰度纹理，用于控制整个表面的不透明度。（黑色：完全透明；白色：完全不透明）。 默认值为null。

// 加载透明度贴图
let alphaTexture = textureLoader.load("./texture/door/height.jpg");
// 加载光照贴图
let lightTexture = textureLoader.load("./texture/colors.png");
// 创建基础材质
let planeMaterial = new THREE.MeshBasicMaterial({
  // 颜色
  color: 0xffffff,
  // 添加纹理贴图
  map: texture,
  // 允许透明
  transparent: true,
  // 添加ao贴图
  aoMap: aoTexture,
  aoMapIntensity: 1,
  // 透明度贴图
  // alphaMap: alphaTexture,
  // 光照贴图
  lightMap: lightTexture,
});

环境贴图

因为环境贴图是hdr格式，需要hdr加载器

导入hdr加载器import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";

// 创建hdr加载器
let rgbeLoader = new RGBELoader()
// 加载环境贴图
rgbeLoader.load("./texture/Alex_Hart-Nature_Lab_Bones_2k.hdr",(envMap)=>{
  // 设置球形贴图
  envMap.mapping = THREE.EquirectangularReflectionMapping
  // 设置场景贴图
  scene.environment = envMap
  scene.background = envMap
  // 给材质单独添加环境贴图，可以实现反射
  planeMaterial.envMap = envMap
})

高光贴图

// 加载高光贴图
let specularMap = textureLoader.load("./texture/watercover/CityNewYork002_GLOSS_1K.jpg")
// 创建基础材质
let planeMaterial = new THREE.MeshBasicMaterial({
  // 颜色
  color: 0xffffff,
  // 添加纹理贴图
  map: texture,
  // 允许透明
  transparent: true,
  // 添加ao贴图
  aoMap: aoTexture,
  aoMapIntensity: 1,
  // 透明度贴图
  // alphaMap: alphaTexture,
  // 光照贴图
  lightMap: lightTexture,
  // 高光贴图
  specularMap
});