从零开始搭建开源智慧城市项目（一）

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案，实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下，直接查看和操作3D模型，极大地提升了数据可视化的效果和用户交互体验。

本篇文章是从零开始仿写一个智慧城市系列文章的第一篇，这一篇主要实现一下项目的初始化，添加一下Three场景的三大组件：场景（scene）、相机（camera）和渲染器（renderer），加一个控制器可以通关鼠标控制移动场景，把模型数据加载到场景里面。

初始化项目

初始化项目 然后创建一个scens的vue文件 创建一个div

然后引入three模块 ,然后引入这次需要的几个文件

初始化Three三要素

场景： three中创建场景只需要new一个THREE.Scene就行了

相机： 相机在three中分成透视相机和正投影相机 这里用的是透视相机PerspectiveCamera

渲染器： 渲染器决定了渲染的结果应该画在元素的什么元素上面，这里采用的是WebGLRenderer

加载场景控制器并导入模型，添加光照

模型控制器： 只需要创建一个OrbitControls并且把相机和渲染器中绑定的Dom元素传进去就行

导入模型： 导入模型需要实例化一个GLTFLoader,然后调用lod方法，把模型地址加进去，然后把数据加载到scene中

加载光照： 现在模型已经能显示在场景里面了但是没有光照 现在需要加一下光照

效果图

完整代码

最后

这是第一篇创建场景，接下几篇会介绍添加自定义材质，后处理实现模型材质替换，辉光效果，流动线，扫描线，扩散效果等使其看起来炫酷一些，并争取通过多种方式实现以上效果，添加天空盒并解决天空盒和后处理冲突问题。