初学ThreeJs 实战项目2：寂静的小屋

一、项目简介

在 3D 图形领域中，Three.js 是一款功能强大的工具。本文将详细介绍如何利用 Three.js 构建一个名为《寂静的小屋》的 3D 项目，该项目融合了多种元素以营造独特的氛围。

在线预览地址

源码地址

效果图：

二、准备工作与资源加载

1. 材质贴图加载

在构建场景前，需加载各类材质贴图以增强场景的真实感。

// 加载砖块贴图
const bricksColorTexture = new THREE.TextureLoader().load(bricksColor);
const bricksAmbientOcclusionTexture = new THREE.TextureLoader().load(bricksAmbientOcclusion);
// 加载门、草地等其他材质贴图的代码类似

三、场景构建

1. 房屋模型构建

// 创建屋子
const createHouse = (screen: THREE.Scene) => {
   
    const house = new THREE.Group();

    // 墙
    const wall = new THREE.Mesh(
        new THREE.BoxGeometry(4, 2.5, 4),
        new THREE.MeshStandardMaterial({
   
            color: "#ac8e82",
            map: bricksColorTexture,
            aoMap: bricksAmbientOcclusionTexture,
            normalMap: bricksNormalTexture,
            roughnessMap: bricksRoughnessTexture
        })
    );
    wall.geometry.setAttribute("uv2", new THREE.Float32BufferAttribute(wall.geometry.attributes.uv.array, 2));
    wall.position.y = wall.geometry.parameters.height / 2;
    wall.castShadow = true;
    house.add(wall);

    // 屋顶
    const roof = new THREE.Mesh(
        new THREE.ConeGeometry(4, 1.5, 4),
        new THREE.MeshStandardMaterial({
   
            color: "#b35f45",
        })
    );
    roof.rotation.y = Math.PI / 4;
    roof.castShadow = true;
    roof.position.y = wall.geometry.parameters.height + roof.geometry.parameters.height / 2;
    house.add(roof);

    // 门
    const door = new THREE.Mesh(
        new THREE.PlaneGeometry(2.25, 2.25),
        new THREE.MeshStandardMaterial({
   
            map: doorColorTexture,
            aoMap: doorAmbientOcclusionTexture,
            aoMapIntensity: