Guidelines for utilizing Three.js plane

I'm currently working with three.js plane to calculate the distance from a point to a plane.

After determining the normal of the plane using points a, b, and c as follows:

    const v = a.clone().sub(c);
    const u = b.clone().sub(c);
    const normal = u.cross(v);

I then create the plane like this:

const plane = new THREE.Plane(normal, (?))

What should I provide in the second argument?

According to the documentation:

the negative distance from the origin to the plane along the normal vector. Default is 0.

Can you explain what this means?

If I use the distance of one of the points a, b, or c to (0,0,0) as the second argument, such as

const dist = a.distanceTo(new THREE.Vector3(0,0,0))
, when I try:

plane.distanceToPoint(a); 

No matter what value I use for the second argument, including leaving it empty, I receive a large number instead of zero. How can I position the plane correctly so that the distance to points on the plane is actually zero as expected?

Answer №1

When dealing with three coplanar points, you can simplify the process by utilizing the .setFromCoplanarPoints(a, b, c) method within the THREE.Plane().

To see this method in action, check out an example provided in this SO answer.

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

Issue with Three JS: Unable to load an intricately detailed 3D model

Being a designer without specialized knowledge, I may not be familiar with all the technical specifications of 3D environments. However, for work purposes, we conducted various experiments with importing glTF assets. We utilized the beginner's packag ...

Is it possible to include a div above a centered image?

Currently I am working with ImageFlow and I would like to overlay a div on top of the image when it is clicked, sliding it into the center. I have been looking through the JavaScript file but the function MoveIT() seems to be called multiple times and I am ...

Unable to add key/value pair to object in Node

While using Node, I encountered a strange issue where I was unable to attach the key/value pair broadcastStamp = date to the object "result." Despite confirming that it is indeed an object with typeof, no errors were thrown - the key/value simply did not a ...

Injecting a controller into an AngularJS module within an anonymous function

As a newcomer to the world of javascript and just beginning to work with angular.js, I have a question. I'm wondering if there is a method for injecting a controller into a module that is declared within an anonymous function. This is how my code cu ...

What is the best way to eliminate the "#" symbol from a URL?

I'm currently updating a website that features a hash symbol in every link when switching pages. This causes the page to not refresh everytime I switch, instead it stays on the last position of the site. Where can I locate the code responsible for th ...

Sharing FormikProps between components in React: A step-by-step guide

I am struggling to pass the necessary values and props that Formik requires to the component one level up. My approach involves using several small components for various forms, and I need to pass them through a complex component to be able to pass them do ...

The Typescript SyntaxError occurs when attempting to use an import statement outside of a module, typically within a separate file that contains

I am currently developing a Minecraft bot using the mineflayer library from GitHub. To make my code more organized and reusable, I decided to switch to TypeScript and ensure readability in my project structure (see image here: https://i.stack.imgur.com/znX ...

Creating a hover effect instead of a click event in a Bootstrap 4 dropdown menu

Looking to create a hover effect instead of a click in the bootstrap dropdown menu? Past answers lack jQuery code that can simply be copied and pasted into your script for optimal results. Additionally, previous solutions were written for older versions o ...

How can I identify the nearest ancestor based on a specific class in Angular 8?

In order to achieve a specific goal, let's imagine this scenario: Object A Object B Object C Object D Object D represents my angular component. It is important for me to adjust its height based on the heights of Object A and Object B. Regardle ...

What is the best way to stop div animations when clicking with jQuery?

Upon loading the page, a div animates automatically. There is also a button present. When the button is clicked, I would like to create a new div and animate it the same way as the first one. However, when this happens, the position of the first div also ...

Moving from one section to the next within a web page

I am looking to add animation to my web app. When clicked, I want to move only the ID table column from one div to another div while hiding the other column. However, I am struggling with figuring out how to animate the movement of the ID column (from the ...

Tips for customizing the scrollbar appearance in ngx-datatable

Currently, I am utilizing the ngx datatable within my Angular application and have come across an issue with customizing the scrollbar style specifically for this table. .ngx-datatable::-webkit-scrollbar-track{ border-radius: 8px !important; } Unfortu ...

Adjust the dimensions of the thead, tbody, and td elements on the fly

I've implemented this property in a .css file on the table shown below and there are 9 records. .fixed tbody td, thead th { width: 5.2%; float: left; } In my scenario, when there are 4 columns, the width should be 23.2%; for 5 columns ...

Calculate the vector 3 for the child object using Three.js

I currently have a Vector3 in a specific position. Within my scene, I have the following child objects: planet = new THREE.Object3D(); city= new THREE.Object3D(); street= new THREE.Object3D(); scene.add(planet); planet.add(city); city.add(street); I am ...

Iterate through each entry in the database and identify and fix any duplicate records

In my form, I have a JSON array that includes the name and value of each input. I am attempting to add an "optionprix" attribute for each input with the "optionname" class based on the corresponding value of the input with the "optionprix" class. Here is ...

Adding multiple text as label and sublabel in a React MUI Tooltip can be achieved by utilizing the appropriate

I'm struggling to incorporate a MaterialUI Tooltip into my React application with two separate text lines. The first line should serve as the main title, while the second line functions as a sublabel. In this screenshot provided, you can see where I ...

Adjusting the background hue of the 'td' element within an ajax request

When I press a button, an ajax call is triggered below. In this call, I append 'td' elements with values to a table. Specifically, on the line ''</td><td>' + result[i].preRiskCategory +', I am attempting to change ...

What is the purpose of the setDrawRange function in the Three.js library?

I've been diving into a three.js codebase. While studying the code and the documentation, there's one thing that's puzzling me. In this particular code snippet. http://jsfiddle.net/w67tzfhx/ there exists the following piece of code. fun ...

What is the process for implementing Autocomplete in JsHelper?

Is it possible to create an Ajax Autocomplete using only pure JsHelper in JavaScript? Thank you, Celso ...

Combining multiple objects in an array to create a single object with the aggregated sum value can be achieved using JavaScript

I am working with an array that contains numbers of array objects, and I need to merge these arrays into a single array with unique values for content and the sum of values for total as shown in the desired result below. Any assistance would be greatly app ...