three.js+vue随手练习——2

第一步创建vue项目，这里也不多做赘述，大家可以根据自己实际需求来创建，项目创建完成之后，需要安装three.js到项目。注意，部分three版本可能有兼容问题，我这边安装的是

"three": "^0.128.0",

"three-orbitcontrols": "^2.110.3",

依赖安装完毕之后，运行一下项目，如果没有报错的话，恭喜你，准备工作已经做完啦，接下来开始复制粘贴

随便写了一个首页，凑合用

 先做个最简单的模型展示

 好了，话不多说，上代码，里面有我做的注释，应该比较直观

<template>

  <div>

    <canvas id="tyd"></canvas>

  </div>

</template>

<script>

import * as THREE from "three";

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

import { RGBELoad