three.js中加载ply格式的文件，并使用tween.js插件按照json姿态文件运动

先贴一下文件地址：

aa.ply 文件： https://download.csdn.net/download/yinge0508/89595650?spm=1001.2014.3001.5501

 new.json

https://download.csdn.net/download/yinge0508/89595641?spm=1001.2014.3001.5501

代码:

<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div id="threejs"></div>
          <button @click="iterateArray" style="position:fixed;top:0;right:0;">开始动画</button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>s
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";
import TWEEN from "@tweenjs/tween.js";
import jsonData from "@/assets/new.json";
export default {
  data() {
    return {
      scene: null,
      mesh: null,
      camera: null,
      renderer: null,
      res1: null,
      res2: null,
      index: 0,
    };
  },
  created() {},
  mounted() {
    this.name = this.$route.query.name;
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    init() {
      // 场景
      this.scene = new this.$three.Scene();

      const spotLight = new this.$three.AmbientLight(0xffffff, 10);
      this.scene.add(spotLight);

      const spotLight1 = new this.$three.SpotLight(0xffffff, 1);
      // 设置聚光源位置
      spotLight1.position.set(1000, 1000, 1000);
      // 设置聚光源指向的目标位置
      this.scene.add(spotLight1);
      const axesHelper = new this.$three.AxesHelper(1000);
      this.scene.add(axesHelper);
      const material = new this.$three.MeshBasicMaterial({
        color: 0x00aadd,
        side: this.$three.DoubleSide,
      });
      // 相机
      this.camera = new this.$three.PerspectiveCamera(60, 1, 0.01, 2000);
      this.camera.position.set(1000, 1000, 1000);
      this.camera.lookAt(0, 0, 0);
      const loader = new PLYLoader();
      loader.load(
        "/models/aa.ply", // URL of the PLY file
        (object) => {
          // 4, 创建网格模型对象
          this.mesh = new this.$three.Mesh(object, material);
          this.scene.add(this.mesh);
          this.renderer.render(this.scene, this.camera);
          // Called when the loading is completed
        },
        (xhr) => {
          // Optional progress callback
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        (error) => {
          // Optional error callback
          console.error("An error happened", error);
        }
      );

      this.renderer = new this.$three.WebGLRenderer();
      // this.renderer.setClearColor(0xffffff, 0.4); //设置背景颜色和透明度
      this.renderer.setSize(2000, 1200);
      this.renderer.render(this.scene, this.camera);
      window.document
        .getElementById("threejs")
        .appendChild(this.renderer.domElement);
      // 渲染场景
      this.render();
      // 建相机空间轨道控制器对象
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.addEventListener("change", () => {
        this.renderer.render(this.scene, this.camera);
      });
    },
    render() {
      // requestAnimationFrame(this.render);
      this.renderer.render(this.scene, this.camera);
    },

    // 假设这是你的数组

// 这是你想要执行的方法
 processItem(item, index, callback) {
  setTimeout(() => {
    callback(); // 当方法执行完毕后调用回调函数
  }, 2000);
},

// 开始遍历数组
 iterateArray() {
  this.next(); // 开始遍历
},
next() {
    if (this.index < jsonData.length) {
      const item = jsonData[this.index];
      this.processItem(item, this.index, () => {
        this.start();
        this.index++; // 更新索引
        this.next(); // 继续遍历
      });
    } else {
      console.log('All items processed.');
    }
  },


    start() {
      if (jsonData) {
        this.loop();
        if (this.index >= jsonData.length) {
          return;
        }
        let ele1 = JSON.parse(JSON.stringify(jsonData[this.index]));
        let ele = ele1[0].concat(ele1[1]).concat(ele1[2]).concat(ele1[3]);
        const mat4 = new this.$three.Matrix4();
        mat4.elements = ele;
        const tween0 = new TWEEN.Tween(this.camera.position);

        let new_p = JSON.parse(JSON.stringify(this.camera.position));
        const p = new this.$three.Vector3(new_p.x, new_p.y, new_p.z);
        p.applyMatrix4(mat4);
        tween0.to({x: p.x, y: p.y, z: p.z}, 2000).easing(TWEEN.Easing.Quadratic.Out);
        tween0.start()

      }
    },

    loop() {
      TWEEN.update();
      this.renderer.render(this.scene, this.camera);
      window.requestAnimationFrame(this.loop);
    },
  },
};
</script>
<style lang="less" scoped>
.box-card-left {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  .box-right {
    img {
      width: 500px;
      user-select: none;
    }
  }
}
</style>