用Three.js构建三维世界的房子

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

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

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

最近在学习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");
  tex