02-项目引入threejs

一、创建项目

1、如果已经建好项目了，可以略过创建这一步

2、初始化项目

①新建一个vue2项目

vue create my-project  // my-project是项目名称

②打开项目的命令窗口，可直接在项目目录的路径栏输入cmd,然后回车

③使用npm安装three,在命令窗口中输入npm install three --force,其中–force是强制安装，避免node版本过高或者过低无法安装的问题

npm install three --force

④安装完成以后如何确定自己的项目中是否安装成功呢，打开项目的package.json文件，看到dependencies对象下是否有three，能看到就说明安装成功了，可以直接使用

二、项目引入

1、我这里是使用了一个组件ThreeJs,在APP中引用了这个组件，在组件中首先定义一个盒子，用来挂载3D盒子

我是先给盒子一个固定的宽高和边框，看的时候比较方便，

<template>
  <div ref="container" id="container"></div>
</template>

<script>
export default {
   
   
  name: 'ThreeJs',
  data() {
   
   
    return {
   
   };
  },
};
</script>

<style scoped>
#container {
   
   
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
</style>

效果如下：什么都没有，只有一个空白的边框盒子

2、避免页面代码太多，我们将编写3D的代码与组件分离开，这里我是专门建立了一个JS文件夹，用来编写代码

1、首先我们需要一个dom用来挂载我们的three，

在Base.js中创建一个类，并且在构造器中获取传入的dom，然后挂载到Vue上，这段代码写在Base.js中

export class ThreeBox {
   
   
  dom = null; // 挂载的 DOM
  // 构造器函数
  constructor(dom) {
   
   
    // 挂载
    this.dom = dom
  }
}

2、然后再我们的组件ThreeJS中，将类引入，然后传入dom节点挂载

<script>
import {
   
    ThreeBox } from './js/Base';
export default {
   
   
  name: 'ThreeJs',
  data() {
   
   
    return {
   
   
      ThreeBox: null,
    };
  },
  mounted() {
   
   
    this.ThreeBox = new ThreeBox(this.$refs.container);
  },
};
</script>```

三、创建渲染器

1、在Base.js文件中，引入渲染器的工作类

import {
   
    WebGLRenderer } from 'three'

2、创建渲染器

在构造函数里面创建

import {
   
    WebGLRenderer