Creating a PlaneGeometry in Three.js using the Math.Plane library

I'm currently working on generating a least squares plane through a set of points in Three.js. I've defined a plane as shown below:

var plane = new THREE.Plane();
plane.setFromNormalAndCoplanarPoint(normal, point).normalize();

My understanding is that I'll need to utilize this plane to create a Geometry in order to construct a mesh for visualization within the scene:

var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(dispPlane);

I've attempted to follow the guidance provided in this answer to generate the geometry. Here's what I have so far:

plane.setFromNormalAndCoplanarPoint(dir, centroid).normalize();
planeGeometry.vertices.push(plane.normal);
planeGeometry.vertices.push(plane.orthoPoint(plane.normal));
planeGeometry.vertices.push(plane.orthoPoint(planeGeometry.vertices[1]));
planeGeometry.faces.push(new THREE.Face3(0, 1, 2));

planeGeometry.computeFaceNormals();
planeGeometry.computeVertexNormals();

Despite following these steps, the plane isn't being displayed and there are no error messages pointing out potential mistakes.

Therefore, my question is: How can I use my Math.Plane object to create a suitable geometry for a mesh?

javascript3dthree.jslinear-algebraplane

Answer №1

This method is designed to generate a visual representation of a plane using mesh. It's uncertain how useful this would be for least-squares fitting, though.

 // Defining the plane
var dir = new THREE.Vector3(0,1,0);
var centroid = new THREE.Vector3(0,200,0);
var plane = new THREE.Plane();
plane.setFromNormalAndCoplanarPoint(dir, centroid).normalize();

// Creating a simple rectangle geometry
var planeGeometry = new THREE.PlaneGeometry(100, 100);

// Aligning the geometry with the plane
var coplanarPoint = plane.coplanarPoint();
var focalPoint = new THREE.Vector3().copy(coplanarPoint).add(plane.normal);
planeGeometry.lookAt(focalPoint);
planeGeometry.translate(coplanarPoint.x, coplanarPoint.y, coplanarPoint.z);

// Generating a mesh using the geometry
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00, side: THREE.DoubleSide});
var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(dispPlane);

Answer №2

let material = ...;
let plane = new THREE.Plane(...);

// Aligning with the plane
let geometry = new THREE.PlaneGeometry(100, 100);
let mesh = new THREE.Mesh(geometry, material);
mesh.translate(plane.coplanarPoint());
mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0,0,1), plane.normal);

Please note that using Plane.projectPoint() instead of Plane.coplanarPoint() may provide a center point that is closer to an arbitrary point.

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

One item remains invisible in the shadows, while the other two stand out under the light

I'm experiencing an issue with three cube objects in my scene. Despite setting castShadow to true for all of them, only one object casts a shadow while the other two do not. Here is a screenshot depicting the problem: https://ibb.co/z6Vwxmf I have v ...

three.jsshadow

Component for liking items built with VueJs and Laravel

I'm currently delving into the world of VueJS, and for my personal project, I'm pairing it with Laravel 5.7. However, I'm facing a bit of a challenge when it comes to implementing a simple feature - a "like" button/icon. Here's the sce ...

javascriptlaravelvue.jsvue-component

Generate an array consisting of characters within a designated range

I recently came across some Ruby code that caught my attention: puts ('A'..'Z').to_a.join(',') The output was: A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z I'm curious if there is a similar way to achieve this ...

javascriptrubynode.js

Meteor JS failed to load the CSS file due to an unsupported MIME type

Currently, I am working on a meteor js 1.8 app. I have created a layout and now I want to add CSS to it. Here is the structure I am following: imports -ui --stylesheets --bootstrap.min.css --font-awesome.min.css --skins.css --forms.css All my CSS files ...

javascriptjquerycssnode.jsmeteor

JavaScript's utilization of local variables and callback functions enables developers to enhance the

After exploring the information in this particular post, it became evident that my issue was different. While working on creating functions for managing mongoDB GridFS, I encountered a perplexing behavior that I will illustrate through a simplified example ...

javascriptmongodbgridfs

Is there a vanilla JavaScript alternative to using jQuery's document on click event for handling link clicks?

