The Motion of Rotating and Moving Items

Rotating and translating objects can be tricky. While you can successfully perform both actions, the challenge arises when rotating objects as their orientation gets lost -- causing the objects to move in the direction they are facing.

        if( keyboard.pressed("up"))
            objects[movementControls.translate].translateX(1);
        if( keyboard.pressed("down"))
            objects[movementControls.translate].translateX(-1);
        if( keyboard.pressed("left"))
            objects[movementControls.translate].translateZ(-1);
        if( keyboard.pressed("right"))
            objects[movementControls.translate].translateZ(1);
        if( keyboard.pressed("x"))
            objects[movementControls.rotate].rotation.x+=0.1;
        if( keyboard.pressed("y"))
            objects[movementControls.rotate].rotation.y+=0.1;
        if( keyboard.pressed("z"))
            objects[movementControls.rotate].rotation.z+=0.1;

Is there a method available to rotate only the object without affecting the axes?

javascriptthree.js

Answer №1

To include your object within another parent object, use the syntax parent.add(yourobject);. Next, manipulate the parent object by moving it and rotating the child object accordingly.

Answer №2

To address your issue, it seems like utilizing position.applyAxisAngle instead of rotation may be the solution. Here is a helpful example: http://jsfiddle.net/my1bqtv8/

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

Animating SVG while scrolling on a one-page website

Is there a way to incorporate SVG animation scrolling in a single page website? I am inspired by websites like and . The first one stands out to me because the animation is controlled by scrollup and scrolldown actions. I haven't written any of my S ...

javascriptjquerysvgparallaxscrollmagic

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

javascripthtmlcssmodal-dialogshopify

What is the best way to implement a forEach loop within a JavaScript file?

$(document).ready(function() { $("form").on("click", ".addRow", function(){ var newRow = '<div class="row add tr">'+ '<div class="col" ...

javascriptjquerylaravellaravel-8

Issue opening react modal dialogue box

I'm encountering an issue while trying to implement the headless ui modal. I'm attempting to trigger the modal.js script from my home.js file. In my home.js file, I have the following code snippet: function Home() { const [isOpen, setIsOpen] = ...

javascriptreactjsheadless-ui

What are the best ways to enhance performance for ajax requests using Jquery?

Currently, I am in the process of developing a mobile application that utilizes jquery mobile, jquery, and a PHP backend. My issue arises when dealing with certain pages as there are numerous ajax requests being sent and received simultaneously, resulting ...

javascriptphpjqueryajax

When using the Ng --version command on a development package, it throws an error

I encounter an error with a development package when cloning a repository. I would greatly appreciate any advice on how to resolve this issue. https://i.stack.imgur.com/DBp5r.png ...

javascriptnode.jsangularnpm

Rendering the page using ReactDOM.render

Just started with ReactJS, I'm struggling to figure out why my page isn't displaying anything - <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...

javascripthtmlreactjs

magnetic container: stationary container nested within absolutely positioned container

I recently created a page that can be viewed here: [LINK] This page is set up to scroll horizontally, resulting in a row of divs with black borders. However, I am facing an issue with the smaller divs inside (red ones). I want them to stay within the par ...

javascriptjqueryhtmlscrollposition

Pattern for money with two decimal points and a comma as the separator

I have currently implemented regex in the convertNumberToString property, where a comma appears every 3 digits entered. The convertStringToNumber property simply removes the comma to convert it back to a number type. Now, I want to update the regex for t ...

javascriptreactjsregex

The functionality of the handleTextShow function in components>DrinkList.js is not working as expected after integrating an API

While working on my react program, I created a DrinkList.js file to display images of drinks. However, when I attempted to make the images clickable by adding an Onclick function to display their names in the console, errors started flooding in. import Rea ...

javascriptreactjs

Error encountered: attempting to build for the iOS Simulator, although linking a dylib compilation specifically for iOS, such as the file 'TitaniumKit.framework/TitaniumKit' for the arm64 architecture

Whenever I attempt to build my appcelerator app for ios, I encounter this error: ld: building for iOS Simulator, but linking in dylib built for iOS, file 'Frameworks/TitaniumKit.framework/TitaniumKit' for architecture arm64 Despite my efforts to ...

javascriptiosappceleratorappcelerator-titanium

Text that is selected within a contenteditable div: Find the beginning and end points of the highlighted text

<div contenteditable="true">This text is <b>Bold</b> not <i>Italic</i> right?</div> For instance, if the text appears in a bold format, but not italic and the user selects it, how can I determine the exact position ...

javascriptjqueryhtmlcss

The Node.js server is failing to retrieve information from the AngularJS application

Having trouble reading data sent from an AngularJS client to the server via $http.post. Can't seem to figure out where I've made a mistake. var data = $.param({ id:$scope.user_id, }); alert(JSON.stringify(data)); $http.post('/getd ...

javascriptangularjsnode.js

What is the best way to prevent a draggable div from moving past the edge of the viewport?

My situation involves a draggable div that functions as a popup window when a specific button is clicked. However, I noticed that dragging the div to the end of the viewport allows me to drag it out of the visible area, causing the body of the page to expa ...

javascripthtml

What is the process for configuring my form to automatically send to my email upon clicking the send button?

I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...

javascripthtmlcss

Stopping React component click event from bubbling up to document

How do I prevent a click event in a React component from bubbling up to the document? There seems to be an issue that needs fixing! Let's see if we can resolve it on our own. I have a box component with a click event listener, and some link compone ...

javascriptreactjsclick

I am facing issues with getting the delete function to properly function in my React

Issue with Delete Button Functionality in React While I am able to successfully delete an item using axios call in Postman, implementing the same functionality on the front-end in a React component seems to be causing problems for me. <button onSubmit ...

javascriptnode.jsreactjsecmascript-6

How do I go about adding a specific class to every row within a Vue.js table?

I have an html table structured like this : <tbody> <tr v-for="employee in employees" :key="employee.EmployeeId" @dblclick="rowOnDblClick(emplo ...

javascriptvue.jsvuejs2

Issue with Express.js: "opencv" module not found within a Docker container

Currently, I am in the process of setting up the OpenCV bindings for NODE to enable AI functionality on my express server. For this purpose, I am utilizing the Peter Braden Library - https://github.com/peterbraden/node-opencv. However, I am encountering a ...

javascriptnode.jsopencvexpressnpm

Exploring the wonders of Onsen UI's ng-repeat feature combined

Facing a major issue with my app, and I suspect it's due to the asynchronous call. The HTML section looks like this: <ons-list ng-repeat="item in newsEventi.items"> <ons-list-header class="news_titolo_lista">{{item.categoria}}</ons ...

javascriptjqueryajaxangularjsonsen-ui