vue中使用three，绘制3d场景--初始化

完整代码点这里

一，初始化

1，安装依赖（注意项目name不能为three，否则会有冲突）
npm i three --save

2，在需要使用three的组件中引入three

import THREE from "three";

3，初始化
（1）场景scene初始化

this.secen = new THREE.Secen();

（2）相机camera初始化

const aspect = window.innerWidth / window.innerHeight; //宽高可根据实际项目要求更改
this.camera = new THREE.PerspectiveCamera(45, aspect, 1, 2000);//使用最常见的远景相机，类似于人眼观察的方式。
this.camera.position.set(15, 0, 15);
this.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 让相机指向原点
this.secen.add(this.camera);

（3）渲染器render初始化

this.renderer = new THREE.WebGLRenderer();
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);//宽高可根据实际项目要求更改
const container = document.getElementById("container");
container.appendChild(this.renderer.domElement);//把 renderer 元素添加到HTML文档中。这是一个 <canvas> 元素，用来显示场景。

虽然此时已经进行了初始化，但是依然看不到场景，这是因为我们并没有将其真正渲染。
（4）循环渲染

animate() {
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(this.animate);
}

此时，我们发现页面变黑啦。这是他的默认背景色，说明渲染成功啦~欲更改背景可通过修改renderer为以下代码：

this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

此时就是透明的背景啦~
接下来要做的就是将模型加载到场景中。