The orientation of a 3D model in three.js

I couldn't find an existing three.js quadcopter model, so I decided to create a simulation of one myself.
Instead of making it look like a "plus" symbol, I want it to look more like a "cross," with a rotation of either +45° or -45° latitudinally.

Just to clarify, I'm not looking for a simple vertical rotation like this:

mesh.rotation.y+=THREE.Math.degToRad(45);

I need the rotation to be horizontal, creating a transverse effect like shown in this image:
https://i.sstatic.net/bYkJE.png

You can see what I mean by checking out my code here: https://jsfiddle.net/vcoumu83/25/

Basically, I want the cross to rotate horizontally along the X axis when I move the mouse, following the dotted line in the image.

UPDATE
This is the effect I am aiming for:
https://i.sstatic.net/7ggWA.jpg

javascript3dthree.js

Answer №1

Even though Brakebein's response is accurate, I believe it might be easier for you to adjust the geometry on the XY plane instead of the XZ one, and then perform a rotation on the Z axis.

let x1 = new THREE.BoxGeometry(25, 1, 1);
let x2 = new THREE.BoxGeometry(1, 25, 1);
...
mesh.rotation.z = THREE.Math.degToRad(45);

For more details, refer to lines 36-37 in this example on jsfiddle.

Answer №2

It's a bit unclear what you're looking for specifically. However, by including these lines of code, it seems to replicate the image you mentioned:

mesh.rotation.x = THREE.Math.degToRad(90);
mesh.rotation.y = THREE.Math.degToRad(45);

Take a look at the updated jsfiddle here: https://jsfiddle.net/abc123xyz/30/

Update: Make sure to assign the new rotation value to rotation.y.

mesh.rotation.y = THREE.Math.degToRad(x);

Check out the changes in this updated jsfiddle: https://jsfiddle.net/abc123xyz/46/

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

identify the alteration in course

At the moment, I'm engaged in a school assignment during my high school years. I'm interested in finding out if it's possible to access real-time data on different types of manoeuvres, such as turning left or right. Is there a specific funct ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Incorporating a Jade template using AJAX while attempting to transmit and retrieve data independently from the HTML structure

While working with Express and rendering a Jade template on an ajax call using res.render, I encountered an issue. I wanted to pass JSON variables or Javascript objects along with the HTML content. Is there an elegant way to achieve this, or is it even po ...

javascripthtmlnode.jsexpresspug

JavaScript code to make titles slide in as the user scrolls

Looking for a better way to make all titles slide in upon scrolling instead of coding individually? Consider using a forEach loop! Here's how you can modify the code below: function slideInLeft() { document.querySelectorAll('.subtitle-left ...

javascripthtmlcssfor-loopforeach

`Where can I find resources on connecting components in Angular 2?`

Exploring ways to enhance my website, I am considering allowing users to customize the theme according to their preferences. To start off, I decided to introduce a 'Dark theme' option. In order to implement this feature effectively, I am working ...

javascripthtmlcssangular

Laravel throws an error message "expression expected" when trying to use the @

I keep encountering an issue when attempting to pass a variable from PHP code to JavaScript. Expression expected Here is the code snippet I am using in Laravel 7.0 : <script> let variable = @json($array); </script> Although the code still ...

javascriptphpjsonlaravel-7

Having trouble populating an OnsenUI list with AngularJS parse in Cordova

I have been working on retrieving a list of names from parse and adding them to an onsenui list. The parse query seems to be functioning correctly as I logged the results successfully, but for some reason, the list items are not appearing anywhere. Below ...

javascriptangularjscordovaparse-platformonsen-ui

Utilizing numerous await statements within a single asynchronous function

My async function has 3 awaits, like this: const sequenceOfCalls = async(req, res, next) =>{ await mongoQuery(); await apiCall1(); await apiCall2(); } apiCall1 uses response of mongoQuery and apiCall2 uses response of apiCall1. The issue is ...

javascriptnode.jsasync-awaitpromise

Calculate the number of arrays in an object and then substitute them

Currently, I have an object that is returning the following data: Object {1: 0, 2: Array[2], 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0, 10: 0, 11: 0, 12: 0} My goal is to replace the "Array[2]" with just the number "2" (indicating how many records are in ...

javascriptarraysangularjsobject

Output various strings to the standard output and stream them individually

Is there a way to redirect each string output to standard out to another command? // Example file: example.js #!/usr/bin/env node process.stdout.write('foo') process.stdout.write('bar') After running ./example.js | wc -m, the total ch ...

javascriptnode.jsunixpipestdout

When the input is altered, retrieve all input values within the div and then proceed to update the corresponding

The HTML provided is structured as follows: <div class="filters"> <div class="filter-label">6</div> <div class="filter-inputs"> <input type="number" name="i1" id="i1" value="1" min="0" step="1" /> & ...

javascriptjquery

When collapsing an accordion, Bootstrap radio buttons fail to properly select

I have attempted various methods to achieve the desired functionality of having the accordion content close and open accordingly when checking a radio button, while also having the button visually appear as 'checked'. For a more in-depth example, ...

javascripthtmlcsstwitter-bootstrap

An error has occurred: Unable to access the 'map' property of undefined in Angular 4

I'm looking to integrate chart.js into my Angular 4 project. The plan is to retrieve data from a JSON file and display it on a graph. Everything seemed fine during compilation, but upon opening it in Chrome, I encountered an error stating "cannot read ...

javascriptangulartypescript

Encountering an error when trying to use variable values for D3 chart instead of static json files, which are working

Our challenge is to retrieve JSON values from a variable (data) and pass them to D3 as JSON input. However, we are encountering an error in Firebug stating "data.links is not defined". The chart displays correctly when we use the JSON values from the sampl ...

javascriptjqueryjsond3.js

javascriptcode to execute before loading google maps

I am facing an issue with displaying markers on Google Maps. The problem arises when the array with latitude and longitude values is constructed through an Ajax request. Due to the map being loaded before the initialization of the array, I am unable to see ...

javascriptajaxgoogle-maps

Update the image source every 20 pixels

I am trying to adjust the image source while scrolling down by 20 pixels, so that after 100 pixels the image source changes 5 times, with the initial src image being "falling-05.png". Despite following various tutorials, the implementation doesn't see ...

javascripthtmlcss

Node - ensure that each API call finishes before initiating the next one

Currently, I am encountering an issue with my POST request within the 'add-users' route. I have initialized an array named success and aim to trigger the next API call once a response is received. It seems that the problem lies in sending too ma ...

javascriptnode.jsasynchronous

Unable to retrieve information stored in an object within a Vue component

I'm having trouble accessing the data within the user object. { "channel_id": 2, "user": { "id": 1, "name": "Clyde Santiago", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187c7d606c7d6a7c7d6e28 ...

javascriptvue.jsvue-component

Top method for cycling through an Array in React

I am looking to create a memory game using React for a portfolio project. I have an array of 20 items with 10 different sets of colors. const data = [ // Manchester Blue { ID: 1, Color: "#1C2C5B" }, ...

javascriptreactjsarraysreact-hooks

Managing extensive amounts of data with server-side scripting in a Datatable

I am exploring the use of the datatable plugin to effectively manage a large amount of data. Currently, I am interested in implementing "server side processing in datatables" with the help of server-side scripting. Since I have limited experience with AJA ...

javascriptphpjqueryajaxdatatables

Having trouble loading a base64 image into a React component using webpack

In my images folder, I've created a file called b64Images.js which contains the following: export const placeholder = "data:image/png;base64,longb64string" I'm attempting to import this file into one of my react components using: import { plac ...

javascriptreactjswebpack