diff --git a/src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html b/src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html index 023c367b8..c35b58bc9 100644 --- a/src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html +++ b/src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html @@ -1,6 +1,7 @@ -
+ +
Choose a collection:
diff --git a/src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts b/src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts index 55e869953..c53af87e3 100644 --- a/src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts +++ b/src/app/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; import { EventdisplayService } from 'src/app/services/eventdisplay.service'; @Component({ diff --git a/src/app/services/loaders/objects/phoenix-objects.ts b/src/app/services/loaders/objects/phoenix-objects.ts index 391de5d31..bf6045c8e 100644 --- a/src/app/services/loaders/objects/phoenix-objects.ts +++ b/src/app/services/loaders/objects/phoenix-objects.ts @@ -55,19 +55,31 @@ export class PhoenixObjects { // attributes const curve = new THREE.CatmullRomCurve3(points); - const vertices = curve.getPoints(50); - // geometry + + // TubeGeometry const geometry = new THREE.TubeBufferGeometry(curve, undefined, 2); - // material const material = new THREE.MeshToonMaterial({ color: objectColor }); - // material.linewidth = 2; - // object - const splineObject = new THREE.Mesh(geometry, material); - splineObject.userData = trackParams; - splineObject.userData.uuid = splineObject.uuid; - splineObject.name = 'Track'; + const tubeObject = new THREE.Mesh(geometry, material); + // Setting info to the tubeObject since it will be used for selection + tubeObject.userData = trackParams; + tubeObject.userData.uuid = tubeObject.uuid; + tubeObject.name = 'Track'; + + // Line - Creating a Line to put inside the tube to show tracks even on zoom out + const vertices = curve.getPoints(50); + const lineGeometry = new THREE.BufferGeometry().setFromPoints(vertices); + const lineMaterial = new THREE.LineBasicMaterial({ + color: objectColor, + linewidth: 2 + }); + const lineObject = new THREE.Line(lineGeometry, lineMaterial); + + // Creating a group to add both the Tube curve and the Line + const trackObject = new THREE.Object3D(); + trackObject.add(tubeObject); + trackObject.add(lineObject); - return splineObject; + return trackObject; } /** diff --git a/src/app/services/three/controls-manager.ts b/src/app/services/three/controls-manager.ts index a0d35ac04..debdc1ad5 100644 --- a/src/app/services/three/controls-manager.ts +++ b/src/app/services/three/controls-manager.ts @@ -305,7 +305,7 @@ export class ControlsManager { * Initialize the zoom controls by setting up the camera and their animations as pairs. */ private initializeZoomControls() { - const allCameras: any[] = [this.getMainCamera(), this.getOverlayCamera()]; + const allCameras: any[] = this.getAllCameras(); this.zoomCameraAnimPairs = []; for (const camera of allCameras) { const animation = camera.isOrthographicCamera diff --git a/src/app/services/three/scene-manager.ts b/src/app/services/three/scene-manager.ts index 16e7a831b..d7afc449c 100644 --- a/src/app/services/three/scene-manager.ts +++ b/src/app/services/three/scene-manager.ts @@ -1,4 +1,4 @@ -import { Scene, Object3D, Color, LineSegments, Mesh, MeshPhongMaterial, LineBasicMaterial, Vector3, Group, AxesHelper, AmbientLight, DirectionalLight, Line, MeshBasicMaterial, Material, Points, PointsMaterial } from 'three'; +import { Scene, Object3D, Color, LineSegments, Mesh, MeshPhongMaterial, LineBasicMaterial, Vector3, Group, AxesHelper, AmbientLight, DirectionalLight, Line, MeshBasicMaterial, Material, Points, PointsMaterial, MeshToonMaterial } from 'three'; import { Cut } from '../extras/cut.model'; /** @@ -216,7 +216,8 @@ export class SceneManager { object.material instanceof MeshBasicMaterial || object.material instanceof MeshBasicMaterial || object.material instanceof PointsMaterial || - object.material instanceof MeshPhongMaterial + object.material instanceof MeshPhongMaterial || + object.material instanceof MeshToonMaterial ) { object.material.color.set(color);