BufferGeometry设置顶点创建矩形

const geometry = new THREE.BufferGeometry();

const vertices = new Float32Array( [
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,

     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0, -1.0,  1.0
] );

geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );

scene.add(mesh)

初识材质与纹理

const texture = new THREE.TextureLoader()

const doorTexture = texture.load( './textures/door/color.jpg')

const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    map: doorTexture 
});

纹理偏移、旋转、重复

// doorTexture.offset.x = 0.5
doorTexture.offset.set(0.5, 0.5)

doorTexture.center.set(0.5,0.5)
doorTexture.rotation = Math.PI / 4

doorTexture.wrapS = THREE.MirroredRepeatWrapping
doorTexture.wrapT = THREE.RepeatWrapping
doorTexture.repeat.set(2,3)

设置纹理显示算法与mipmap

const mic = texture.load('./textures/minecraft.png')

mic.magFilter = THREE.NearestFilter
mic.minFilter = THREE.NearestFilter

透明材质与透明纹理

const doorAplha = texture.load('./textures/door/alpha.jpg')

const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    map: doorTexture,
    alphaMap: doorAplha,
    transparent: true,
    side: THREE.DoubleSide
});

const plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(1, 1),
    material
)
plane.position.x = 1

scene.add(plane);

环境遮挡贴图与强度

const doorAo  = texture.load('./textures/door/ambientOcclusion.jpg')

const material = new THREE.MeshBasicMaterial({
    color: 0xffff00,
    map: doorTexture,
    alphaMap: doorAplha,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAo,
    // aoMapIntensity: 1
});

// 设置第二组uv 
const planeGeometry = new THREE.PlaneBufferGeometry(1, 1)

planeGeometry.setAttribute('uv2', new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2))

标准网格材质与光照物理效果

const material = new THREE.MeshStandardMaterial({
    color: 0xffff00,
    map: doorTexture,
    alphaMap: doorAplha,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAo,
    // aoMapIntensity: 1
});

// 环境光
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);

// 直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10)
scene.add(directionalLight);

置换贴图与顶点细分设置

const doorHeight = texture.load('./textures/door/height.jpg')

const material = new THREE.MeshStandardMaterial({
    color: 0xffff00,
    map: doorTexture,
    alphaMap: doorAplha,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAo,
    // aoMapIntensity: 1
    displacementMap: doorHeight,
    displacementScale: 0.05
}); 

const planeGeometry = new THREE.PlaneBufferGeometry(1, 1, 200, 200)

设置粗糙度与粗糙度贴图

const roughnessTexture = texture.load('./textures/door/roughness.jpg')

const material = new THREE.MeshStandardMaterial({
    color: 0xffff00,
    map: doorTexture,
    alphaMap: doorAplha,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAo,
    // aoMapIntensity: 1
    displacementMap: doorHeight,
    displacementScale: 0.05,
    roughness: 1,
    roughnessMap: roughnessTexture
});

设置金属度与金属贴图

const metalnessTexture = texture.load('./textures/door/metalness.jpg')

const material = new THREE.MeshStandardMaterial({
    color: 0xffff00,
    map: doorTexture,
    alphaMap: doorAplha,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAo,
    // aoMapIntensity: 1 
    displacementMap: doorHeight,
    displacementScale: 0.05,
    roughness: 1,
    roughnessMap: roughnessTexture,
    metalness: 0
});

法线贴图应用

const normalTexture = texture.load('./textures/door/normal.jpg')

const material = new THREE.MeshStandardMaterial({
    color: 0xffff00,
    map: doorTexture,
    alphaMap: doorAplha,
    transparent: true,
    side: THREE.DoubleSide,
    aoMap: doorAo,
    // aoMapIntensity: 1 
    displacementMap: doorHeight,
    displacementScale: 0.05,
    roughness: 1,
    roughnessMap: roughnessTexture,
    metalness: 1,
    metalnessMap: metalnessTexture,
    normalMap: normalTexture
});

纹理加载进度情况

const manager = new THREE.LoadingManager();

manager.onLoad = function ( ) {
    console.log( 'Loading complete!');
};

manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
    console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};

const texture = new THREE.TextureLoader(manager)

环境贴图

const envMapTexture = new THREE.CubeTextureLoader()
    .setPath('./textures/environmentMaps/0/')
    .load([
        'px.jpg',
        'nx.jpg',
        'py.jpg',
        'ny.jpg',
        'pz.jpg',
        'nz.jpg'
    ]);

scene.background = envMapTexture
scene.environment = envMapTexture

const geo = new THREE.SphereGeometry(1, 20, 20);
const mat = new THREE.MeshStandardMaterial({
    metalness: 0.7,
    roughness: 0.1,
    envMap: envMapTexture
});

经纬线映射贴图

import {
    RGBELoader
} from 'three/examples/jsm/loaders/RGBELoader'

const rgbeLoader = new RGBELoader()

rgbeLoader.loadAsync('./textures/hdr/002.hdr').then(texture => {
    texture.mapping = THREE.EquirectangularReflectionMapping
    scene.background = texture
    scene.environment = texture
})