|
|
@@ -1,13 +1,15 @@
|
|
|
import * as THREE from 'three';
|
|
|
-import { animateCamera, getTextCanvas, renderVideo } from '/@/utils/threejs/util';
|
|
|
+import { animateCamera, getTextCanvas, renderVideo, drawLine } from '/@/utils/threejs/util';
|
|
|
import UseThree from '../../../../hooks/core/threejs/useThree';
|
|
|
import Fly from '/@/utils/threejs/FlyLine1';
|
|
|
import fcFan from './fcfanLocal.three';
|
|
|
import fmFan from './fmfanLocal.three';
|
|
|
+import { types } from "util";
|
|
|
+import num from "/@/views/demo/charts/Num.vue";
|
|
|
|
|
|
const modelName = 'jbfj_hd';
|
|
|
// 模型对象、 文字对象
|
|
|
-let model, group, fcFanObj, fmFanObj, player1, fanType;
|
|
|
+let model, group, fcFanObj, fmFanObj, player1, fanType, flyArr = [];
|
|
|
|
|
|
// 打灯光
|
|
|
const addLight = (scene) => {
|
|
|
@@ -210,29 +212,52 @@ export const addFmText = (selectData) => {
|
|
|
|
|
|
const setFly = () => {
|
|
|
// 路径
|
|
|
- const points = [];
|
|
|
const curve = new THREE.CatmullRomCurve3([
|
|
|
- new THREE.Vector3(-400, 10, 0),
|
|
|
- new THREE.Vector3(-50, 10, 150),
|
|
|
- new THREE.Vector3(50, 10, -50),
|
|
|
- new THREE.Vector3(300, 10, 150),
|
|
|
- new THREE.Vector3(350, 10, 150),
|
|
|
- new THREE.Vector3(500, 150, 0),
|
|
|
- new THREE.Vector3(600, 0, 0),
|
|
|
+ // new THREE.Vector3(-90.860, 2.380, 4.854),
|
|
|
+ new THREE.Vector3(-88.020, 2.360, 3.70),
|
|
|
+ new THREE.Vector3(-85.872, 2.352, 3.672),
|
|
|
+ new THREE.Vector3(-85.652, 2.342, 3.442),
|
|
|
+ new THREE.Vector3(-85.669, 2.353, -0.002),
|
|
|
+ new THREE.Vector3(-85.690, 2.367, -3.824),
|
|
|
+ new THREE.Vector3(-85.650, 2.217, -4.154),
|
|
|
+ new THREE.Vector3(-85.680, 1.067, -5.674),
|
|
|
+ new THREE.Vector3(-85.680, 0.947, -6.024),
|
|
|
+ new THREE.Vector3(-85.680, 0.947, -12.894),
|
|
|
+ new THREE.Vector3(-85.450, 0.947, -12.894),
|
|
|
+ new THREE.Vector3(85.000, 0.920, -12.910)
|
|
|
]);
|
|
|
+
|
|
|
// 采样
|
|
|
- curve.getSpacedPoints(500).forEach((point) => {
|
|
|
- const { x, y, z } = point;
|
|
|
- points.push([x, y, z]);
|
|
|
- });
|
|
|
- const length = 50;
|
|
|
- const circle = 10;
|
|
|
- const color = '#ee0000';
|
|
|
- const opacity = 1;
|
|
|
- const size = 15;
|
|
|
- const fly = new Fly(points, length, circle, color, opacity, size);
|
|
|
- fly.move();
|
|
|
- model.scene.add(fly.obj);
|
|
|
+ for(let i = 0; i < 80; i++){
|
|
|
+ setTimeout(() => {
|
|
|
+ const points: any = [];
|
|
|
+ const mvPosition = {
|
|
|
+ 'x' : (Math.random() * 2 - 1) * 0.01,
|
|
|
+ 'y' : (Math.random() * 2 - 1) * 0.01,
|
|
|
+ 'z' : (Math.random() * 2 - 1) * 0.01,
|
|
|
+ }
|
|
|
+ curve.getSpacedPoints(500).forEach((point) => {
|
|
|
+ const { x, y, z } = point;
|
|
|
+ // points.push([x + mvPosition.x, y + mvPosition.y, z + mvPosition.z]);
|
|
|
+ points.push([x, y, z]);
|
|
|
+ });
|
|
|
+ const length = 50;
|
|
|
+ const circle = i * 2 + 8;
|
|
|
+ const color = '#ffffff';
|
|
|
+ const opacity = 0.3;
|
|
|
+ const size = 3;
|
|
|
+ const fly = new Fly(points, length, circle, color, opacity, size);
|
|
|
+ fly.move();
|
|
|
+ group.add(fly.obj);
|
|
|
+ flyArr.push(fly)
|
|
|
+ }, i * 500)
|
|
|
+ }
|
|
|
+
|
|
|
+ const stopFly = () => {
|
|
|
+ flyArr.forEach((fly) => {
|
|
|
+ fly.stop()
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
// 路径轨迹
|
|
|
const material = new THREE.LineBasicMaterial({
|
|
|
@@ -243,6 +268,7 @@ const setFly = () => {
|
|
|
model.scene.add(line);
|
|
|
};
|
|
|
|
|
|
+
|
|
|
export const mountedThree = (playerVal1) => {
|
|
|
player1 = playerVal1;
|
|
|
return new Promise((resolve) => {
|
|
|
@@ -275,7 +301,6 @@ export const mountedThree = (playerVal1) => {
|
|
|
|
|
|
model.animate();
|
|
|
setFly();
|
|
|
- debugger
|
|
|
const videoPlayer1 = document.getElementById('jb-player1')?.getElementsByClassName('vjs-tech')[0];
|
|
|
if (videoPlayer1) {
|
|
|
const mesh = renderVideo(group, videoPlayer1, 'player1');
|
|
|
@@ -284,6 +309,24 @@ export const mountedThree = (playerVal1) => {
|
|
|
mesh.rotation.y = -Math.PI/2
|
|
|
group.add(mesh)
|
|
|
}
|
|
|
+
|
|
|
+ // const curve = new THREE.CatmullRomCurve3([
|
|
|
+ // new THREE.Vector3(-90.860, 2.380, 25.854),
|
|
|
+ // new THREE.Vector3(-91.020, 2.360, 4.220),
|
|
|
+ // new THREE.Vector3(-85.872, 2.352, 3.672),
|
|
|
+ // new THREE.Vector3(-85.652, 2.342, 3.442),
|
|
|
+ // new THREE.Vector3(-85.669, 2.353, -0.002),
|
|
|
+ // new THREE.Vector3(-85.690, 2.367, -3.824),
|
|
|
+ // new THREE.Vector3(-85.650, 2.217, -4.154),
|
|
|
+ // new THREE.Vector3(-85.680, 1.067, -5.674),
|
|
|
+ // new THREE.Vector3(-85.680, 0.947, -6.024),
|
|
|
+ // new THREE.Vector3(-85.680, 0.947, -12.894),
|
|
|
+ // new THREE.Vector3(-85.450, 0.947, -12.894),
|
|
|
+ // new THREE.Vector3(85.000, 0.920, -12.910)
|
|
|
+ // // new THREE.Vector3(76, 28, 27),
|
|
|
+ // ]);
|
|
|
+ //
|
|
|
+ // drawLine(curve.getPoints(10), model, group)
|
|
|
resolve(model);
|
|
|
});
|
|
|
});
|
hrx