What methods can I use to ensure this car rotates smoothly, whether or not I combine meshes in Three.js?

My current challenge involves creating a car game here. The issue is that although the wheels are rotating, they are not moving in sync with the car itself. Here is the code snippet from my car.js file:


export function createCar(x, y, z, color) {
  const geometry = new THREE.BoxGeometry(0, 0, 0);
  const material = new THREE.MeshBasicMaterial();
  const carCenter = new THREE.Mesh(geometry, material);
  carCenter.position.set(x + 2.5, y, z + 1.25)
  let objects = [carCenter];

  function createWheel(x, y, z) {
    createTorus(0.5, 0.25, "#36353a", x, y, z);
    createTorus(0.25, 0.25, "gray", x, y, z);
  }

  function createBody() {
    createRectangle(5.5, 3, 1, color, x + 2.5, y + 1, z + 1.25);
    createRectangle(2.5, 3, 1, "#e1ebe3", x + 1.75, y + 2, z + 1.25)
  }
  
  function createTorus(radius, innerRadius, color, x, y, z) {
    const geometry = new THREE.TorusGeometry(radius, innerRadius, 16, 100);
    const material = new THREE.MeshLambertMaterial({ color: color });
    const torus = new THREE.Mesh(geometry, material);
    torus.position.set(x, y, z);
    
    objects.push(torus);
    return torus;
  }

  function createRectangle(length, width, height, color, x, y, z) {
    const geometry = new THREE.BoxGeometry(length, height, width);
    const material = new THREE.MeshLambertMaterial({ color: color });
    const rect = new THREE.Mesh(geometry, material);
    rect.position.set(x, y, z);
    
    objects.push(rect);
    return rect;
  }

  function createCylinder(radius, height, color, x, y, z) {
    const geometry = new THREE.CylinderGeometry(radius, radius, height, 32);
    const material = new THREE.MeshLambertMaterial({color: color});
    const cylinder = new THREE.Mesh(geometry, material);
    cylinder.position.set(x, y, z);
    
    objects.push(cylinder);
    return cylinder
  }

  createWheel(x, y, z);
  createWheel(x + 5, y, z);
  createWheel(x, y, z + 2.5);
  createWheel(x + 5, y, z + 2.5);
  createBody();

  function turnRight() {
    objects.forEach(part => {
      part.rotation.y += 0.1;
    })
  }
  
  return {
    objects,
    turnRight,
  }
}

I have experimented with using sin, cosine, and combining meshes without success. Despite spending hours on the problem, I have been unable to make the wheels move harmoniously with the car. I have also tried determining the position in the corner of a box to set the wheel position accordingly. Are there alternative approaches I could explore?

Answer №1

Using THREE.Group in Three.js

Utilizing groups in Three.js allows for local positioning of meshes within the group structure. This means that the positions of objects are always relative to the group they are placed in.

For instance, if a mesh's position is set to (10, 0, 0) and then added to a group with a position of (20, 0, 0), the final world position of the mesh will be (30, 0, 0). This hierarchy helps in organizing parts of a model such as a vehicle, where moving or rotating the parent group will automatically affect all child meshes.

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

Guide on linking draggable elements

Currently, I have a set of div elements that I am able to clone and drag and drop into a specific area. Now, I am looking for a way to connect these divs with lines so that when I move the divs, the lines will also move accordingly. It's similar to cr ...

Using JWPlayer 6 and JWPlayer 7 simultaneously in one project - how is it done?

Trying to incorporate both JWPlayer 6 and JWPlayer 7 into my expressJS, AngularJS project has been a challenge. While they each work independently without issue, bringing them together has proven to be tricky. In my index.html file, I include them separat ...

Cannot trigger a click event on nginclude in AngularJS

I have a question regarding including a new page using the nginclude directive. The click event defined in the included page is not working properly. Main Application: <div ng-app=""> <input type="text" ng-model="ss"/> <div ...

Ways to retrieve the ID attribute value of the third ancestor above

How can I retrieve the ID attribute of the 3rd parent element when a link is clicked? Take for example: <div id="First Div"> <div class="class A"> <div class="class B"></div> <div class="class C"></div> &l ...

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

