Challenges encountered when attempting to align faces within Three.JS stemming from the use of two distinct

I'm currently facing an issue with my three.js code.

My goal is to align two objects by selecting two faces and rotating the second face (and object) to match the normal vector of the first object's selected face.

Here is what I have so far:

var normalMatrix = new THREE.Matrix3().getNormalMatrix( object.matrixWorld );
var worldNormal = face.normal.clone().applyMatrix3( normalMatrix ).normalize();
var normalMatrixRef = new THREE.Matrix3().getNormalMatrix( objectRef.matrixWorld );
var worldNormalRef = faceRef.normal.clone().applyMatrix3( normalMatrixRef).normalize();

Where: object represents the object that will be rotated, face is the selected face of that object, objectRef is the stationary object reference, and faceRef is the normal of the object I want to match.

Prior to calling

object.lookAt(worldNormalRef);

, I've attempted to set the 'up' direction using any of the following options:

object.up = new THREE.Vector3(0,0,1); 
object.up = worldNormal;
object.up = face.normal;

Unfortunately, neither of these approaches seem to work as intended. When I perform the action, the target object to be rotated indeed rotates, but fails to align the faces correctly. The rotation appears arbitrary, sometimes along (0,1,0) or similar directions depending on the object's current rotation state.

In theory, using lookAt with a world vector like faceRef should work as long as the 'up' direction is set correctly, but it simply isn't working in practice.

Any suggestions or ideas on how to tackle this issue?

javascriptthree.jsnormals

Answer №1

After diving into my code, I managed to pinpoint the problem and fix it. Hopefully, my solution can assist others facing a similar issue down the line. The 

object.lookAt(worldNormalRef);

requires some tweaking in order for the lookAt function to work properly. Here's how you can modify it by incorporating the new face normals into the object's current position:

//create a point to lookAt
var newPoint = new THREE.Vector3(
    object.position.x + worldNormalRef.x,
    object.position.y + worldNormalRef.y,
    object.position.z + worldNormalRef.z
);

object.up = face.normal;//Z axis up
object.lookAt(newPoint );

Furthermore, remember to set object.up to face.normal (the face you want to align with the reference object) rather than worldNormal as mentioned earlier (which should be removed from your code).

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

Retrieve the data contained within a displayed embed tag that includes a src attribute

Can anyone provide guidance on how to retrieve the content of an embed tag using src attribute? I have an embed tag pointing to a custom page as src. I tried to use jquery to access the rendered content but I am not getting anything back. Any suggestions ...

javascriptjqueryhtml

Communicate through Node.js, with messages that multiply based on the total number of users currently in the chat room

Currently, I am working on a project that involves creating a chat application using Node.js. However, I have run into an issue where the message gets repeated for each user in the chat. For example, if there are 4 users in the chat, the message will be di ...

javascriptnode.jssocket.io

Access-Control-Allow-Origin does not permit AngularJS Origin http://localhost:8080

I'm working on a web application using AngularJS. It's an admin interface that depends on a json-rpc API hosted on a different domain. When testing in my local environment, I encountered the error "Origin http://localhost:8080 is not allowed by ...

javascriptphpangularjs

When activating another function, Javascript failed to trim and hide the div as intended

Before adding another function (*2), my function (*1) was working perfectly. However, after adding the second function, there seems to be a conflict and now it's not working as expected. :( <script type="text/javascript> $(function() { ...

javascriptphpjquery

NodeJS error: Attempted to set headers after they have already been sent to the client

As a beginner, I have encountered an error message stating that the API is trying to set the response more than once. I am aware of the asynchronous nature of Node.js but I am struggling to debug this issue. Any assistance would be greatly appreciated. rou ...

javascriptsqlnode.jsexpress

Schedule Master: A sophisticated tool for time management

I have been following the instructions to implement a date time picker from this tutorial. I downloaded the necessary js and css files and placed them in the respective directories. However, when I click on the calendar icon, the calendar does not pop up. ...

javascripthtmlcsstwitter-bootstrap

