|
1 | | -import * as THREE from 'three'; |
| 1 | +import * as THREE from "three"; |
2 | 2 |
|
3 | | -/** |
4 | | - * Class to handle object detection via mouse clicks/touch events |
| 3 | +/** |
| 4 | + * Class to handle object detection via mouse clicks/touch events |
5 | 5 | * and raycasting. |
6 | 6 | */ |
7 | 7 | class ClickHandler { |
| 8 | + /** |
| 9 | + * Create a ClickHandler. |
| 10 | + * @param {THREE.WebGLRenderer} - The Three.js renderer on which the click |
| 11 | + * events will be handled. |
| 12 | + */ |
| 13 | + constructor(renderer) { |
| 14 | + this.raycaster = new THREE.Raycaster(); |
| 15 | + this.normalisedMousePosition = new THREE.Vector2(null, null); |
| 16 | + renderer.domElement.addEventListener("click", (e) => { |
| 17 | + this.normalisedMousePosition.set( |
| 18 | + (e.clientX / renderer.domElement.clientWidth) * 2 - 1, |
| 19 | + -((e.clientY / renderer.domElement.clientHeight) * 2) + 1, |
| 20 | + ); |
| 21 | + }); |
| 22 | + } |
8 | 23 |
|
9 | | - /** |
10 | | - * Create a ClickHandler. |
11 | | - * @param {THREE.WebGLRenderer} - The Three.js renderer on which the click |
12 | | - * events will be handled. |
13 | | - */ |
14 | | - constructor(renderer) { |
15 | | - this.raycaster = new THREE.Raycaster(); |
16 | | - this.normalisedMousePosition = new THREE.Vector2(null, null); |
17 | | - renderer.domElement.addEventListener("click", e => { |
18 | | - this.normalisedMousePosition.set ( |
19 | | - ((e.clientX / renderer.domElement.clientWidth) * 2) - 1, |
20 | | - -((e.clientY / renderer.domElement.clientHeight) * 2) + 1 |
21 | | - ); |
22 | | - }); |
23 | | - } |
24 | | - |
25 | | - |
26 | | - /** |
27 | | - * Cast a ray into the scene to detect objects. |
28 | | - * @param {THREE.Camera} - The active Three.js camera, from which the ray |
29 | | - * will be cast. |
30 | | - * @param {THREE.Scene} - The active Three.js scene, which the ray will be |
31 | | - * cast into. |
32 | | - * @return {Array} - array of all intersected objects. |
33 | | - */ |
34 | | - raycast(camera, scene) { |
35 | | - if(this.normalisedMousePosition.x !== null && this.normalisedMousePosition.y !== null) { |
36 | | - this.raycaster.setFromCamera(this.normalisedMousePosition, camera); |
37 | | - const objects = this.raycaster.intersectObjects(scene.children, false); |
38 | | - this.normalisedMousePosition.set(null, null); |
39 | | - return objects; |
40 | | - } |
41 | | - return []; |
| 24 | + /** |
| 25 | + * Cast a ray into the scene to detect objects. |
| 26 | + * @param {THREE.Camera} - The active Three.js camera, from which the ray |
| 27 | + * will be cast. |
| 28 | + * @param {THREE.Scene} - The active Three.js scene, which the ray will be |
| 29 | + * cast into. |
| 30 | + * @return {Array} - array of all intersected objects. |
| 31 | + */ |
| 32 | + raycast(camera, scene) { |
| 33 | + if ( |
| 34 | + this.normalisedMousePosition.x !== null && |
| 35 | + this.normalisedMousePosition.y !== null |
| 36 | + ) { |
| 37 | + this.raycaster.setFromCamera(this.normalisedMousePosition, camera); |
| 38 | + const objects = this.raycaster.intersectObjects(scene.children, false); |
| 39 | + this.normalisedMousePosition.set(null, null); |
| 40 | + return objects; |
42 | 41 | } |
| 42 | + return []; |
| 43 | + } |
43 | 44 | } |
44 | 45 |
|
45 | | -export default ClickHandler; |
| 46 | +export default ClickHandler; |
0 commit comments