灯光

营造鬼屋氛围，先调整环境光和月光颜色(平行光)，再设置点光源相关。

const ambientLight = new THREE.AmbientLight("#b9d5ff", 0.12);
const moonLight = new THREE.DirectionalLight("#b9d5ff", 0.12);

创建门灯

在鬼屋门的顶部添加点光源：

// Door Light
const doorLight = new THREE.PointLight("#ff7d46", 1, 7);
doorLight.position.set(0, 2.2, 2.7);
house.add(doorLight);

添加烟雾

雾

Fog( color : Integer, near : Float, far : Float )
颜色参数传入Color构造函数中，来设置颜色属性。颜色可以是一个十六进制的整型数，或者是CSS风格的字符串。三个参数分别为：雾的颜色、开始应用雾的最小距离、应用雾的最大距离

// Fog
// 创建烟雾
const fog = new THREE.Fog("#262837", 1, 15);
// 设置场景的fog属性
scene.fog = fog;

同时，设置把渲染器背景颜色与烟雾颜色一样，这样场景边缘看起来就不会太突兀：

renderer.setClearColor('#262837')

设置纹理

首先创建纹理加载器：

const textureLoader = new THREE.TextureLoader();

大门纹理

首先加载所有关于门的纹理：

const doorColorTexture = textureLoader.load("./img/door/color.jpg");
const doorAlphaTexture = textureLoader.load("./img/door/alpha.jpg");
const doorAmbientOcclusionTexture = textureLoader.load(
  "./img/door/ambientOcclusion.jpg"
);
const doorHeightTexture = textureLoader.load("./img/door/height.jpg");
const doorNormalTexture = textureLoader.load("./img/door/normal.jpg");
const doorMetalnessTexture = textureLoader.load(
  "./img/door/metalness.jpg"
);
const doorRoughnessTexture = textureLoader.load(
  "./img/door/roughness.jpg"
);

修改门的材质不再为单一颜色：

// Door
const door = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(2.2, 2.2, 100, 100),
  // new THREE.MeshStandardMaterial({ color: "#aa7b7b" })
  new THREE.MeshStandardMaterial({
    map: doorColorTexture,
    transparent: true,
    // 想使用alphaMap贴图，必须添加transparent属性为true
    alphaMap: doorAlphaTexture,
    // 想使用aoMap，必须添加uv2属性
    aoMap: doorAmbientOcclusionTexture,
    // 设置displacementMap记得提供更多顶点给几何体
    displacementMap: doorHeightTexture,
    displacementScale: 0.1,
    normalMap: doorNormalTexture,
    metalnessMap: doorMetalnessTexture,
    roughnessMap: doorRoughnessTexture,
  })
);
door.geometry.setAttribute(
  "uv2",
  new THREE.Float32BufferAttribute(door.geometry.attributes.uv.array, 2)
);

注意：
1、想使用alphaMap贴图，必须添加transparent属性为true；
2、想使用aoMap，必须添加uv2属性；
3、设置displacementMap记得提供更多顶点给几何体；

墙壁砖块

首先加载墙面砖块相关纹理：

const brickColorTexture = textureLoader.load('/textures/bricks/color.jpg')
const brickAmbientOcclusionTexture = textureLoader.load(
  '/textures/bricks/ambientOcclusion.jpg'
)
const brickNormalTexture = textureLoader.load('/textures/bricks/normal.jpg')
const brickRoughnessTexture = textureLoader.load(
  '/textures/bricks/roughness.jpg'
)

设置墙体材质：

const walls = new THREE.Mesh(
  new THREE.BoxBufferGeometry(4, 2.5, 4),
  // new THREE.MeshStandardMaterial({ color: "#ac8e82" })
  new THREE.MeshStandardMaterial({
    map: bricksColorTexture,
    aoMap: bricksAmbientOcclusionTexture,
    normalMap: bricksNormalTexture,
    roughnessMap: bricksRoughnessTexture,
  })
);
walls.geometry.setAttribute(
  "uv2",
  new THREE.Float32BufferAttribute(walls.geometry.attributes.uv.array, 2)
);

幽灵漂浮效果以及阴影效果我们下一篇再来讨论（￣︶￣）↗　

Three.js(19)——Haunted House(2)

灯光

创建门灯

添加烟雾

雾

设置纹理

大门纹理

墙壁砖块