feup-sgi/tp3/PickingManager.js at main · joaoalvesss/feup-sgi · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import * as THREE from 'three';

class PickingManager {
    constructor(camera, selectionCallback) {

        this.camera = camera;
        this.selectionCallback = selectionCallback;

        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();

        this.hoveredObject = null;
        this.selectedColorButton = null;

        this.interactableObjects = [];

        window.addEventListener('mousemove', this.onMouseMove.bind(this));
        window.addEventListener('click', this.onClick.bind(this));
    }

    addInteractableObject(object) {
        if (object.isMesh) {
            this.interactableObjects.push(object);
        } else if (object.isGroup || object instanceof THREE.Group) {
            object.traverse(child => {
                if (child.isMesh) {
                    child.name = object.name;
                    this.interactableObjects.push(child);
                }
            });
        } else console.warn('Object is not a mesh or group: ', object);

    }

    removeInteractableObject(object) {
        const index = this.interactableObjects.indexOf(object);
        if (index !== -1) {
            this.interactableObjects.splice(index, 1);
        }
    }

    onMouseMove(event) {

        if (this.interactableObjects.length === 0) return;

        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        this.mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        this.raycaster.setFromCamera(this.mouse, this.camera);
        const intersects = this.raycaster.intersectObjects(this.interactableObjects);

        if (intersects.length > 0) {
            const hoveredObject = intersects[0].object;

            if (this.hoveredObject !== hoveredObject) {
                if (this.hoveredObject && this.hoveredObject !== this.selectedColorButton) {
                    this.removeHighlight(this.hoveredObject);
                }

                this.hoveredObject = hoveredObject;
                if (this.hoveredObject !== this.selectedColorButton) {
                    this.addHighlight(this.hoveredObject);
                }
            }
        } else {
            if (this.hoveredObject && this.hoveredObject !== this.selectedColorButton) {
                this.removeHighlight(this.hoveredObject);
            }

            this.hoveredObject = null;
        }
    }

    onClick() {
        this.raycaster.setFromCamera(this.mouse, this.camera);
        const intersects = this.raycaster.intersectObjects(this.interactableObjects);

        if (intersects.length > 0) {
            const clickedObject = intersects[0].object;

            if (clickedObject.name === 'playButton' || clickedObject.name === 'playerName' || clickedObject.name === 'selectLaps' || clickedObject.name === 'selectStartPoint') {
                this.selectionCallback(clickedObject.name);
            }

            else if (['orangeButton', 'greenButton', 'blueButton', 'pinkButton'].includes(clickedObject.name)) {
                if (this.selectedColorButton === null) {
                    this.selectedColorButton = clickedObject;
                } else if (this.selectedColorButton === clickedObject) {
                    this.selectedColorButton = null;
                    this.removeHighlight(clickedObject);
                } else {
                    this.removeHighlight(this.selectedColorButton);
                    this.selectedColorButton = clickedObject;
                }
            }

            else if (clickedObject.name === 'playerBalloon' || clickedObject.name === 'opponentBalloon') {
                if (this.selectedColorButton === null) {
                    console.warn('Please select a color before selecting a balloon.');
                    return;
                }

                this.selectionCallback(clickedObject.name, this.selectedColorButton.name.replace('Button', ''));
            }

            else {
                this.selectionCallback(clickedObject.name);
            }
        }
    }

    addHighlight(object) {
        if (object && object.material && object.material.emissive) {
            if (!object.userData.originalEmissive) {
                object.userData.originalEmissive = object.material.emissive.clone();
            }

            object.material.emissive = new THREE.Color(0x444444);
        }
    }

    removeHighlight(object) {
        if (object && object.material && object.userData.originalEmissive) {
            object.material.emissive.copy(object.userData.originalEmissive);
            delete object.userData.originalEmissive;
        }
    }
}

export { PickingManager };