#

luxiaotao1123

2024-08-20 01883c7d5eca26efb7f844773cae50e5154b9f8b

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { useState, useMemo, useRef, useEffect } from 'react';
import { useFrame } from '@react-three/fiber';
import { useFBX, useAnimations } from '@react-three/drei';
import * as THREE from 'three';
import * as Common from '../utils/common';
import * as TWEEN from "@tweenjs/tween.js";
import { useStore } from '@/store';
import {
    INTERVAL_TIME,
    MODEL_AGV_SCALE,
    REAL_COMPARE_MAP_SCALE,
    REAL_COMPARE_MAP_OFFSET_X,
    REAL_COMPARE_MAP_OFFSET_Z,
} from '../config/setting'
 
const width = 200;
 
const getMajorPos = (position) => {
    return {
        x: position?.[2] * REAL_COMPARE_MAP_SCALE + REAL_COMPARE_MAP_OFFSET_X,
        y: position?.[1] * REAL_COMPARE_MAP_SCALE + 10,
        z: position?.[0] * REAL_COMPARE_MAP_SCALE + REAL_COMPARE_MAP_OFFSET_Z,
    }
}
 
const Path = (props) => {
    const { list } = props;
 
    const lineRef = useRef();
 
    // Convert list of positions to THREE.Vector3 objects
    const points = useMemo(() => {
        return list.map(item => {
            const { x, y, z } = getMajorPos(item.position);
            return new THREE.Vector3(x, y, z);
        });
    }, [list]);
 
    useEffect(() => {
        if (lineRef.current) {
            lineRef.current.geometry.setFromPoints(points);
        }
        console.log(points);
 
    }, [points]);
 
    useEffect(() => {
        // console.log(JSON.stringify(props.list));
        //[{"code":"00000052","position":[4961,0,2420],"serial":6},{"code":"00000053","position":[5491,0,2420],"serial":7},{"code":"00000054","position":[6021,0,2420],"serial":8}]
    }, [props])
 
    return (
        <>
            <group>
                {/* <mesh position={} rotation={[]}>
                    <planeGeometry
                        args={[width, height]}
                    ></planeGeometry>
                    <meshBasicMaterial color="rgb(23,146,247)"></meshBasicMaterial>
                </mesh> */}
                <line ref={lineRef}>
                    <bufferGeometry attach="geometry" />
                    <lineBasicMaterial attach="material" color="rgb(23,146,247)" linewidth={width} />
                </line>
            </group>
        </>
    )
}
 
export default Path;