为平面几何体两面添加相同和不同的纹理

1、为平面几何体两面添加相同的纹理

// 创建一个平面几何体
const planeGeometry = new THREE.PlaneGeometry(10, 10, 10)

// 加载并设置纹理
const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('assets/1.jpeg', () => renderer.render(scene, camera))

// 创建一个平面材质
const planeMaterial = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide
}) 

const mesh = new THREE.Mesh(planeGeometry, planeMaterial)
mesh.rotation.x = -0.5 * Math.PI
scene.add(mesh)

// 若用的MeshPhongMaterial材质，必须要添加光才会展示纹理颜色，不然展示的就是黑色
// 添加光照
const light = new THREE.DirectionalLight( 0xffffff );
light1.position.set( 0, 1, 1 ).normalize();
scene.add(light);

2、为平面几何体的两面添加不同的纹理

// 创建一个平面几何体
const planeGeometry1 = new THREE.PlaneGeometry(10, 10, 10) // 第一个面几何体
const planeGeometry2 = new THREE.PlaneGeometry(10, 10, 10) // 第二个面几何体

// 加载并设置纹理
const textureLoader = new THREE.TextureLoader()
const texture1 = textureLoader.load('assets/1.jpeg', () => renderer.render(scene, camera))
const texture2 = textureLoader.load('assets/2.jpeg', () => renderer.render(scene, camera))

// 创建一个平面材质
const planeMaterial1 = new THREE.MeshBasicMaterial({
    map: texture1,
    side: THREE.DoubleSide
}) 
const planeMaterial2 = new THREE.MeshBasicMaterial({
    map: texture2,
    side: THREE.DoubleSide
})

const mesh1 = new THREE.Mesh(planeGeometry1, planeMaterial1)
const mesh2 = new THREE.Mesh(planeGeometry2, planeMaterial2)
scene.add(mesh1)
scene.add(mesh2)

// 若用的MeshPhongMaterial材质，必须要添加光才会展示纹理颜色，不然展示的就是黑色
// 添加光照
const light = new THREE.DirectionalLight( 0xffffff );
light1.position.set( 0, 1, 1 ).normalize();
scene.add(light);

注意：如果用的是感光材质MeshPhongMaterial，将光照位置设置在平面几何体的正面，那么反面没有光照的话，你看到的背面会是黑色，如果需要反面也能看到纹理，则需要在背面添加一个光照