本文主要从以下几个方面进行讲述：

1. 创建没有光照效果的立方体；
2. 扩展lambert材质，创建有光照效果的立方体；

适用人群：对THREE.js和glsl有基本了解的人。

创建没有光照效果的立方体

这两天用 Three.js 画了一个 3D 的房子，放了一个床进去，可以用鼠标和键盘控制移动，有种 3D 游戏的即视感。

这篇文章就来讲下实现原理。

代码地址：https://github.com/QuarkGluonPlasma/threejs-exercize

思路分析

我们先不着急写代码，先来分析下思路。

这样一个房子，其实也是由几个几何体堆起来的：

1、html页面样式

html,body{margin: 0; padding: 0; overflow: hidden}

2、引入js

<script src="../js/three.js"></script>
<script src="./js/jquery.min.js"></script>
//Stats.js性能监控器，主要用于检测动画运行时的帧数
<script src="./js/Stats.js"></script>
//图形界面库,使用这个库可以很容易地创建出能够改变代码变量的界面组件
<script src="./js/dat.gui.js"></script>