I am attempting to transmit the minimum and maximum values to PHP using submit through a dual slider bar The static page makes a request to the server-side PHP code <?php include('server/server.php') ?> Below is the JavaScript code ...

Angular 5 arrays within arrays

I'm currently facing an issue with using ngFor on a nested JSON output. The outer loop is working as expected, but the inner loop is not functioning properly. Below is my code snippet: Typescript file import { Component, OnInit } from '@angula ...

In Angular/Typescript, dynamically add a class to a `td` element when it is clicked. Toggle the class on and off

My problem arises when trying to individually control the arrow icons for each column in my COVID-19 data table. By using Angular methods, I aim to show ascending and descending arrows upon sorting but run into the challenge of changing arrows across all c ...

The HTMLElement type does not include the Ionic typescript property

I am currently using Ionic v3 with TypeScript. My goal is to store the file_url in an array after checking if its width is equal to twice its height. However, I am encountering an error: The 'name_array' property does not exist on the ' ...

Can you demonstrate how to incorporate a new line within a for loop?

I have an array of letters and I need to display them on the screen using a for loop. My goal is to make every sixth letter appear on a new line. Here is the code snippet: https://i.stack.imgur.com/lHFqq.jpg <script> export default { data() { ...

Creating a Chrome extension that opens multiple tabs using JavaScript

Currently, I am working on a chrome extension that includes several buttons to open different tabs. However, there seems to be an issue where clicking the Seqta button opens the tab three times and clicking the maths book button opens the tab twice. Below, ...

I'm having trouble with the routing of a Node.js REST API built with Express and Mongoose

I am currently in the process of constructing a RESTful webservice by following a tutorial that can be found at: However, I have encountered an issue where it is returning a CANNOT GET/ reports error. Despite my efforts to troubleshoot and rectify the pro ...

The Countdown feature is currently only functioning on the initial button and not on any of the other buttons

I could use some assistance. I have a download button with a countdown, but there seems to be an issue with the button's functionality. It only works on the first button, or if the second button is clicked first, it starts the countdown on the first b ...

Having trouble making the child process die in NodeJS fork

I'm facing a roadblock here, perhaps it's just a minor issue that I can't seem to solve because of my lack of experience with NodeJS. Currently, I am developing a Bluetooth device that will be controlled by a master application. For prototy ...

Replacing a JSON vault using XHR: A step-by-step guide

Can someone assist me in replacing the JSON data from a JSON file on a website using JavaScript XHR? setagaya.json: {"trains":[{"operation_number":1,"line_id":26007,"station_id":784,"track_number":1,"up":true},{"operation_number":2,"line_id":26007,"stati ...

Event handler or callback function in Socialite.js

Exploring the capabilities of Socialite.js for the first time has been quite intriguing. This JavaScript plugin allows loading social media plugins after page load, adding an interesting dynamic to website interactivity. However, I am faced with the challe ...

Is it possible to direct users to varying links based on their individual status?

import React from "react"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import Link from "next/link"; import { cn } from "@/lib/utils"; import { FaCircleChec ...

How can I add a string before a hashtag(#) in AngularJS URLs?

Can we add a prefix to the # symbol in angular.js URLs? For instance: let's say we have a site: http://example.com/ then when I click on the CSharp page, it redirects to http://example.com/#/csharp when I click on the AngularJS page, it redi ...

When building with Angular using the "ng build" command, the JavaScript file names are altered

I'm currently learning Angular and I've noticed that when creating a new project with Angular CLI, files like runtime.js, polyfills.js, main.js, styles.css are generated. However, after running the ng build command, similar files can be found in ...

Learn how to dynamically import external modules or plugins using the import() functionality of TypeScript 2.4 within the production script generated by Angular CLI

Utilizing the typescript 2.4 [import()][1] feature has proven to be effective for dynamically loading modules. Testing this functionality has shown positive results, especially when importing modules and components located within the same directory. Howev ...

I want to create a feature in Angular where a specific header becomes sticky based on the user's scroll position on the

When working with Angular, I am faced with the challenge of making a panel header sticky based on the user's scroll position on the page. I have identified two potential solutions for achieving this functionality. One involves using pure CSS with pos ...