Warning, /firebird/firebird-ng/src/app/components/cube-viewport-control/cube-viewport-control.component.ts is written in an unsupported language. File is not indexed.
0001 // cube-viewport-control.component.ts
0002 import { Component, ElementRef, OnInit } from '@angular/core';
0003 import * as THREE from 'three';
0004 import {GizmoOptions, ViewportGizmo} from 'three-viewport-gizmo';
0005 import {
0006 OrthographicCamera,
0007 PerspectiveCamera,
0008 Scene,
0009 WebGLRenderer
0010 } from 'three';
0011
0012 @Component({
0013 selector: 'app-cube-viewport-control',
0014 standalone: true,
0015 templateUrl: './cube-viewport-control.component.html',
0016 })
0017 export class CubeViewportControlComponent implements OnInit {
0018 // References to externally provided objects
0019 public camera!: PerspectiveCamera | OrthographicCamera;
0020 public scene!: Scene;
0021 public renderer!: WebGLRenderer;
0022
0023 // The ViewportGizmo instance
0024 public gizmo!: ViewportGizmo;
0025
0026 constructor(private elRef: ElementRef) {}
0027
0028 ngOnInit(): void {
0029 // We do NOT call initThreeJS() here.
0030 // The external scene/camera/renderer will be provided from outside.
0031 }
0032
0033 /**
0034 * Called from the parent component (e.g. MainDisplayComponent) to link
0035 * the same scene/camera/renderer that are used for the main 3D view.
0036 */
0037 public initWithExternalScene(
0038 scene: Scene,
0039 camera: PerspectiveCamera | OrthographicCamera,
0040 renderer: WebGLRenderer
0041 ): void {
0042 this.scene = scene;
0043 this.camera = camera;
0044 this.renderer = renderer;
0045
0046 const container = this.elRef.nativeElement.querySelector('.three-container');
0047 const gizmoConfig:GizmoOptions = {
0048 container: container,
0049 size: 90,
0050 type: 'cube',
0051 offset: {top: 85},
0052 background: {color: 0x444444, hover: {color: 0x444444}},
0053 corners: {
0054 color: 0x333333,
0055 hover: {color: 0x4bac84},
0056 },
0057 // Define axis configurations (customize these as needed)
0058 // x: { scale: 5 }, // Original "right" axis (X+)
0059 // z: { color: 0x00ff00 }, // Original "front" axis (Z+)
0060 // nx: { color: 0x0000ff }, // Original "left" axis (X-)
0061 // nz: { color: 0xffff00 }, // Original "back" axis (Z-)
0062 // front: {nx}, // Original left (nx) becomes new front
0063 // right: z, // Original front (z) becomes new right
0064 // back: x, // Original right (x) becomes new back
0065 // left: nz, // Original back (nz) becomes new left
0066
0067 front: { label: "Right" }, // Original left face
0068 left: { label: "Front" }, // Original back face
0069 back: { label: "Left" }, // Original right face
0070 right: { label: "Back" } // Original front face
0071 };
0072
0073 // Create gizmo with custom config (autoPlace = false)
0074 this.gizmo = new ViewportGizmo(this.camera, this.renderer, gizmoConfig);
0075
0076 }
0077 }
