用Three.js构建三维世界的房子-CSDN博客

本文通过Three.js从创建世界、制作地面到逐步构建房屋的各个部分（地基、侧墙、前面墙、后墙、屋顶），详细介绍了构建三维房屋的过程。最终展示了旋转展示的房屋效果，并提供了代码资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击上方“青年码农”关注

回复“源码”可获取各种资料

文章篇幅会比较长，请耐心看完，但是一定会收货满满。

最近在学习Three.js，无奈不知道从哪里下手，查阅大部分资料都是先介绍渲染器（Renderer）、场景（Scene）、照相机（Camera），其实这些概念确实需要了解，如果不给你立体模型，你始终是无法理解的。网上看了一个大佬（神说要有光）的教程，感觉算是一只脚已经入了门，接下来我们通过这篇文章，从造物主的视角开始创建一个房子。我们先看下最终效果。

1 创造世界

很好理解，就是我们现在看到的世界，用Three.js做出来。效果如下

首先对Three.js还是要了解其一些概念的，这样才能看的更明白。新建一个项目，引入Three.js，网上不好js找没关系，我会在最后提供本篇文章的完整demo。

创建场景

const scene = new THREE.Scene();

创建透视相机

// 获取窗口文档区域的宽度
const width = window.innerWidth;
// 获取窗口文档区域的高度
const height = window.innerHeight;
// 创建透视相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
// 相机位置
camera.position.set(500, 60, 0)
// 相机焦点方向
camera.lookAt(scene.position);

创建渲染器

// 创建WebGL渲染
const renderer = new THREE.WebGLRenderer();
// 设置canvas的大小
renderer.setSize(width, height);
//设置背景颜色
renderer.setClearColor(0xcce0ff, 1);
// 添加到body
document.body.appendChild(renderer.domElement);

渲染相机和场景

renderer.render(scene, camera);
 requestAnimationFrame(render)

场景贴图

let urls = [
     './img/skyBox6/posx.jpg',
     './img/skyBox6/negx.jpg',
    './img/skyBox6/posy.jpg',
    './img/skyBox6/negy.jpg',
    './img/skyBox6/posz.jpg',
    './img/skyBox6/negz.jpg'
];
let cubeTexture = new THREE.CubeTextureLoader().load(urls);
scene.background = cubeTexture;

最终我们会看到上面的一个旋转的世界。

2 创建一个地面

上面的步骤只是创建了全景的世界，但是我们需要有个地面来放置我们之后要创建的房子，因此，这个地面要比较大。

创建

为了方便，我们新建一个方法来创建，后面只需要调用这个方法即可

function createGrass() {
  // 创建一个平面缓冲几何体
  const geometry = new THREE.PlaneGeometry(10000, 10000);
  // 加载草地图片
  const texture = new THREE.TextureLoader().load("img/grass.jpg");
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  // 纹理对象阵列
  texture.repeat.set(100, 100);
  // 基础网格材质
  const grassMaterial = new THREE.MeshBasicMaterial({ map: texture });
  // 网格
  const grass = new THREE.Mesh(geometry, grassMaterial);
  // 旋转
  grass.rotation.x = -0.5 * Math.PI;
  // 添加到场景
  scene.add(grass);
}

效果

3 建房子

我们先说说现实中如何新建房子
1 选一个地方当作地基
2 垒墙（墙面）
3 封顶（房顶）
其实用Threejs也是一样

创建地基（地板）

// 创建地板方法
function createFloor() {