three3d切换显示轮播模型

这里提供两个工具一个是fastStone Capture 录视频的 https://ezgif.com/video-to-gif将录制的wmv格式转换gif格式

实现3d切换显示不同模型
这里单单是vue的写法 自己后期可以封装

//首先引入这些文件,当然你得先下载three, npm i three -S
import * as THREE from "three";
import {
    OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import {
    GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import {
    DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import {
    FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
const dataList = [
  {
   
    path: "/3d/小苗-水稻.fbx",
    position: {
    y: -15 },
    offset: -100,
  },
  {
   
    path: "/3d/水稻-拔节.fbx",
    position: {
    y: -25 },//调解上下
    offset: 60,//调解大小近大远小
  },...这里我就不写过多的为了方便观看  首先path 是模型路径放在public/3d下面，这里用的是fbx模型
];
const zoom = 100;//层级
var timer = null;//timerid
var d3fbxRef = null;//dom元素
var my_three = {
   
  scene: null,
  camera: null,
  renderer: null,
  controls: null,
  file: null
};//three的属性，场景相机渲染器等等
var modelList = [];//缓存数据
var list = [];//数据
var oldIndex = null;//切换前的索引
//执行函数初始化
mounted() {
   
  this.init({
    models: dataList, targetDom: this.$refs.d3Ref })
},




//下面是封装的
  methods: {
   
  //初始化传入2个参数，数据必须是数组，dom
    init({
    models, targetDom }) {
   
      d3fbxRef = targetDom;//dom元素
      list = [...models];//数据
      let _this = this;
      (async function init() {
   
        await _this.initScene();//初始化场景
        await _this.initCamera();//初始化相机
        await _this.initModel();//初始化模型
        await _this.initRenderer()//初始化渲染器
        await _this.initControls();//初始化控制器
      })();
    },
    initScene() {
   
      return new Promise((resolve, reject) => {
   
        my_three.scene = new THREE.Scene();