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

〇、介绍

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

一、建模

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

建模过程

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

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

建模结果

二、程序

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

主函数如下：

1.  
   //建立场景，包括相机、渲染器
2.  
   createScene();
3.  
   //建立灯光
4.  
   createLights();
5.  
   //建立模型
6.  
   createModel(modelList);
7.  
   //建立控制器
8.  
   createControl();
9.  
   //建立辅助性对象
10.  
    createItem();
11.  
    //建立事件关联
12.  
    createListener();
13.  
    //渲染相机里场景
14.  
    render();

1、创建基本场景、灯光

（待解决的问题：灯光没有在模型上产生阴影，我的castShadow和receiveShadow都设置为true了，renderer.shadowMap.enabled也为true了，就是没有阴影，苍天啊这是为毛）

2、加载模型

加载obj模型和mtl文件，具体的方法three.js官方example里面有，就不介绍了。传入的参数modelList是我们前面导出的模型文件名列表。

var modelList = ["main","door","furniture","biped","decorate","other"];

将上述模型全部导入场景中

3、建立控制器

采用第一人称控制器，FirstPersonControls.js这个three.js的扩展库，用户可以通过鼠标改变视线方向，通过WASD移动视点。官方example里面也有。

4、建立辅助性对象和建立事件连接

这一步也都是常规的，添加鼠标移动响应、窗口大小改变响应等。

5、渲染循环

这一步就是控制器的状态更新、让摄影机高度维持在人眼的高度、相交检测等。

说是交互漫游，其实就是指键鼠第一人称视角 对象信息拾取。拾取这一步也是在循环里完成的。intersect()函数，说来也都是long story，这一步的坑也多。（明白之前都叫坑，明白了后都不算）

可以把一些家具的参数写入obj文件中，拾取的时候可以展示这些信息，目前是在对象名中，有userdata之类的功能就好了。

（这到这里，这是个大概流程，细节和关键点都没写 待写 todo）

这篇好文章是转载于：学新通技术网