The Matrixworld of Three.jsMesh is experiencing issues with updating

Good day! I am currently facing a challenge in orienting subpanels on different planes. It seems that the method used to create the mesh for these planes is not updating the matrix and matrixWorld correctly. I need to find a way to ensure that each plane's matrix is updated so I can manipulate the subplanes accordingly. I have attached an image showing the process of generating the geometry. I am utilizing BufferGeometry to define the vertices of the panels and then triangulating them to form the meshes. Please refer to the image linked below for a detailed step-by-step guide. Any assistance on this matter would be greatly appreciated!

Step by step - geometry generation

javascriptthree.js

Answer №1

After some experimentation, I finally cracked the code. By constructing the transformation matrix4 using corner vectors directly, I was able to achieve my goal. This approach may prove beneficial to others as well (see code snippet below):

let vX = new THREE.Vector3(ndes[3][0] - ndes[0][0], ndes[3][1] - ndes[0][1], ndes[3][2] - ndes[0][2]).normalize(),
    vY = new THREE.Vector3(ndes[1][0] - ndes[0][0], ndes[1][1] - ndes[0][1], ndes[1][2] - ndes[0][2]).normalize(),
    vZ = new THREE.Vector3().crossVectors(vX, vY).normalize();

let matrix = new THREE.Matrix4();
matrix.set( vX.x, vY.x, vZ.x, ndes[0][0], 
            vX.y, vY.y, vZ.y, ndes[0][1], 
            vX.z, vY.z, vZ.z, ndes[0][2],
            0,    0,    0,    1);
panels.applyMatrix4( matrix );

Discover more about paneling surfaces here.

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

Tips for incorporating the ternary operator in JSX of a React component while utilizing TypeScript?