Does a standalone JavaScript version of this exist? document.addEventListener('click', function(event) { event.preventDefault(); here.change(this); }); I am specifically interested in adding event listeners to any dynamically created links, ...

javascriptjqueryajaxaddeventlistener

Instructions for adding a new line in a textarea on Internet Explorer when reading from a file

I'm facing a situation where I need to display the contents of a file (let's call it abc.txt) in a textarea on a JSP page. However, when I try to do so, all the contents are displayed in one line without any line breaks or carriage returns. Inte ...

javascriptjqueryhtmlajaxtextarea

Converting Fancy Text to Plain Text using Javascript: A Step-by-Step Guide

I am currently developing a search feature in JavaScript that supports both regular and fancy text styles. However, I have encountered an issue with the search functionality not working when searching for: Fancy text value: ...

javascriptunicode-normalization

Ways to dynamically fetch data by merging the response outcome with a dynamic parameter from the route in Vue.js

For the first time, I have been tasked with dynamically retrieving object parameters from the URL parameter. I am aware that I can use this.$route.params.[somelink-parameter] to obtain the URL parameter, and I understand how to retrieve and store the respo ...

javascriptjsonvue.js

Obtain JSON information from a backend Node.js server and transfer it to the frontend HTML

I am currently facing an issue while trying to access JSON data and display it on the frontend screen. I have exported it in Node.js and attempted to import it into a script tag in HTML, but unfortunately, I am not able to retrieve the data. Is there a sol ...

javascripthtmlnode.jsreact-fullstack

Combining Arrays with Identical IDs into a Single Object

When two objects in the data array share the same id, only the first one will be chosen and the rest will be discarded. It is important that multiple assets with the same id are grouped together in one object. const myMap = cardDetails.map((card) => { ...

javascriptreactjs

Tips for incorporating JavaScript into your Selenium WebDriver workflow using Java

Looking to integrate JavaScript with WebDriver (Selenium 2) using Java. After following a guide listed on the Getting Started page, I found an initial instruction to run: $ ./go webdriverjs Curious about the specific folder/location where the above ...

javajavascriptselenium-webdriver

Utilizing ARC4 Encryption with Javascript on iOS devices

I keep getting a blank result when running this code. It doesn't display anything. [self.webview loadHTMLString:@"<script src=\"http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/rc4.js\"></script>" bas ...

javascriptiosobjective-cencryptionjavascriptcore

What's the best way to switch between colors in a Vue list?

I have a custom tree-view component that I'm working on: <template> <li class="main__li list" :style="{'margin-left': `${depth * 20}px` ,'background-color': `${col}`}" @click="toggle(e); getEl( ...

javascriptvue.jsvuejs3

Establishing a proxy server to support the development of a Create React application

Recently, I initiated a react application with the help of create-react-app. Following that, I executed the npm run eject script to unlock access to all files. Subsequently, I incorporated express and crafted a server.js file which is located on the same l ...

javascriptnode.jsexpressreactjscreate-react-app

Having trouble making updates to a MongoDB document through Node.js

I am working on the development of an online course platform and facing an issue while adding new video lectures to a specific course. After creating a course, any attempt to add new content triggers an update request, even when adding video lectures that ...

javascriptangularjsnode.jsmongodbrest

Verifying if a specific class input exists within a table using JavaScript

Issue Description: I currently have a table with x number of rows and y number of columns. The structure of most rows contains similar inputs in terms of class and type, but not all of them. I perform calculations on the entire table using JavaScript bas ...

javascripthtmlasp.net

Incorporating Node.JS variables within an HTML document

After building a simple site using Express, I discovered that Node.js variables can also be used with Jade. exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; This is the code for the index file: ext ...

javascripthtmlnode.js

Create a form in a React component that allows the user to input information

My challenge is to create a functionality where each time the add button is clicked, it should dynamically add an input field that I can save. It's similar to this example, but with inputs instead. The complexity arises from the fact that the inputs a ...

javascriptreactjsinputaddition

Navigating attributes originating from the key in JSON: A guide to effective management

I'm facing a situation in my application where I have a JSON object structured like this: var pages = { home: { title: "Home", description: "The home page", file: "home.html", url: "/home" }, blog: { ...

javascriptjsonattributesderived