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 callbackconsole.log((xhr.loaded / xhr.total) * 100 + "% loaded");},(error) => {// Optional error callbackconsole.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>