先贴一下文件地址:
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>