Encountering TypeScript errors when utilizing it to type-check JavaScript code that includes React components

My JavaScript code uses TypeScript for type checking with docstring type annotations. Everything was working fine until I introduced React into the mix. When I write my components as classes, like this: export default class MyComponent extends React.Compo ...

javascriptreactjstypescriptcheckjs

Developing an npm library with ReactJs: A step-by-step guide

As a newcomer to React, I am eager to create my own npm library in ReactJS. Taking inspiration from my existing React project, the goal is to transform it into a package (or library) that can be easily integrated into other projects. This means allowing ...

javascriptreactjstypescriptfrontend

Tips on how to retrieve an Observable Array instead of a subscription?

Is there a way to modify this forkJoin function so that it returns an observable array instead of a subscription? connect(): Observable<any[]> { this.userId = this.authService.userId; this.habits$ = this.habitService.fetchAllById(this.userId); this.s ...

javascriptarraysangulartypescriptobservable

What are some ways to utilize JavaScript for expanding an HTML form?

I am in the process of developing a basic web application that allows users to create messages with attached files. multiple html file inputs using this javascript link: http://img38.imageshack.us/img38/4474/attachments.gif The functionality to "attach a ...

javascripthtml

Ways to extract information from JSON files

Currently, I am working on a script to extract viewer count and follower count data from Twitch. While I have successfully retrieved the viewer count information, I am encountering issues with extracting the follower count. The essential information can be ...

javascriptjqueryhtmljson

Having trouble implementing String.prototype in my factory

Currently, I am working on incorporating a function mentioned in this answer. String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 's ...

javascriptangularjs

AngularJS modules are not loading dependencies such as constants or controllers

While searching for the reason why a properly defined factory is not loading, I came across this question. This led me to contemplate on the concept of services being "defined in an angular module". Consider this example: angular.module('d3', ...

javascriptangularjsdependency-injection

AngularJS ng-include nested form configuration

My application utilizes nested ng-includes. The outer include is a login screen for one application while the inner ng-include includes two templates. The login screen is designed in two steps where the email is checked first and then the password entered. ...

javascriptangularjsangularjs-ng-include

Successive promises linked together with varying parameters

Originally, I utilized callbacks for all of my nodejs functions that needed to access mysql or txt files. Unfortunately, this resulted in messy code with callbacks nested inside one another, so I decided to switch to promises. The question now is, how can ...

javascriptnode.jses6-promise

AngularJS document object model selector

My custom directives use jQuery for animation effects because I find angular's built-in ngShow/ngHide to be functional but not visually appealing. I vaguely remember reading in the documentation that Angular has its own DOM selector, something like an ...

javascriptjquery-selectorsangularjsangularjs-directive

Sorting arrays can yield varying results depending on the browser being used

The variations in output between Chrome 70.0, Chrome 69.0, and Firefox 63.0 for the same code are puzzling. var arr = [1,2,43,1233,5546,33,6,11]; arr.sort(() => -1); //[11, 6, 33, 5546, 1233, 43, 2, 1] arr.sort(() => 1); //[1, 2, 43, 1233, 5546, 33, ...

javascriptarrayssorting

Creating Conditional Connections in jsPlumb

Attempting to establish connections between nodes based on specific rules, such as: The "API request" endpoint is restricted from connecting to any node except "Initiate Call". The "Failed" endpoint cannot be linked to "Play Audio", and so forth. Below ...

javascriptjqueryvue.jsjsplumb

When a Vue.js Directive is inserted or bound, it actually takes precedence over the click event

Imagine having multiple dropdowns or elements on the page that all utilize a directive called "closable". This directive triggers an expression if the element clicked is outside of the element using the directive. The intended behavior is that when clicki ...

javascriptvue.jsvue-directives

Confusion arises from the code for processing an Ajax redirect

I finally succeeded in incorporating an Ajax call into my code, but I'm a bit puzzled about how to redirect after the call is made. Below is an example of my script, developed using CodeIgniter: <script type="text/javascript"> function myFunc ...

javascriptphpjqueryajaxcodeigniter