全屋三维交互漫游——three.js实现

〇、介绍

把我家大体毛坯结构用3dsmax建了一个模型，然后在软件里稍微做了区域规划和家具建模和放置。然后嫌max的漫游功能太卡，正好又接触了three.js，所以就放到我的网上做一个交互漫游。。。

一、建模

屁颠屁颠地量好了房，又吭哧吭哧地画好了CAD，然后用3dsmax累觉不爱地建好模之后，导出成obj模型，得到多个obj文件和mtl材质文件。

建模过程

为了后面网页的加载速度，分成多个模型导出，同个模型的obj和mtl文件同名。(如door.obj/door.mtl, main.obj/main.mtl, ...)

可能我和专业设计师相差的也就是N个材质库、模型库、贴图库...（#滑稽）

建模结果

二、程序

three.js程序如同八股文：创建各种对象然后进入渲染循环。

主函数如下：

//建立场景，包括相机、渲染器
createScene();
//建立灯光
createLights();
//建立模型
createModel(modelList);
//建立控制器
createControl();
//建立辅助性对象
createItem();
//建立事件关联
createListener();
//渲染相机里场景
render();

1、创建基本场景、灯光

（待解决的问题：灯光没有在模型上产生阴影，我的castShadow和receiveShadow都设置为true