Three.js实战项目 智慧城市(一)

概述

如有不明白的可以加QQ：2781128388
实景版源码连接： https://mbd.pub/o/bread/Y5uUmZ9v
科技版源码连接： https://mbd.pub/o/bread/Y5uck5Zr
在网上苦苦找寻很久都很难找到一篇详细讲解使用Three.js开发智慧城市的文章，为此专门做一个智慧城市得项目，先来看看效果

智慧城市项目录制视频

科技风版本：

智慧城市二期视频

搭建开发环境

使用的开发框架是vue-cli3.0，报表使用echarts, webgl使用three.js，开发工具为vscode
搭建完成后的目录为

搭建three场景

1. 创建一个class，用来初始化场景，渲染器，相机，灯光，控制器

import * as THREE from 'three'
import {
  OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js';
import {
  OBJLoader
} from 'three/examples/jsm/loaders/OBJLoader';
import {
  MTLLoader
} from 'three/examples/jsm/loaders/MTLLoader';

export default class ZThree {
  constructor(id) {
    this.id = id;
    this.el = document.getElementById(id);
  }

  // 初始化场景
  initThree() {
    let _this = this;
    let width = this.el.offsetWidth;
    let height = this.el.offsetHeight;
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 3000)
    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true
    })
    this.renderer.setPixelRatio(window.devicePixelRatio)
    this.renderer.setSize(width, height)
    this.el.append(this.renderer.domElement)
    this.renderer.setClearColor('#000')

    window.addEventListener('resize', function () {
      _this.camera.aspect = _this.el.offsetWidth / _this.el.offsetWidth;
      _this.camera.updateProjectionMatrix();
      _this.renderer.setSize(_this.el.offsetWidth, _this.el.offsetWidth);
    }, false)
  }

  // 初始化helper
  initHelper() {
    this.scene.add(new THREE.AxesHelper(100))
  }

  // 初始化控制器
  initOrbitControls() {
    let controls = new OrbitControls(this.camera, this.renderer.domElement)
    controls.enableDamping = true
    controls.enableZoom = true
    controls.autoRotate = false
    controls.autoRotateSpeed = 0.3
    controls.enablePan = true
    this.controls = controls
  }

  initLight() {
    let directionalLight = new THREE.DirectionalLight('#fff')
    directionalLight.position.set(30, 30, 30).normalize()
    this.scene.add(directionalLight)
    let ambientLight = new THREE.AmbientLight('#fff', 0.3)
    this.scene.add(ambientLight)
    return {
      directionalLight,
      ambientLight
    }
  }
}

2. 在vue文件中调用此类初始化three

<template>
  <div id="box" class="container"></div>
</template>

<script>
import ZThree from "@/three/ZThree";
import * as THREE from "three";

let app, camera, scene, renderer, controls, clock, cityModel;

export default {
  name: "Home",
  components: {},
  methods: {
    async initZThree() {
      app = new ZThree("box");
      app.initThree();
      app.initHelper();
      app.initOrbitControls();
      app.initLight();
      window.app = app;
      camera = app.camera;
      scene = app.scene;
      renderer = app.renderer;
      controls = app.controls;
      clock = new THREE.Clock();
      camera.position.set(30, 30, 30);
    },
  },
  mounted() {
    this.initZThree();
  },
};
</script>

<style lang='less' scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
}
</style>

此时我们可以看到的场景是，如果能够看到坐标轴辅助线，代表我们的场景已经加载成功

此时我们已经成功创建了three的场景，接下来我们开始加载模型，天空盒等更加好玩的东西~
智慧城市(二): 地址