一、概述

        最近在调研组内3D机房可视化的实现，之前和大家分享过three.js的入门操作，通过three.js我们也能制作模型，但是当我们想制作复杂的模型时，通过three.js来制作的话，就显得繁琐，所以这时候我们一般选择建模软件来制作我们需要的模型，然后通过three.js来操作该模型。本文将从如何选择建模软件、如何加载3D模型和如何操作3D模型三个方面和大家分享。

           demo的效果图如下：

demo效果图

二、选择建模软件

      因为我们不是专业的建模人员，只是为了实现功能制作自己需要的模型，选择软件时要求满足自己工作需要的同时，容易上手也是一个重要的参考条件。

      本文将介绍三种常见的建模软件：SkethUp、Rhino和Blender。

       SketchUp

        SketchUp是我调研的第一款软件，优点是简单易用，非常容易上手。通过简单的推拉就可以制作一个立方体，面的切割等操作都很方便，可以说是拿来即用。但是缺点也很明显，支持导出的模型格式很少，做出来的模型渲染也不够细致，给人很粗糙的感觉。下面是SketchUp的操作界面。

SketchUp 操作界面

        Rhino

        相对SketchUp，Rhino软件各方面都专业很多，Rhino是由美国Robert McNeel公司于1998年推出的一款基于NURBS为主三维建模软件也叫犀牛软件。相对于SketchUp，Rhino渲染出的模型更精细，对于曲面等的绘制功能更全面，支持导出的模型格式也更多，当然入门的门槛也相对较高，但是关于Rhino入门视频资料很多，足够自学后完成常用的模型。除此之外Rhion软件运行时较耗内存，电脑性能不好的话，体验较差，视频教学可参考：http://www.xuexiniu.com/kc/70/

        操作界面如下：

Rhino操作界面

            Blender

             在调研过程中，本来已经决定选择Rhino作为研发过程中的建模软件，但是在尝试导出glb格式的模型时，发现犀牛不支持，并且找不到合适的插件去实现，这是我发现了Blender这个软件，这个软件有犀牛的所有优点，同时该软件是开源的，各种插件较全面，扩展性很好，软件相较犀牛也更小，即使电脑性能差，也不会特别卡，当然该软件的入门门槛和犀牛差不多，初次接触的话会感觉Blender的操作界面有点儿不习惯，多使用几次就会适应。唯一缺点是教学资料相较于Rhino要少一些，视频教学可参考：https://tutorial.blendercn.org/?p=3782

操作界面：

Blender操作界面

            大家可以根据自己实际项目需要选择软件，我最终选择了Blender作为研发过程中的建模软件。

三、加载3D模型

        目前，3D模型的格式有成千上万种选择，但每一种格式都具有不同的目的、用途以及复杂性。Three.js也提供了丰富的模型加载器，大家可以根据项目需要选择合适的模型格式，我选择的是glb格式的模型，本文也主要向大家分享该模型的加载与操作方式。

1、引用模型加载器

        很简单，就是引入对应的js文件，具体的文件大家可以到github上自己下载。不同的代码引入方式不同，实现代码如下，可以根据自己需要选择：

2、加载模型

        加载模型也很简单，不同的加载器有不同的语法，对应去网上搜一下就可以知道，这里展示的是glb格式的模型加载，代码如下：

             唯一需要注意的是浏览器不能直接引入外部文件，可以将模型文件放到服务器上或者自己本地搭建简单的服务。

四、操作模型

        通过Three.js操作模型的方式也有很多，但是资料相对都很少，我选择THREE.Raycaster（射线检测）方式操作模型。

        原理是THREE.Raycaster对象从屏幕上的点击位置向场景中发射一束光线。光线穿过的模型即为选中的模型，会返回一个模型数组，数组元素按距离排序，距离越近越靠前，数组的第一个模型，即为距离最近的模型。

方法讲解：

    1、Raycaster(origin, direction, near, far)

    参数：

    origin – 射线起点向量

    direction – 射线的方向向量

    near – 所有返回结果应该比near远，near不能为负，默认为0

    far – 所有返回结果应该比far近，默认值为无穷大

    2、 setFromCamera(cords,camera)

    参数：

    coords – 鼠标的二维坐标

    camera – 射线起点处相机，即把射线起点设置在该相机位置处

    3、intersectObject(object,recursive, optionalTarget)

    参数：

    object - 检测与射线相交的物体

    recursive - 若为 true 则检查后代对象，默认值为false

    optionalTarget - （可选参数）用来设置方法返回的设置结果。若不设置则返回一个实例化的数组。如果设置，必须在每次调用之前清除这个数组（例如，array.length= 0;)

    主要代码：

       需要注意的是，导入模型时需要在回调函数中打印一下加载进来的模型是什么对象，模型对象有可能是Mesh或者Group，不排除还有Scene、Object3D等，此时我们不能盲目的把整个scene.children中的东西都放到raycaster.intersectObjects()来直接进行检测，因为整个scene.children中可能有一些scene或者是three.js不能识别的对象，所以我们需要先对加载进来的对象进行处理。

五、总结

       俗话说万事开头难，以上分享的内容每一步都不难，但是在找资料和整理资料这个过程中是需要耗费大量时间的，尤其是three.js相关资料相对较少，希望本篇分享更够帮助你在学习3D可视化项目入门阶段少走弯路，节约时间。