1、基础工作-vue、threejs环境搭建

开发之前，我们要做一些基本的工作。

前提知识

基础

js教程：https://www.w3school.com.cn/js/index.asp
html教程：https://www.w3school.com.cn/html/index.asp
css教程：https://www.w3school.com.cn/css/index.asp
vue2教程：https://cn.vuejs.org/index.html
vue-element-admin教程：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

Threejs

官网文档：http://wjceo.com/three.js/docs/#manual/zh/introduction/Creating-a-scene
案例：https://www.wjceo.com/blog/threejs/
模型网站：https://sketchfab.com/3d-models/categories/architecture?date=week&features=downloadable&sort_by=-likeCount&cursor=bz01MSZwPTI%3D

工具

3dmax（模型导出）、vue开发环境

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装threejs

1. 克隆最新vue-element-admin项目，执行cnpm install安装项目使用到的类库包
   2. 项目类库全局安装后，cd到项目的根目录下执行cnpm install three --save安装threejs类库
   3. 在具体页面引入相关类库就可以进行接下来的业务功能的开发，如下

import * as THREE from "three"; import { Clock, GridHelper } from "three"; 
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; 
import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js"; 
import dat from "three/examples/jsm/libs/dat.gui.module"; 
import Stats from "three/examples/jsm/libs/stats.module"; 
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js"; 
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js"; 
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; 
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader'; 
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'; 
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'; 
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'; 
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';

准备智慧变电站业务页面相关配置
1. 创建以下目录承重变电站页面的相关代码
threejs-web
public
zhangyan-substation
models（存放3d模型文件）
video（存放视频文件）
src
views
zhangyan
substation
components（封装的组件）
images（图片文件）
styles（样式文件）
index.vue（具体页面）
2. 在router添加变电站业务页面的路由，修改如下
src/router/index.js

import BSCLayout from '@/layout/bsc';  // 自己写的一个大屏容器
{
    path: "/zhangyan",
    component: BSCLayout,
    redirect: "/zhangyan/substation",
    alwaysShow: true, // will always show the root menu
    name: "Zhangyan",
    meta: {
      title: "Zhangyan",
      icon: "lock",
      roles: ["admin", "editor"] // you can set roles in root nav
    },
    children: [
      {
        path: "substation",
        component: () => import("@/views/zhangyan/substation"),
        name: "Substation",
        meta: {
          title: "substation",
          roles: ["admin", "editor"] // or you can only set roles in sub nav
        }
      },
    ]
  },
}

src/layout/bsc.vue

<template>
  <div class="app-wrapper">
    <router-view />
  </div>
</template>

<script>
  export default {
    name: 'BSCLayout',
    methods: {}
  };
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  @import "~@/styles/variables.scss";
  
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
  }
</style>

好了，到了这一步骤，就可以来编写智慧变电站的具体3d功能了
PS：项目源码及3d模型会在第三篇文章给出下载地址，或者添加wx：z13964122832备注“变电站源码”