前言
在网上找了很久都没有找到使用Three.js开发智慧城市的免费文章或者免费视频,自己花了一点时间做了一个纯前端的智慧城市项目。
技术栈都是最新的:vue3+vite+typeScript+Three+antv G2

源码分享 源码
模型,天空图盒子链接分享(不想下载源码可以只用下这个)提取码1234

智慧城市项目的录制视频

开发各种框架的版本 开发工具为vscode

"vue": "^3.2.47"
"@antv/g2plot": "^2.4.29",
"typescript": "^5.0.2",
"vite": "^4.3.0",
"@types/three": "^0.150.2",

搭建three场景
1.引入three,先初始化场景,相机,渲染器,光线,轨道控制器
先打印一下three 看一下有没有输出,然后在搭建场景等…

<template>
  <div class="container" id="container"></div>
</tempalte>
<script lang="ts" setup>
let scene = null as any,//场景
camera = null as any,//相机
renderer = null as any,//渲染器
controls = null as any//轨道控制器
import {onMounted, reactive } from 'vue';
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
//设置three的方法
const render = async () =>{
  //1.创建场景
  scene = new THREE.Scene();
  //2.创建相机
  camera = new THREE.PerspectiveCamera(105,window.innerWidth/window.innerHeight,0.1,1000);
  //3.设置相机位置
  camera.position.set(0,0,4);
  scene.add(camera);
  //4.建立3个坐标轴
  const axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);
  
  //6.设置环境光，要不然模型没有颜色
  let ambientLight = new THREE.AmbientLight(); //设置环境光
  scene.add(ambientLight); //将环境光添加到场景中
  let pointLight = new THREE.PointLight();
  pointLight.position.set(200, 200, 200); //设置点光源位置
  scene.add(pointLight); //将点光源添加至场景


  //7.初始化渲染器
  //渲染器透明
  renderer = new THREE.WebGLRenderer({
    alpha:true,//渲染器透明
    antialias:true,//抗锯齿
    precision:'highp',//着色器开启高精度
  });
  
  //开启HiDPI设置
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  //设置渲染器尺寸大小
  renderer.setClearColor(0x228b22,0.1);
  renderer.setSize(window.innerWidth,window.innerHeight);
  //将webgl渲染的canvas内容添加到div
  let container = document.getElementById('container') as any;
  container.appendChild(renderer.domElement);
  //使用渲染器 通过相机将场景渲染出来
  renderer.render(scene,camera);
  controls = new OrbitControls(camera,renderer.domElement);
}
const animate = () =>{
   requestAnimationFrame(animate);
   renderer.render(scene,camera);
}
onMounted(()=>{
  render()
  animate()
})
</script>
<style scoped>
.container{
  width:100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

现在我们就看到了three坐标轴了,接下来我们开始导入模型和天空图盒子
请看下文链接
第二章