Tengo una escena de tres JS donde el usuario puede agregar un cuboide seleccionando un lugar en la escena y luego haciendo clic en el botón. También tengo OrbitControls para que el usuario pueda rotar y navegar en la escena.

El código para hacer que el cuboide siga al ratón es el siguiente:

 let mouse_vector = new THREE.Vector3(this.mouse.x, this.mouse.y, 0.5 ); mouse_vector.unproject( this.camera ); mouse_vector.sub(this.camera.position).normalize(); let distance = - this.camera.position.z / mouse_vector.z let cube_position = new THREE.Vector3(); cube_position.copy(this.camera.position).add(mouse_vector.multiplyScalar(distance)) this.place_holder_cuboid.position.copy(cube_position)

Aquí: place_holder_cuboid es la malla cuboide que quiero dibujar.

Esto funciona bien cuando la cámara está alineada con el eje Z. Sin embargo, si giro mi cámara para que se alinee con el eje X, por ejemplo. La distancia de la ubicación del cuboide comienza a estropearse.

Creo que el problema es que no estoy teniendo en cuenta los otros ejes al calcular la distancia, ya que la cámara se puede rotar o panoramizar (gracias a los controles de órbita)

Sin embargo, no estoy seguro de saber los cálculos para esta distancia. ¿Puede alguien ayudarme con esto?