Select a mesh element and turn it until its surface is parallel to the ground

When a user clicks on a mesh object placed on the floor, I want to rotate it so that it aligns with the surface. While I can successfully detect the click and select the mesh, I am struggling with figuring out how to manipulate the face in order to achieve this rotation.

Answer №1

It's difficult to provide a clear answer without a code example, but it seems like you are searching for:

  1. Utilize Raycaster intersectObject to determine both the mesh and face that is being clicked on;

  2. Find the rotation of the face by examining the face normal vector. Remember to call Geometry.computeFaceNormals() before using it if you manually constructed your mesh

  3. Rotate the mesh around the center of the face to the angle, which can be calculated from the face normal vector. A simple method to rotate around Vector3 can be found here

I hope this information proves useful.

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

Sorting files in jquery file upload

Has anyone had experience using the jQuery-File-Upload library from https://github.com/blueimp/jQuery-File-Upload? I'm currently facing an issue and wondering if anyone could assist me in sorting the files in a different manner. By default, this scrip ...

Executing the algorithm through a Node HTTP request results in a significant increase in processing time

My current Node app plots data on an x,y dot plot graph. To achieve this, I send a GET request from the front end to my back-end node server, which then processes the request by looping through an array of data points. Using Node Canvas, it draws a canvas ...

Vue2 - "An error has occurred: Unable to access value property of undefined"

I'm facing an issue with my custom input component in my app where I need to emit change events up to the parent and send those values to the $store using commit/dispatch. While debugging, I observed that the parent can receive the values but I am puz ...

The sorting functionality in Angular.js using the orderBy directive seems to be malfunctioning as it is not

Within this code snippet, @Model.jsonString represents a string. @model WebApplication1.Models.Car @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <html> ... <body ng-app="myModule"> <div ng-controller="myC ...

What is the best tool for syntax highlighting with Vue.js?

Looking for guidance on syntax highlighting with Vue.js. I've included the code snippet below, but for some reason the message "This is a test" isn't appearing as expected. Can someone please point out what mistake I may be making? <html> ...

Utilizing JSON format for processing HTTP requests in JavaScript with Node.js

I'm working with a snippet that retrieves data in JSON format, but I'm interested in manipulating the data instead of just outputting it to the console. var request = require('request'); var headers = { 'Connection': ' ...

Choose the appropriate data type for the class variable (for example, fArr = Uint32Array)

const functionArray: Function = Uint32Array; new fArr(5); The code snippet above is functioning properly. However, TypeScript is throwing a TS2351 error: "This expression is not constructable. Type 'Function' has no construct signatures". I wo ...

Encountering an 'Unknown provider' error while running a unit test with AngularJS and Jasmine

I am facing an issue while writing a unit test for a controller in my application. Jasmine is showing an 'Unknown provider' error related to a provider I created for fetching template URLs. This provider is injected into a config function that is ...

PHP is capable of showing echo statements from the function, however it does not directly showcase database information

My current challenge involves using AJAX to pass the ID name of a div as a string in a database query. Despite being able to display a basic text echo from my function, I'm unable to retrieve any content related to the database. // head HTML (AJAX) $( ...

Packages starting with @ are found in the Node.js ecosystem

What's the deal with libraries in Node.js starting with @ symbols? Is there a specific convention for this? I feel like I'm missing something obvious here. ...

NuxtJs suddenly decided to call it quits, throwing fs errors left and right

As I was diligently working on my NuxtJS SPA, I suddenly encountered a series of errors after refreshing the page. To my surprise, I hadn't made any changes that could have caused this issue. Despite trying everything from npm fixes to reinstalling th ...

Karma-Jasmine: A Guide to Testing the $translate.use Function

THE ISSUE AT HAND: While testing the language selection function, I encountered an error message that reads as follows: TypeError: $translate.use is not a function I have come across similar queries on platforms like SO and various forums, but the solut ...

Obtaining the image with PHP

As a newcomer to PHP and Ajax queries, I am trying to utilize the croppie.js plugin to upload a profile image. However, when I upload the image, it is saved as 1580192100.png. The problem arises when attempting to later retrieve the image based on the user ...

When adding values, they remain in their original positions

I am populating a select dropdown with options using AJAX. These options are added based on the selection made in another dropdown. The first function that appends the data: var appendto_c = function(appendto, value, curcode) { appendto.append("& ...

React Select value remains unchanged after state modification

I'm facing an issue with a select component that should reset to the "Neutral" state after the user clicks the next button. However, it keeps displaying whatever option the user previously selected. The components are structured as shown below. When t ...

Fulfill the promise to retrieve the value contained within

Is there a way to use TypeScript to call the Wikipedia API for retrieving a random page title and save it in a variable for later use? I am struggling with resolving promises as I keep getting ZoneAwarePromise returned. I'm new to both promises and Ty ...

Exploring an Array in Javascript derived from a PHP Array

I have a PHP variable named $TillArray that contains an array. I am trying to pass this array to a Javascript function in order to display an Alert message for each item within the array. Below is the code I have been using: <script type="text/javasc ...

Setting up types for variables in Angular 2 componentsHere is an

I have a model that consists of multiple properties, and I aim to set all these properties with a default value of either empty or null. Here is an example of my Model: export class MyModel { name: string; jerseyNumber: number; etc... } In m ...

Guidance sought on utilizing a callback to retrieve data from mysql using node.js and ejs

I am trying to retrieve the value of foo from the query provided below: exports.get = function(id, cb) { sql = 'SELECT `sidebar`, `test` FROM users WHERE `id` = "' + id + '"'; con.query(sql, function(err, foo) { if (err) ...

What is the best way to duplicate a value and save it in an array?

I have a calendar and I want to be able to copy the selected day's value and store it in an array. Then, if another day is clicked, I would like to add the current day's value along with the previous day's value to the array. Users should be ...