Instructions for aligning an Object3D's face with another face (such as the floor) using object rotation

Situation

Imagine a scenario where there is a floor and an object hovering directly above it.

My Goal

I am attempting to create a function where, upon clicking on a face of the object, the entire object will rotate so that the clicked face is facing the floor.

My Attempts So Far

  1. Clicking on any face of the object triggers the Raycaster to select the first face.
  2. I then replace the object's upward vector with the normal vector of the clicked face using: object.up.copy(face.normal)
  3. Lastly, I call object.lookAt(floor.position)

My expectation was that, due to the new up vector adjustment, the object would align itself to look at the floor based on the clicked face orientation.

However, the rotation does not perform as anticipated. What could be missing in my approach?

Here is the snippet of relevant code:

var intersects = raycaster.intersectObject(cylinder);
    if(intersects === undefined || intersects.length === 0) return;

    let face = intersects[0].face;

    // Set cylinder's upward vector to the normal of the intersected face for reorientation
    // to ensure the clicked face 'looksAt()' the floor:
    cylinder.up.copy(face.normal);
    cylinder.up.normalize();
    cylinder.lookAt(floor.position);

The Complete Code

http://codepen.io/anon/pen/EWRdZq

(UPDATE) The Revised Code

With guidance from @WestLangley's response: http://codepen.io/anon/pen/ryZOvx

Answer №1

If you need to adjust the orientation of an object so that a specific face is facing a certain way, you can achieve this by rotating the object accordingly.

In this scenario, the target direction is towards the negative-y axis, but you have the flexibility to define any normalized vector as the desired orientation.

A potential approach to accomplish this is:

let direction = new THREE.Vector3( 0, -1, 0 ); // initialize once for reusability

...

let object = intersects[0].object;
let normal = intersects[0].face.normal;

object.quaternion.setFromUnitVectors(normal, direction);

Keep in mind that there may be multiple valid solutions to your problem. For instance, the object could still meet the specified criteria even if it's rotated around an axis.

Version: three.js r.84

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

Adjusting firebugx.js for compatibility with Internet Explorer Developer Tools

The firebugx.js file (viewable at http://getfirebug.com/firebug/firebugx.js) is designed to detect the installation of Firebug by checking both !window.console and !console.firebug. However, this method does not account for the native console object in the ...

Employing square brackets for accessing JSON data in JavaScript

I am facing a requirement where I need to extract the value of the JSON data based on the column specified by the user. for (var k = 0; k < arr.length; k++) { for (var i = 0; i < checkedFilters.length; i++) { console.log("value[columnNam ...

Utilize the power of PIXI.js to effortlessly convert your canvas into a high-quality image without encountering

I'm currently working on exporting the entire canvas as a PNG using PIXI.js within a React app that incorporates react-pixi. My version is 6.5 and I've been trying out the following code: // MyComponent.tsx <button onClick={exportImage} /> ...

What sets apart a React component from a function-as-component in React?

React is really confusing to me right now. Take this simple react component for example: export default function Foo(){ return( <div> <div>some text</div> </div> ) } I want to add a child compone ...

Getting a particular year from a Date array in React is simple - you can use built

I am working with a dates array and need to implement a function that can filter out all the dates from either 2014 or 2015 depending on user input. I attempted using substring() method, but it returned an array of the desired 2014 dates along with 2 unde ...

Creating an object efficiently by defining a pattern

As a newcomer to Typescript (and Javascript), I've been experimenting with classes. My goal is to create an object that can be filled with similar entries while maintaining type safety in a concise manner. Here is the code snippet I came up with: le ...

When filling options within an optgroup in a selectbox, the data for each option may override one another

UPDATE: I made a change in my code: $('select[name=productSelect]').setOptions(["All products|ALL", "Products visible to all|VISIBLETOALL=1"]); I updated it to: $('select[name=productSelect]').prepend(["All products|ALL", "Product ...

Ways to address the Uncaught TypeError: Cannot read property 'field' Tabulator error

My Current Task: I have Tabulator table data serialized and saved in my database. At this point in my script, I am retrieving and parsing the data. My goal is to organize the column data into an array to populate my Tabulator table, taking into account col ...

Having trouble making event listeners work with React useState in Next.js?

I'm currently working on a webpage where I want to have a fixed hamburger icon in the top-right corner that, when clicked, opens a navbar. The navbar should close if the user clicks outside of it, and the hamburger icon should reappear. Since Next.js ...

Encountering difficulties running Angular application because of errors related to ɵɵinject and ɵɵdefineInjectable during compilation

Encountering this issue after running npm install: +-- UNMET PEER DEPENDENCY @angular/[email protected] +-- UNMET PEER DEPENDENCY @angular/[email protected] `-- [email protected] Getting this error after compiling: WARNING in ./node_mod ...

How to use jQuery to locate and update the final parameter of a URL

Hello everyone, I've already done some research but couldn't find a solution that fits my needs. Can anyone assist me with this? I currently have a URL "/view/album/4/photo/1" and I am looking to remove the final parameter and replace it with so ...

Trigger the component method in vue.js upon loading

Hello, I am still learning Vue.js and I am facing a challenge that seems simple but I am struggling to solve it. My goal is to make one of the component's methods execute every time it is loaded into the DOM. I have tried using v-on:load but it doesn& ...

You are unable to define a module within an NgModule since it is not included in the current Angular compilation

Something strange is happening here as I am encountering an error message stating 'Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation' when trying to import 'FormsModule' and 'R ...

A div element with the class name "draggable" is

One of my functions sends notifications to a page by prepending a main div with the notification. Here is the function: function displayNotification(notificationTitle, notificationContent, notificationColor, notificationSize) { console.log('Attem ...

What is the simplest way to run a basic express js script?

I am encountering an issue while trying to run a basic express script in JavaScript. Every time I attempt to execute the script, I keep getting an error message stating that "require is not defined". Below are snippets of the code. Thank you! const expres ...

Error: The AJAX request encountered an unexpected token in the JSON response

I am working with the following code snippet: $.ajax({ dataType: 'text', url: '/_/js/answers.json', type: "GET", success: function (data) { alert(data); ...

Is it still necessary to put in so much work to precompile packages for NPM?

As I delve into a new project, the idea of numerous npm packages looms ahead. However, my approach is shifting towards eliminating pre-compiled files. Within the src directories of these packages, only d.ts, ts, js, and mjs files will reside - a radical de ...

How come my MySQL date is decreasing by one day when using JavaScript?

My todo list is stored in a MySQL database with columns for todoTitle and todoDate. However, when I display the todoDate on my website, it shows the date decremented by one day. For example, if the date in the database is 2016-12-20, it will show as 2016-1 ...

Conceal portion in HTML until revealed

I am attempting to create 3 sections within a single HTML file using the <section id="id"> tag, and I want to be able to open each section by clicking a link in the header with <a href="#id">1</a>, and then close it when another section i ...

Timeout for jQuery animations

My jQuery animation script is causing an issue where it does not finish the animation before returning to the parent function. Specifically, the JavaScript code changes a background color, calls the animate function, the animation starts but doesn't c ...