材质

MeshBasicMaterial

基础材质。

纹理加载器

TextureLoader

const textureLoader = new THREE.TextureLoader();
const theTexture = textureLoader.load('纹理图片路径');

将纹理应用到材质

new THREE.MeshBasicMaterial({
  map: theTexture
})

设置材质

• 设置中心, theTexture.center.set(0.5,0.5)
• 旋转, theTexture.rotation = Math.PI / 4;
• 平移, theTexture.offset.set(0.5, 0.5);
• 某轴平移, theTexture.offset.x = 0.5;
• 设置重复, theTexture.repeat.set(2,3);
• 设置重复模式(无限), theTexture.wrapS = THREE.RepeatWrapping;
• 设置重复模式(镜像), theTexture.wrapT = THREE.MirroredReeatWrapping;

贴图

单张加载

• 加载进度, theTexture.onProgress = ()=>{}
• 加载完成, theTexture.onLoad = () => {}

以事件对象的方式加载

const event = {};

event.onLoad = e => {};

const theTexture = textureLoader.load(
  "贴图路径",
  event.onLoad,
)

环境贴图

物体上显示出环境的景象的贴图。

const envMapTexture = new THREE.CubeTextureLoader().load(['六张环境贴图的路径']);

const material = new THREE.MeshStandardMaterial({
  metalness: 0.7,
  roughness: 0.1,
  envMap: envMapTexture
})

场景贴图

给环境背景

// 给场景添加背景
scene.background = envMapTexture;
// 给场景所有物体添加环境贴图
scene.environment = envMapTexture;

RGBELoader

用于加载背景贴图。

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";

// 加载hdr环境图
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("路径").then(texture=>{
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
});