开发之前,我们要做一些基本的工作。
前提知识
基础
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
- 克隆最新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备注“变电站源码”