Final02_test

Final/script.js

@@ -25,6 +25,10 @@ class App {
         this.resize();
 
         requestAnimationFrame(this.render.bind(this));
+
+        this._createDescriptionElement();
+
+        this._addClickEventToObject();
     }
 
     _setupControls(){
@@ -101,6 +105,45 @@ class App {
             });
         }
 
+    _createDescriptionElement() {
+        this._descriptionElement = document.createElement('div');
+        this._descriptionElement.id = 'description';
+        this._descriptionElement.style.position = 'absolute';
+        this._descriptionElement.style.top = '10px';
+        this._descriptionElement.style.left = '10px';
+        this._descriptionElement.style.padding = '10px';
+        this._descriptionElement.style.background = 'rgba(255, 255, 255, 0.8)';
+        this._descriptionElement.style.border = '1px solid #000';
+        this._descriptionElement.style.display = 'none';
+        this._divContainer.appendChild(this._descriptionElement);
+    }
+
+    _addClickEventToObject() {
+        const self = this;
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2();
+
+        function onMouseClick(event) {
+            mouse.x = (event.clientX / self._renderer.domElement.clientWidth) * 2 - 1;
+            mouse.y = -(event.clientY / self._renderer.domElement.clientHeight) * 2 + 1;
+
+            raycaster.setFromCamera(mouse, self._camera);
+
+            const intersects = raycaster.intersectObjects(self._scene.children, true);
+
+            if (intersects.length > 0) {
+                const selectedObject = intersects[0].object;
+
+                self._descriptionElement.innerText = `Chosen Object: ${selectedObject.name}`;
+                self._descriptionElement.style.display = 'block';
+            } else {
+                self._descriptionElement.style.display = 'none';
+            }
+        }
+
+        this._renderer.domElement.addEventListener('click', onMouseClick, false);
+    }
+
     update(time) {
         time *= 0.001;