The formula for the line connecting the camera's center to a plane in ThreeJS

Currently, I am in the process of working on a modified version of the threeJS editor. One specific feature I am focusing on requires me to determine the exact world point that the center of the camera is directed towards.

I speculate that if I can ascertain the equation of the line originating from the camera's center and extending in its forward direction, I should be able to pinpoint the intersection point at y=0, ultimately giving me the point on the plane.

Although I initially attempted the code below, it seems to converge towards the axis of the plane at (0,0,0):

let forward = new THREE.Vector3();
camera.getWorldDirection(forward)
let firstPoint = camera.position.clone();
let secondPoint = new THREE.Vector3();
secondPoint.addVectors(firstPoint, forward);

I have since refactored the code to:

let camera = scene.getObjectByProperty("uuid", scene.userData.activeCamera);
let plane = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 0 );
let ray = new THREE.Ray();
let cameraPos = new THREE.Vector3();
let cameraDir = new THREE.Vector3();
camera.getWorldPosition(cameraPos);
camera.getWorldDirection(cameraDir);
ray.set(cameraPos, cameraDir);
let target = new THREE.Vector3();
ray.intersectPlane(plane, target);
this.controls.target = target;

However, even with this revised code, the resulting target still seems to approach zero as illustrated below:

x: 1.7763568394002505e-15
y: 0
z: 8.881784197001252e-15

The image provided below depicts the exact direction in which the camera is focused within the editor: https://i.sstatic.net/KY3Ay.png

Answer №1

Here is a recommended strategy to tackle this problem:

  • Create a new instance of THREE.Plane that represents the XZ-plane.
  • Instantiate a THREE.Ray object using the camera's current position and direction in world coordinates.
  • Utilize the Ray.intersectPlane() method to determine the point where the ray intersects with the plane.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Regular Expression for standardizing phone number input

I'm working with an input for a phone number in French format which can accept two different formats: 0699999999 +33699999999 There is currently no check for the length of the number. In the database table, the field is varchar 12, but shorter inp ...

The field "addWorkout" cannot be queried on the type "Mutation"

My journey with GraphQL has just begun, and after resolving a reference error in my previous question, I have encountered a new challenge. It appears that adding a workout is not working as expected, as the schema does not recognize it as a mutation field. ...

Babel had a SyntaxError in test.jsx file at line 3, position 11 with an Unexpected token

Having trouble converting JSX to JS with Babel? If you're seeing an error like the one below, don't worry - we can help you fix it: The example code in test.jsx is causing a SyntaxError when transformed using babel test.jsx: SyntaxError: test ...

Changing the size of various types of images

Is there a way in JavaScript to automatically resize and fill in a block with fixed width using different images with various dimensions? I came across something similar, but it was in AS2. I'm unsure if it can be translated to JavaScript. var _loc3 ...

Tips for concealing the angular component depending on a specific circumstance

I have developed a custom directive for validating input. It is designed to check the length of the input. If the length is zero, an error message will be displayed. However, I am facing difficulty in hiding the error message when the input is filled with ...

Controlling ever-changing routes using AngularJS

My AngularJS app (Angular v1) has a secure login system in place. Users who are not authenticated can only access the login page, forgotten password page, and cookie policy. I am utilizing ngRoute as shown below: $routeProvider .when('/login ...

What is the proper sequence for executing a JavaScript function?

What task am I attempting to accomplish? I am trying to run two functions sequentially in JavaScript, but it seems that both functions are being called and executed simultaneously. What seems to be the issue? The setModalBox function throws an undef ...

Should I release an Aurelia component on NPM?

Our team has developed a compact Aurelia application and now we are looking to seamlessly incorporate it into a larger codebase. One possible scenario is distributing the Aurelia app on NPM to allow other projects to easily integrate our code. What steps ...

The 'Group' property is not found within the type 'ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>'

I'm encountering a problem while trying to bind a react hook form on radio and radio group. The issue I'm facing is as follows: Property 'Group' does not exist on type 'ForwardRefExoticComponent<InputProps & RefAttributes< ...

Storing User IP Address in Database with Express and Mongoose

I'm looking for a way to store users' IP addresses in mongoDB by using a mongoose model file for the user. Does anyone have any suggestions on how I can achieve this? Here is an example of the schema for the Users module file: const userSchema ...

Duplicating an element in an array using JavaScript

My view model is structured as follows public class ItemViewModel { [Required] public int Id { get; set; } [Required] public int JobId { get; set; } public string ItemId { get; set; } public string ItemN ...

The functionality of Jquery appears to be malfunctioning on the Drupal platform, although it performs

I've built a jQuery carousel that is fully functional when tested locally, but encounters issues when uploaded to a Drupal platform. Surprisingly, the jQuery functions properly when entered through the Console. Here's the jQuery code: carousel = ...

The setInterval function appears to be undefined despite being explicitly defined earlier

Within the HEAD section of my code, I have defined a function like so: <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"> function live() { $.get("http://mydomain.com/script.php", function(data){ var timer ...

Executing a series of actions in React redux synchronously

https://i.sstatic.net/QnZew.png Within the store, there exists an array named visited:[]. Inside a function titled changeInfo, the first task is to clear the array followed by adding an item to it. const changeInfo = (value) => { dispatch(clearVis ...

Struggling with the THREE.OrbitControls functionality

When I dynamically create objects with large coordinate numbers, for example [1000000,1000000,1000000], I run into an issue where rotation does not work properly when navigating to the object using THREE.PerspectiveCamera. In an attempt to address this, I ...

What is the correct way to successfully implement this SQL query that relies on promises?

Currently, I am using MySQL2 to establish a connection between my Node.js application and a MySQL Database. However, I am facing difficulties in implementing promise-based prepared statements as I struggle to create a function that can either successfully ...

creating a post action using Node.js with Express and Angular

Process Overview I have an Angular post that communicates with my Node.js Express backend to send data to an API. My goal is to redirect the user to a different Angular page upon successful post, or display an error message if the post fails. One approac ...

Adjusting the size of the snap increments

When using gridstack, I have the ability to resize my widgets. However, I've noticed that when dragging on the widgets' handles, they snap to specific sizes, which seems to be a fixed amount. If I wanted to set the widget's size to something ...

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

Obtaining JSON values by key name using JQuery

I am trying to extract JSON data using an HTML attribute How can I retrieve JSON values based on the translate attribute and "ed" key? JSON FILE { "open" : [ { "en": "Open", "ed": "Opened ...