Instead of rotating, let's try tilting the three.js mesh

I have recently come across THREE.js and I am absolutely mesmerized by its capabilities. Although I am not yet at an advanced level to code on my own, I have been searching for examples that align with my requirements but so far, I haven't found one that fits the bill.

The issue I'm facing involves moving an object using the mouse. While the X axis functions perfectly, the Y axis seems to rotate around the object instead of tilting it left and right.

Below is my current code snippet:

(insert your code here)

I am aiming to achieve a tilt effect when the mouse is moved left or right, without changing the "X" rotation unless there is vertical movement as well. Currently, the camera appears to rotate around the object rather than tilt in the desired direction.

Any suggestions or solutions would be greatly appreciated!

javascriptthree.jstilt

Answer №1

micnil's advice proved to be correct, prompting me to alter the rotation order to "ZYX". I am now transitioning to the task of merging my two scripts seamlessly.

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

Transforming complex mathematical equations into executable code using the node.js platform

Looking to implement a mathematical formula found at the following link: https://en.wikipedia.org/wiki/Necklace_(combinatorics)#Number_of_bracelets into node.js for calculating the total number of distinct ring sequences that can be created with n length ...

javascriptnode.jsmathformulabioinformatics

Transforming card dimensions with Bootstrap

I am currently working on my web portfolio and I am looking to create a card format that includes an image thumbnail with text below it. However, I am facing an issue where I cannot control the size of the initial image, resulting in misaligned cards. htt ...

javascripthtmlcssbootstrap-4

Generating a CSV file with data from a collection in Meteor.js

I have successfully written the code to display a list of records on a webpage, but now I want to download it as a CSV (comma separated values) file. Currently, the page is showing the list in the following format: Name Address Description Bob ...

javascriptmongodbcsvmeteor

Divergent outcomes observed in various browsers when fetching XMLHttpRequest responseText

Utilizing XMLHttpRequest responseText to retrieve a server txt file and populate the contents of that file into an editable text box has been my recent task. The txt file consists of concise lines of letters separated by new lines. Users have the option to ...

javascripthtmlajaxinternet-explorerget

Obtain the value of a range using JQuery

I made an attempt to retrieve the value of JQuery's range slider when it changes. Here is how I tried: On the HTML/PHP page: <div class="total"> <label for="">Total</label> <p><span class="monthrc"></span ...

javascriptjqueryhtmljquery-ui

`Generating Interactive Pie Charts with ASP.NET`

After receiving a helpful suggestion from Gthompson83 about using jqPlot, I am facing a new issue... The current javascript code on my page (the data is just temporary): function CreatePie(div) { var data = [ ['Heavy Indust ...

javascriptasp.netcharts

Error in the THREE.WebGLProgram shader due to the presence of constant v1 being defined

While working with Three.js, I encountered an error when attempting to load an HDR as an environment map for the scene. Here is the error message: https://i.sstatic.net/YhXiM.png The problematic line of code is: https://i.sstatic.net/XmpU3.png It seems ...

three.js

Updating styled-components variables based on media queries - A step-by-step guide

My current theme setup looks like this: const theme = {color: red}; Within my components, I am utilizing this variable as follows: const Button = styled.button` color: ${props => props.theme.color}; `; I am now faced with the challenge of changin ...

javascriptreactjsstyled-components

The Node program does not pause for the loop to finish executing

I've attempted to utilize async/await and promises, but I'm having trouble getting this code to execute sequentially. The script loops through a document, parses it, saves the data to an array, and then writes the array to a .json file. However ...

javascriptnode.jsfor-loopasynchronouses6-promise

Retrieve the associative array from the user input by utilizing jQuery

How can I create an associative array from a form containing multiple text inputs using jQuery (or directly in JS)? Here's an example of the form: <form> <input type="text" name="name[13]" value="test 1" /> <input type="text" name="nam ...

javascriptjqueryhtmlajax

What is the best way to retrieve a complete DynamoDB scan response using aws-sdk-js-v3 without object types included in the marshaled response?

After struggling with the AWS JS SDK V3 documentation and examples, I decided to share my findings to help others. The official SDK docs were frustrating and misleading, especially when it came to showing marshaled output properly. While the DDB Doc client ...

javascriptaws-sdkaws-sdk-js

Utilizing Smart Table for Data Binding with JSON Dataset

I need help binding a JSON file to a smart table. How can I use the loop function for iteration? The design of the smart table is displaying, but the data from the JSON file is not binding. Here is the JSON file: [ { "year": 2013, "id ...

javascriptangularjsjson

The AngularJS $http.post method mimicking a successful $.ajax request is causing a 401 UNAUTHORISED error

I have been working on rewriting a functional $.ajax server call to utilize AngularJS $http.put. However, the $http method returns a 401 unauthorized error. The original ajax call I am attempting to rewrite is structured like this: $.ajax({ url: domain ...

javascriptajaxangularjshttp-headers

Order an array in Javascript based on the day of the month

I am trying to create a unique function that changes the order of a string based on the day of the month. For instance, if the input string is "HELLO" and today's date is the 1st of April, the output should be "LHEOL". On the 2nd of April, it should ...

javascriptjqueryarraysdateshuffle

Tips for incorporating a personalized label to a selected marker using the react-google-maps library

Just recently, I followed a tutorial on using the React-Google-Maps library. However, I encountered a challenge at the end: I want my app to read coordinates from a file and display them on the map as markers. How can I set a label like "1" for one marker ...

javascriptreactjsgoogle-mapsmarker

Obtain the native element of a React child component passed through props, along with its dimensions including height and width

Is there a way in React to access the native HTML element or retrieve the boundaries of an element passed as a child in props? Consider the following component: class SomeComp extends Component { componentDidMount() { this.props.children.forEa ...

javascriptreactjs

Displaying a variety of values based on the specific URL

I am attempting to display specific values from an array of objects based on the current URL. For example, if the URL is "localhost/#/scores/javelin," I only want to display the javelin scores from my array. Here is an example of what my array looks like: ...

javascriptangularjsarraysangularjs-ng-repeat

ReactJS: Error - Unable to execute this.props.data.map as a function

I am currently using reactjs and facing an issue when trying to display JSON data, either from a file or server: Uncaught TypeError: this.props.data.map is not a function In my quest for a solution, I have explored: React code throwing “TypeError: thi ...

javascriptajaxjsonreactjs

Transferring user inputs to the server through jQuery-AJAX

I've encountered some issues when trying to send form data inputs to the server. Despite alerting each form input, I keep getting empty alerts. Here's my code snippet: With my current code, it only alerts 0. However, posting normally seems to wor ...

javascriptphpjqueryajax

Disabling Scroll for a HTML Input Tag

My input field has a long value and is set to readonly. Although I have applied overflow-x: hidden; to it, scrolling is still possible on mobile devices. I want to disable this scroll behavior. Can anyone provide a solution? Thank you for your assistance. ...

javascripthtmlcssreactjsnext.js