Transform THREE.planeGeometry into a THREE.plane using THREE.js

I'm currently attempting to adjust the placement of a THREE.plane for localClipping, but I'm encountering some difficulty. It crossed my mind - is it feasible to generate a planeGeometry, customize it, and then transform its position and orientation to create a THREE.plane in its stead?

This method could be beneficial for setting up clipping planes' positions.

Answer №1

When aligning a THREE.Plane with a planar Mesh that has a PlaneGeometry, it's important to consider the mesh's position and quaternion (or rotation). In this case, you want the plane to match the orientation of the mesh.

An efficient way to achieve this is by using the method

plane.setFromNormalAndCoplanarPoint()
.

The normal represents the direction perpendicular to the rotated plane mesh. The coplanar point can be any point within the plane mesh; typically, its position is used for this purpose.


var plane = new THREE.Plane();
var normal = new THREE.Vector3();
var point = new THREE.Vector3();

normal.set(0, 0, 1).applyQuaternion(planeMesh.quaternion);

point.copy(planeMesh.position);

plane.setFromNormalAndCoplanarPoint(normal, point);

Implemented in three.js r.96

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

What is the best way to have my sliding panel automatically close when I click outside of it?

I have created a sleek sliding navigation panel for my website that appears when the screen width is reduced. Although I am satisfied with how it functions currently, I would like the panel to close when the user clicks/taps outside of it. What adjustments ...

Using slashes in the import statement versus using require statement

Note: I am currently running on node version 14.1 Here is the line of code I'm experimenting with: import "module-alias/register"; This results in the following error: Error [ERR_MODULE_NOT_FOUND]: Cannot find module The error seems to point to t ...

Create a function in JavaScript that is able to accept a variable number of objects as arguments

I have a good grasp of how to pass infinite parameters in a function in JavaScript. But what about accepting any number of objects as parameters in a function? This is my current implementation: function merge<T>(objA: T, objB: T){ return Object. ...

What could be causing my webpage to freeze every time a filter button is selected?

Tasked with developing a webpage similar to Pinterest by utilizing data from a JSON response. Each JSON object contains a service_name key, which can be manual, twitter, or instagram. I made an effort to implement three filter buttons to only display the r ...

Is it possible to utilize JStestDriver for testing JavaScript code embedded within JSP files?

Just a quick question: Is it feasible to conduct unit testing, specifically with JStestDriver, on Javascript code that is embedded within JSP files? Or do I need to extract it into separate external javascript files? ...

Obtain a pointer to the timestamp within a embedded Kibana chart on an HTML webpage

The image at the specified link shows a black box labeled @timestamp displaying date and time information. Unfortunately, viewing the image requires a reputation of 10. Link to image: https://www.elastic.co/assets/bltde09cbafb09b7f08/Screen-Shot-2014-09-3 ...

The JSON data parser does not support the use of single quotation marks

Using PHP, I am storing user "comments" from my website in a database and escaping special characters with mysql_real_escape_string(). This helps to avoid any issues with single quotes (') or double quotes ("). To display these comments on the website ...

Troubleshooting Angularjs: Why isn't the HTML displaying the variable value?

Trying to display the value of an AngularJS variable in HTML using this code: <div ng-controller="MyTextbox"> <p>Last update date: {{nodeID1}} </p> Here's my angularjs controller code: angular.module("umbraco").controller("MyTex ...

Having trouble organizing a list of objects based on changing keys

Below is the implementation of a custom pipe designed to sort records: import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'sortpipe' }) export class SortPipe implements PipeTransform { transfor ...

The ideal scenarios for employing functional setState

Lately, I've been delving into the world of React, immersing myself in tutorials and explanations on how to manipulate elements in different ways. One aspect that has caught my interest is the setState function, which allows you to update or override ...

How can we show a div element when hovering over another element using css-in-js?

Is there a way to use material ui withStyles component in order to show information only on hover for a specific div? ...

Divergent find function behavior in jQuery when applied to div or tbody

I've encountered an issue while using the jQuery find selector by Id with a div and tbody. Let me simplify my problem for better understanding. HTML <div id='iamdiv'>HELLO</div> <table> <tbody id='iamtbody' ...

Ways to incorporate conditional logic with URL query parameters in Next.JS

I'm trying to implement conditional logic based on a URL query. In this scenario, I want to greet Kátia Fantes dynamically when she visits localhost:3000/katia-fantes. Any suggestions on how to achieve this? import { useRouter } from 'next/rou ...

Discovering a locator based on the initial portion of its value

Here's a piece of code that is used to click on a specific locator: await page.locator('#react-select-4-option-0').click(); Is there a way to click on a locator based on only the initial part of the code, like this: await page.locator(&apos ...

Enhance the versatility of the image upload script

My script successfully previews an uploaded image for a single upload. Now, I want to apply this script to multiple image uploads and make the readURL function dynamic so that I don't have to repeat lines of code. $(".patient_pic").on("change",funct ...

JavaScript is unresponsive and fails to display

I attempted to incorporate my initial Javascript snippet into a browser to observe its functionality. However, upon adding these lines directly into the body of my HTML code (even though I am aware that there are more efficient methods), no visible changes ...

Implementing a document click event to reset timeouts using JQuery

I'm having trouble resetting a timeout timer every time there is a click interaction with the document. The clearTimeout function doesn't seem to be working as expected. Here is the jQuery code snippet: $(document).click(function(e){ $("#vidB ...

What is the best way to access a field from a different table within a loopback environment

In my Loopback setup, I have two models named Permissions and langs_translate that I am working with in a loop. Here are the structure of the tables: Permissions: -------------------------- | id | icon | link | -------------------------- | 1 | da ...

Verify whether the field includes a minimum number of numerical digits

I am currently using this script to validate whether a field is empty or not. The script works well for me, but I would like to add a condition that the field must contain at least 10 digits (numbers). If it doesn't meet this requirement, I want to di ...

Clicking on the div will redirect the page to one destination, while clicking on the anchor tag will redirect the page to a different destination

I have a div containing an anchor tag, like so: <div onclick="redirect to one location" style="height:200px;width:200px"><a href="http://www.google.com" >text</a></div> The div has dimensions of 200px by 200px and on click, it sho ...