I am looking to implement a conditional rendering logic in React and TypeScript, where I need to return null if a specific condition is met, otherwise render a component using a ternary operator. Here is the code snippet I currently have: {condition1 && ...

javascriptreactjstypescript

Uncovering the Solution: Digging into a Nested ng-repeat to Access an Array in AngularJS

I am working with a recursive array in JavaScript: [{ type: 'cond', conditionId: 1, conditions: undefined }, { type: 'cond', conditionId: 2, conditions: undefined }, { type: 'group', conditionId: undefined, ...

javascriptarraysangularjsrecursion

Unable to load a different webpage into a DIV using Javascript

Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with: function loadXMLDoc(filename) { var xmlhttp; if (window.XMLHttpRequest) { ...

javascripthtmlcss

Swagger is unable to locate a user schema when utilizing Yaml files

Hello, I am a beginner using Swagger and trying to create simple endpoint documentation. However, I am facing an issue with my schema type and cannot figure out what's wrong. To start off, I organized my folder structure in the root src directory whe ...

javascriptnode.jsswagger

Exclusive Modal Pop-Up for First-Time Visitors - Utilizing Bootstrap, PHP, and JavaScript

Seeking assistance from the community as I have exhausted my online research efforts. I am currently working on implementing a welcome bootstrap modal in a php environment. Despite being new to php and js, I have managed to make it pop up only once using ...

javascriptphpbootstrap-modalsimplemodal

Baffled by the intricacies of jQuery

As a newcomer to jQuery, I stumbled upon this code snippet and am curious about its function. It seems like it is replacing an element with the id reveal to a link with the class html5lightbox and id reveal. However, the part that puzzles me is $( '#r ...

javascriptjqueryhtml

Using Golang to encode JSON for parsing in JavaScript

I am working with a struct that looks like this: type User struct { Login string `json:",string"` PasswordNonce Nonce `json:",string"` PasswordHash HashValue `json:",string"` CreatedOn time.Time `json:",string"` Email ...

javascriptjsonnode.jsgo

JQuery submit event not triggering object setting

I'm looking to gather input values from a form and store them in an object for an offer. After trying the following code on submit: $(document).ready(function(){ $('#formOffre').on('submit', function(e) { e.preventDefault ...

javascriptjqueryhtmljsonobject

A guide to accessing REST services in AngularJS using basic authentication

I currently have a REST service up and running on my server. Using Chrome Postman, I am able to access this service with Basic Authentication. However, I now want to build a user interface in AngularJS to display the data received from the REST service. T ...

javascriptangularjsrest

Guide on linking an XML reply to TypeScript interfaces

Currently, I am faced with the task of mapping an XML response (utilizing text XMLHttpRequestResponseType) from a backend server to a TypeScript interface. My approach has been to utilize xml2js to convert the XML into JSON and then map that JSON to the Ty ...

javascriptxmlangulartypescriptxml2js

Issues encountered with AngularJs filter search functionality

Why am I having trouble adapting this search filter from here? This is what my code looks like: controllers.js angular.module('starter.controllers', ['starter.services']) .controller('AppCtrl', function($scope, $ionicModal ...

javascripthtmlangularjs

Content will not render when JavaScript generates SVGs

As I delve into the world of JavaScript and SVG to create interactive graphics for a website, I've run into a puzzling issue with programmatically generated SVG paths not being drawn. Below is a sample code that highlights this problem: <!DOCTYPE ...

javascripthtmlsvg

Exploring nested objects with ReactJS and mapping through them

After receiving an object from the backend, I am loading it into a Redux property inside my Component called user. The schema of this object is as follows: { user: 'root', perm: [ "admin", "write", "read", "nodata ...

javascriptreactjstypescript

Disabling the Annoying Video Popup Ad that's Blocking my "Load More" Feature in Selenium

I am currently in the process of scraping around 1000 URLs using Selenium, and I am very close to getting it to work smoothly. Each URL contains a "load more" button that I keep clicking until a Stale Element exception is thrown, which I handle. Everything ...

javascriptpythonseleniumweb-scrapingselenium-chromedriver

Trouble setting YouTube URL with jQuery iframe

I need help with embedding a YouTube video using jQuery. Below is the HTML code I have: <iframe class="embed-responsive-item" id="placeYoutubeVideo" style="display:none" src="#" style="display:none" allowfullscreen></iframe> In my j ...

javascriptphpjqueryiframeyoutube

Unable to scroll to top using div scrollTop() function

Here's the fiddle I mentioned: http://jsfiddle.net/TLkmK/ <div class="test" style="height:100px;width:70px;overflow:auto"> Some text here that needs scrolling. </div> alert($('.test').scrollTop()); Feel free to scroll down ...

javascriptjqueryhtmlscroll

A step-by-step guide on performing requests sequentially within a useEffect hook

My useEffect function triggers a request when changing dependencies (department and two dates fields). useEffect(() => { getFilteredRestReport({ date_start: formatDatePatchPoint(date[0]), date_end: formatDatePatchPoint(date[1]), de ...

javascriptreactjsreact-hooksasync-awaitrequest

The tooltip feature for icon buttons within Material UI list items is not functioning properly as anticipated

Just starting out with Material UI and React, I've encountered a strange UI problem that I can't quite figure out. Hopefully someone here can help me identify what I did wrong. My Approach: I have a List in my code where each list item has butto ...

javascriptcsstooltipmaterial-uilistitem

Trigger an AJAX request by clicking a button using PHP

I've seen this question asked multiple times, but none of the answers seem to relate to my specific situation. I have a button that when clicked, should call a JavaScript function, passing it a PHP variable. The AJAX will then send that variable to a ...

javascriptphpmysqlajaxpost

eliminating various arrays within a two-dimensional array

I need help with a web application that is designed to handle large 2D arrays. Sometimes the arrays look like this: var multiArray = [["","","",""],[1,2,3],["hello","dog","cat"],["","","",""]]; I am looking to create a function that will remove any array ...

javascriptjquerymultidimensional-array