threejs 加载两个场景_学习Threejs的那些事儿

Threejs---Web端的三维可视化引擎库

• 写在最开始的话

• 从首页例子说起

  • 1 搭建threejs环境

写在最开始的话

    (关心技术内容的小伙伴这一段就跳过吧，是我自己瞎扯了)终于终于，我开始了threejs的学习。回忆过往，这是我自毕业后再次重新开始学习三维可视化方面的相关内容，并且是依托于web进行学习。毕业已将近一年，也近一年没有再碰过三维方面的的内容，心中一直对其十分惦念。由于本人在学校里从事的是计算机视觉中的三维重建方向，因此对于影像，点云等方面的内容进行了深入研究，编程语言学习的是C++以及Winform，.Net那一套C/S端的开发模式。然而毕业后因各种原因，从事了web端的0基础学习与开发。现在自己web端的技术水平不能说达到大牛，但是对web端的开发流程与模式都有了较为深入的了解，能够自己独立的进行web应用的开发。但我心中对于三维开发一直充满着热情。因此，今天在CSDN上开始记录自己threejs学习的点滴路程，一是为了记录自己在学习过程中所遇到的坑，为同样对三维感兴趣的小伙伴提供些参考，更重要的是是为了督促自己学习，为自己提供学习的动力(你们对我的关注就是我最大的动力啦~~，我想看着自己的博客阅读量一天天增加，心里肯定会特别高兴)，避免自己懒惰而拖更，所以我就暂定每周更新一篇吧。
    在本专栏中，我将记录自己的学习的过程，学习资料主要是从根据未雨绸缪，暮志未晚进行，这里面涵盖了大量的threejs案例，我准备挑选自己喜欢的案例进行学习并总结其中遇到的问题，记录自己感兴趣的部分。同时本人在公司从事了较多的vue前端开发，因此我还会记录vue+threejs的开发过程。

从首页例子说起

1 搭建threejs环境

    这里我默认大家都已经对web开发十分了解了，因此只记录我觉得值得记录下的内容。如果有小伙伴有哪些地方不理解，或者觉得我讲的不太清楚，请及时联系我交流解决问题。
    其实threejs的搭建环境很简单，有了代码编辑器之后，那就可以立刻去Github上找到其源码，然后把例子运行起来，跟着例子学习就好了。这里提供上述网址对应的github地址。源代码的结构目录如下所示：
在Build中，以及存在编译好的三个文件，分别为three.js，three.min.js以及three.module.js。刚开始我并不理解这三个文件的具体意义以及使用方法，后来经过摸索，发现了规律，总结如下：

• three.js 该文件主要是应用在一般的html文件中，使用< script >标签进行引入。经过实现发现，使用本地形式的引入，在旋转场景时更快；但在vue项目中使用后，旋转场景时明显感觉到不如前者顺畅。

• three.min.js 打开该文件，与three.js进行对比，可以发现前者更像后者的压缩版，可能正因如此，才命名为“min”吧。回想其他js库，也都可以发现这样的命名方式。所以在html中引入时，使用这两者是都可以的。

• three.module.js 这个文件顾名思义是模块化的库文件，适用于es6的语法。从例子中你可以看到这个文件的使用方法。

可气的是，后来找到了threejs中文网