diff --git a/Final/script.js b/Final/script.js index 2afb8aa..9b9f9c3 100644 --- a/Final/script.js +++ b/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;