Three+vue的项目启动【从0开始到秋招就业1】

前言

        前一段时间把openlayers+geoserver+postgis的项目细节完善了一下上传到了github，之后又把webgl的底层复习了一下，做了一个小案例（过段时间再发出来），算是把编程指南那本书做了一个总结吧。之后投了一些简历，（webgl可视化方向）面试后发现大多都是需要有应用能力，也就是要学习一下cesium或者three。本篇博客是想从0开始做一个three+vue的项目，为了秋招做准备。这两个项目其实就是gis开发的两个方向，一个偏向空间数据库（postgis），关注数据库索引，空间关系，优化等等，另一个则是偏向可视化，关注webgl的底层知识，图形学这些。好了，就说到这里吧，下面就开始进行项目搭建。

项目搭建

        我使用的是vite创建vue项目，之后再用npm安装three.js包即可

npm create vite@latest

npm install three

npm run dev   //启动项目

然后把App.vue中不相关的代码都删除，在script中引入three

import * as THREE from 'three'

three中实现简单的可视化需要三个要素：scene(场景) 、camera（相机）、renderer（渲染器）

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.z = 5;

const renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

之后向场景中添加几何体需要进行定义以及设置材质

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

最后写一个动画让几何体动起来

function animate() {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render( scene, camera );
}

animate();

成果：

 就是一个会旋转的立方体

总结

        之后就准备一点一点的加入一些功能，目前计划是做一个“大杂烩”，主要就是使用一下three的API配合vue做一个简单的项目。