3DGUI

namespace 3DGUI

Manages 3D graphical user interface components, including interactive elements within 3D scenes.
It integrates seamlessly with Three.js to provide immersive user interactions.

Members

loadGLBModelWithRetry

staticasync

Attempts to load a GLB model from a specified URL with retry logic.
Retries loading up to a maximum number of attempts if failures occur.

Returns: Promise<THREE.Group>

• 
  
  • A promise that resolves to the loaded THREE.js Group containing the model.
  
  

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
url	string			The URL of the GLB model to load.
retries	number	✔️	MAX_RETRIES	The maximum number of retry attempts.

Throws: Error

• Throws an error if the model fails to load after all retry attempts.

loadAndDisplayModel

staticasync

Loads and displays a GLB model within a Three.js scene using provided track data.

Returns: Promise<void>

• 
  
  • A promise that resolves once the model is loaded and added to the scene.
  
  

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
scene	THREE.Scene			The Three.js scene to which the model will be added.
trackData	object			The track data containing information about the interplanetary player.
trackData.interplanetaryPlayer	object			The interplanetary player data.
trackData.interplanetaryPlayer.modelURL	string			The URL of the GLB model to load.

Throws: Error

• Throws an error if the modelURL is missing or if loading fails.

const scene = new THREE.Scene();
const trackData = {
  interplanetaryPlayer: {
    modelURL: 'https://example.com/models/player.glb'
  }
};

loadAndDisplayModel(scene, trackData)
  .then(() => {
    console.log('Model loaded and added to the scene.');
  })
  .catch(error => {
    console.error('Error loading model:', error);
  });

### animate \{#animate}

<div>
  <span className="badge badge--info">static</span>
</div>

<p>Animation loop for the application.<br />Updates controls and renders the scene.</p>

### initRenderer \{#initRenderer}

<div>
  <span className="badge badge--info">static</span>
</div>

<p>Initializes the Three.js WebGL renderer.<br />Configures the renderer with antialiasing and transparency, and sets its size and pixel ratio.</p>

**Returns**: THREE.WebGLRenderer
- <p>The initialized Three.js WebGL renderer.</p>

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|canvas|HTMLCanvasElement|||<p>The HTML canvas element where the scene will be rendered.</p>|

const canvas = document.getElementById('three-canvas');
const renderer = initRenderer(canvas);

### addLights \{#addLights}

<div>
  <span className="badge badge--info">static</span>
</div>

<p>Adds ambient and directional lights to the Three.js scene.<br />Enhances the visibility and depth of objects within the scene.</p>

**Returns**: void

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|scene|THREE.Scene|||<p>The Three.js scene to which the lights will be added.</p>|

const { scene } = initScene(canvas);
addLights(scene);

### handleWindowResize \{#handleWindowResize}

<div>
  <span className="badge badge--info">static</span>
</div>

<p>Handles window resize events to adjust the camera aspect ratio and renderer size accordingly.<br />Ensures the 3D scene remains properly scaled and proportioned when the browser window size changes.</p>

**Returns**: void

|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION|
|:---:|:---:|:---:|:---:|:---:|
|camera|THREE.PerspectiveCamera|||<p>The perspective camera to be updated.</p>|
|renderer|THREE.WebGLRenderer|||<p>The renderer to be resized.</p>|

window.addEventListener('resize', () => {
  handleWindowResize(camera, renderer);
});