vue3.0页面使用three.js作为背景

1.引入npm包

npm install three --save

2.在three.js中找到需要的特效

three.js模板库

找到喜欢的以后，点击右下角的按钮获取代码

3.进行编辑

这两个script加入到index.html中去

1. 引入需要的模块

在需要加入这个three.js的vue文件中 首先引入文件

import * as THREE from 'three';

这个例子中还需要引入这个Stats，那么修改地址后继续引入

import Stats from 'three/examples/jsm/libs/stats.module.js';

2.加入export

   export default {
        name: 'index'
    };

template里面记得给个容器div

3.将import下方的所有代码 都复制粘贴到 export default的下方

直接粘贴下去就行了，不要加到export的mthods里面
改来改去容易改错，没必要

这两行去掉，在mounted方法中加入，不然会因为找不到dom报错

4.自定义容器

这两行代码就是生成div然后往body中添加 作为canvas容器
…不想说了，自己改吧

5.打包部署后，script丢失

打包以后发现报错了，一看页面发现index.html中的加的两个script没有了，打包以后再往打包文件的index。html里加入这个script标签，显得不合适，就看了一下代码再研究