Soy un novato en ThreeJS, estoy tratando de hacer un eje auxiliar para mi proyecto, los ejes Z e Y tienen una variación de -10 y 10, pero quiero que mi eje Z tenga una representación infinita.

Dibujé el eje usando TRES. Geometría() con la propiedad vector3 y la propiedad de línea, pero no puedo entender cómo puedo actualizar el tamaño de mi eje Z para que se ajuste al espacio mundial, cuando acerco y alejo.

Quiero que el eje Z siempre se muestre ocupando la escena completa y no limitado a la longitud de -10 a 10. Básicamente para ser infinito incluso cuando me alejo.

Aquí está mi código a partir de ahora:

 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;