How to add coordinate indicator in ThreeJS scene?

Question

I am trying to add a coordinate indicator to the corner of the scene. It should be almost a coordinate indicator in GID simulation application. As you can see in the picture:

GID Simulation

When I click the x arrow, I should see the x coordinate view. And the same for y and z too.

For adding a coordinate indicator I tried axesHelper:

const controls = new OrbitControls(camera, renderer.domElement);
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

But it is not what I want. The indicator should be independent of the model. This is my scene:

scene

There is some of my code that I used orbitcontrol:

import * as THREE from 
"https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import { OrbitControls } from 
"https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";

ipcRenderer.on('file-data', (event, data) => {
// Handle the received data here in the renderer process
const lines = data.split('\n');
console.log(lines);
// Create a scene, camera, and renderer
const scene = new THREE.Scene();  
scene.background = new THREE.Color( "#ffffff" );  
// Get the container element by its class name
const container = document.querySelector('.design');   
// Create a camera with appropriate aspect ratio and size
const width = container.clientWidth;
const height = container.clientHeight;
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);  
const renderer = new THREE.WebGLRenderer(); 
// Set the renderer's size to match the container
renderer.setSize(width, height);    
// Append the renderer's canvas to the container
container.appendChild(renderer.domElement); 
// Create OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

The indicator should just stand in the corner. How can i create and use coordinate indicator in ThreeJs?

EDIT: I have created a group. That is the result: group

It is still not what I want. The junction points still move.

Answer 1

Thanks to answers linked by Alan Birtles, I suggest building something from this answer:

you can create a separate renderer, looking to a separate scene, with a separate camera, but on rendering loop you update the second camera position in order to copy the direction of main camera.

You should create a scene2, camera2 in scene2, define a CAM_DISTANCE, and a renderer2 that renders scene2 with camera2. Place axesHelper in scene2.

The code you should put in your rendering loop is in the answer linked above:

camera2.position.copy( camera.position );
camera2.position.sub( controls.target );
camera2.position.setLength( CAM_DISTANCE );
camera2.lookAt( scene2.position );

Then add renderer2.domElement to your html body, and add styles to it to set correct dimensions and positioning of the axes helper in the page.

Check this project for an example of two renderer with two cameras in the same page (in this case both showing the same scene): one camera look at the entire sun-earth-moon system, another camera look at the moon from the earth.