I'm a newbi on ThreeJS, I'm trying to make an axis helper to my project, the Z and Y axis have a variation of -10 and 10, but I want my Z axis to have an infinit representation.

I've draw the axis using THREE.Geometry() with vector3 property and line property, but I can'nt figure out how I can update the size of my Z axis to fit the world space, when I zoom in and zoom out.

I want to Z axist always show occuping the full scene and not limitd to the -10 to 10 lenght. Basically to be infinit even when i zoom out.

Here is my code as of now:

import * as THREE from 'https://unpkg.com/three@0.124.0/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.124.0/examples/jsm/controls/OrbitControls.js'


let scene, camera, renderer, controls, squareSpace, square, raycaster, mouse;


function spaceCreation() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  raycaster = new THREE.Raycaster();
 

  let geometry_x = new THREE.Geometry();
  geometry_x.vertices.push(new THREE.Vector3(-10, 0, 0.1));
  geometry_x.vertices.push(new THREE.Vector3(10, 0, 0.1));
  let material_x = new THREE.LineBasicMaterial({ color: 0x0000ff, linewidth: 100 });
  let eixoX = new THREE.Line(geometry_x, material_x);
  eixoX.position.set(0, 0, 0);
  scene.add(eixoX);

  
  let geometry_y = new THREE.Geometry();
  geometry_y.vertices.push(new THREE.Vector3(0, -10, 0.1));
  geometry_y.vertices.push(new THREE.Vector3(0, 10, 0.1));
  let material_y = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 100});
  let eixoY = new THREE.Line(geometry_y, material_y);
  eixoY.position.set(0, 0, 0);
  scene.add(eixoY);

  //faremos exatamete o mesmo para a criação do eixo dos z
  let geometry_z = new THREE.Geometry();
  geometry_z.vertices.push(new THREE.Vector3(0, 0, -10));
  geometry_z.vertices.push(new THREE.Vector3(0, 0, 10));
  let material_z = new THREE.LineBasicMaterial({ color: 0x00ff00, linewidth: 100});
  let eixoZ = new THREE.Line(geometry_z, material_z);
  eixoZ.position.set(0, 0, 0);
  scene.add(eixoZ);

  
  camera.position.y = -10;
  camera.position.z = 5;
  
  controls = new OrbitControls(camera, renderer.domElement);
 

  window.requestAnimationFrame(animate);
}


function animate(){

  controls.update();
  renderer.render(scene, camera);
  window.requestAnimationFrame(animate);

}



function onWindowResize() {
 
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}


window.addEventListener('resize', onWindowResize);


window.onload = spaceCreation;