How to move an object in Three.js without using translateZ to go forward

In a scenario similar to many others, I am seeking assistance on how to make an object move forward in three.js based on its rotation. The challenge here is that I am unable to utilize object.translateZ due to the interference it causes with the physics simulator I am using. Below is a link to a working example illustrating my issue: fiddle. Please feel free to explore the fiddle and provide your suggested solution in your response.

My goal is for the cube to progress forward by adjusting mesh.position.x and mesh.position.z according to mesh.rotation.y.

It's worth noting that I have encountered peculiarities with three.js rotations when accessing them via mesh.rotation.y.

Thank you!

javascriptthree.jsrotation

Answer №1

If you're looking to adjust the movement speed of your mesh, consider using mesh.getWorldDirection() to determine the direction in which you want it to move. You can then multiply this direction by a scalar value to control the speed of movement.

const direction = mesh.getWorldDirection();

mesh.position.add(direction.multiplyScalar(moveSpeed));

Check out the code in action here: https://jsfiddle.net/k1swrxjr/1/

Best of luck with your project!

Answer №2

To achieve movement of your mesh, you should adjust the position value within the animate() function rather than in the init function. Here's an example:

function animate() {
        mesh.position.x += 0.1;
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }

In this code snippet, the x position of the mesh will be incremented by 0.1 each time the animate() function is executed.

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

transfer scope variable to scope function

I notice this pattern frequently view: <input ng-model="vm.model"> <button ng-click="vm.method(vm.model)"></button> controller: function Controller() { var vm = this; this.method = function(parameter) { // perform acti ...

javascriptangularjs

Display or conceal a YouTube video with a click

Q1) Is it possible to use JQuery on page load to detect the file name of an image and then dynamically position it on the page with CSS? Q2) What is the most efficient way to achieve this without embedding iframe code inside a specific div.icon element? ...

javascriptjquerycssxhtml

Guide to making a Grid element interactive using the Link component

PostsList component is responsible for rendering a list of posts. The goal is to enable users to click on a post item and be redirected to the specific post's link. const PostsListView = ({ posts, setError, isloggedin }) => { const [redirectCre ...

javascriptreactjsmaterial-ui

Why do `resolutions` not receive support in package.json like they do in bower.json?

It's common knowledge that resolutions are utilized to address conflicts between packages in the bower.json file. I recently went through the package.json documentation, but couldn't locate any support for the resolutions feature. Could there be ...

javascriptnode.jsnpmbower

Linking to an external website using AngularJS for navigation

After developing my angular app, I included an array of menu items that are displayed in the template: <nav id="menu"> <ul> <li ng-repeat="i in menuItems" ui-sref="{{ i | removeSpacesThenLowercase }}" ui-sref-active=" ...

javascriptangularjsangular-ui-routerui-sref

Use jQuery to place tags around the content of existing <li> elements

Using jquery, I have been able to successfully create a list by using the following code: $(list).append(item); (where list is the list reference and item consists of the $('<li>') elements being added). var item = $('<li>' ...

javascriptjqueryhtmlcss

Breaking Down URLs with JavaScript

I am looking to extract specific portions of a URL and here is my progress so far. <script type='text/javascript'> var query = window.location.pathname.split( '/' ); query = window.location.pathname.split( '.html' ); v ...

javascriptarrayssplit

`Incompatibility with Internet Explorer causes AJAX loader GIF to fail when using asynchronous POST requests`

Is there a way to display an AJAX loader gif during an asynchronous POST request on Internet Explorer? It seems that the request process stalls and the updated content is not visible when using Internet Explorer. However, everything works fine on browser ...

javascripthtmlajax

Changing a live request in React

Imagine you have a request that needs to be delayed, similar to how Google Docs waits a moment before sending the "save" request. In browser JavaScript, you could achieve this by implementing code like the following: // Overwrite this global window variabl ...

javascriptreactjsnext.js

Vuetify: the item-text attribute causing issues with v-combobox

As I embark on my journey with Vue.js and Vuetify, I've encountered a simple issue with the v-combobox component that has me stumped: Picture this scenario: I want a combobox that offers three distinct options. The code snippet below functions perfec ...

javascriptvue.jsvuetify.js

Develop your own personalized Angular schematics that produces a file that begins with an underscore

Having trouble with custom Angular schematics file naming. I'm trying to create a theme SCSS file that starts with an underscore followed by a double underscore as a delimiter. For instance, I want the file name to be _mouse-theme.scss, using the nam ...

javascriptangulartypescriptsassangular-schematics

What is the best way to position my logo on top of the stunning space background?

Click here to check out the code on CodePen Please take a look at my code on codepen.io. I am new to Stack Overflow so please be patient with me if I make any mistakes. ;-; I currently have my logo (https://i.stack.imgur.com/W0nWc.png) included in the co ...

javascripthtmlcsslayer

The JSONP file can be successfully retrieved through an AJAX request in the console, however, the data does not display when attempting

Currently attempting to send an ajax request utilizing the following code snippet: $.ajax({ url: "http://mywebsite.com/blog/json", dataType: "jsonp", jsonpCallback: "jsonpCallback" }); function jsonpCallback(data) { console.log(data); } E ...

javascriptjqueryajaxjsonp

Using routes with optional parameters can inhibit the loading of other routes

In my Node.js app based on Express, I have implemented three different routes. app.get('/', function (req, res) { // }) app.get('/findOne', function (req, res) { // }) app.get('/getFour', function (req, res) { // }) Init ...

javascriptnode.jsexpressmongooseejs

What makes an Angular project different from conventional JavaScript projects that prevents it from running in a browser like any other?

When attempting to run index.html from the dist folder in the browser, I encountered issues. This is different from an AngularJS application where simply importing the script file into index.html allows the application to work seamlessly. Why is it not po ...

javascriptangular

Using Javascript regex to remove spaces inside parentheses

Can you provide the specific Javascript regex code for removing spaces only within parentheses? Take for instance: balance( 11010000 ) / balance( 11050000 ) The desired output should be: balance(11010000) / balance(11050000) ...

javascriptregex

Continuous updates triggered by mouse movement with jQuery

Can someone help me figure out why my custom description isn't following my mouse pointer during the 'mousemove' event on an image? I've provided the HTML code below: <!DOCTYPE html> <html lang="en> <head> ...

javascriptjquerycss

Storing transformed values in a React Functional Component: Best Practices and Considerations

Imagine having a complex calculation function like this: function heavyCalculator(str:string):string{ //Performing heavy calculations here return result; } function SomeComponent({prop1,prop2,prop3,prop4}:Props){ useEffect(()=>{ const result ...

javascriptreactjsreact-hooksuse-effectreact-functional-component

Adjust the speed of the remaining divs below to move up when one is deleted using Ajax and jQuery

My div elements are arranged from top to bottom, and when one selected div is removed or faded out, all other divs below it shift up suddenly to fill the gap. While this behavior is functional, I would prefer to slow down the movement of the divs shifting ...

javascriptjqueryajax

Having trouble with adding an event listener on scroll in React JS. Need assistance in resolving this issue

I'm having trouble adding an event listener for when a user scrolls in my web app. componentDidMount = () => { let scrollPosition = window.scrollY; let header = document.getElementById("topBar"); window.addEventListener(&ap ...

javascriptreactjs