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

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

前提知识

基础

js教程：www.w3school.com.cn/js/index.as…

html教程：www.w3school.com.cn/html/index.…

css教程：www.w3school.com.cn/css/index.a…

vue2教程：cn.vuejs.org/index.html

vue-element-admin教程：panjiachen.github.io/vue-element…

Threejs

官网文档：wjceo.com/three.js/do…

案例：www.wjceo.com/blog/threej…

模型网站：sketchfab.com/3d-models/c…

工具

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

安装cnpm

npm install -g cnpm --registry=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/map",
    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：想要此项目demo请添加wx：z13964122832