摘要
这是我第一次记录工作，主要用于自己强化记忆用，我的前端技术基本都是跟着B站以及官方文档自学的，js断断续续学习了有七八个月了，事实上日常的工作是非常繁琐的，真正能认真学习的时间十分零散，而课题需要我来做这一部分的内容，我也是咬着牙答应了下来，连干带学十分的辛苦，这次之所以记录是因为渐渐地有一些入门了，随着学习内容的增多，一些东西不记录一下恐怕会忘记，这个系列记录一下四个内容：
- 在vue框架下如何应用three.js；
- 建立第一个three.js模型；
- 使用OrbitControls实现鼠标控制摄像头移动；
- 通过DOM+CSS的方式将数据展示在模型指定位置上。
四项内容所需要完成的需求是建立一个浮盘模型，同时将浮盘东南西北四个方向的倾角展示在模型的固定方向上，如图所示，写到这里发现markdown我都不会用，还需要阅读一下markdown相关文档，本篇主要介绍第一第二个内容。
1、在vue框架下引入three.js
1、在cmd窗口输入npm install three安装threejs插件。
2、threejs安装成功后，就可以在vue组件中使用了，首先需要在组件中引入threejs，在<script>内输入：
import * as Three from "three";
此时three已经被成功引入vue组件中，可以在标间中建立模型了。
2、在组件下建立模型
-
首先建立一个模型容器,用于承载模型。
<div id="container"></div> -
在methods中建立函数
init(){} -
获取模型元素容器，于div建立关联
let container = document.getElementById("container"); -
构建场景
let scene = new Three.Scene(); -
构建相机 参数说明：视野75度 长宽比，近平面裁剪0.1，远平面裁剪1000
let camera = new Three.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000); -
构建渲染器并设置宽高以及背景颜色
let renderer = new Three.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setClearColor(12178431, 1);
- 此时模型的场景已经建立完成了，接下来建立一个模型，一个模型包括模型的集合图形（点和面组成）以及他的材质、颜色，此处需要建立一个浮盘，即一个简单地圆柱体，同时选择金属材质，颜色为灰色。
let dash = new Three.CylinderGeometry(5, 5, 0.2, 200, 10, false, 10, 10);
let material = new Three.MeshPhongMaterial({
color: 11184810,
specular: 16777215,
shininess: 1000
});
dash为模型的集合图形，material是他的材质以及颜色，这两项建立好后，需要把数据集构建好。定义一个cube 应用Three.Mesh将两者组合成一个数据集，添加并定位在场景的（0,0,0）中，
let cube = new Three.Mesh(dash, material);
cube.position.set(0, 0, 0)
scene.add(cube);
- 此时在场景中是什么都看不到的，这是因为还没有添加灯光，这个项目添加了两种灯光，一种是场景环境光（背景光），还有一种是模拟阳光的扩散光
// 增加灯光
let light = new Three.PointLight(16777215, 2, 100);
light.position.set(0, 1.1, 2);
// 添加灯光到场景
scene.add(light);
//环境光
var ambient = new Three.AmbientLight(4473924);
scene.add(ambient);
- 渲染器将模型以及设定好的元素添加到页面容器中
container.appendChild(renderer.domElement);
- 此时模型就已经建立好了，接下来需要展示在DOM中，我们在钩子函数中调用init()函数，就已经完成了！
mounted() {
this.init();
},
