Driving a Car using THREE.js on the Highway

I'm currently developing a car game using THREE.js. I've encountered an issue where I have created a road using Plane geometry and placed the car on it. Now, I have also made a terrain but am unsure of how to link the car to the road so that it moves on top of the road's surface, similar to real life.

I attempted to address this problem by calculating the height of the vertices on the plane and positioning the car above that height, however, this approach has not been successful for me as shown in the code snippet below.

for(var k = 0; k < ground.geometry.vertices.length; k++){

    localObject.position.y = ground.geometry.vertices[k].y + 1;
}

I would greatly appreciate any assistance on this matter.

javascriptthree.jswebgl

Answer №1

To find the bounding box of the vehicle, follow these steps:

vehicle.design.calculateBoundingBox();
var boundingBox = vehicle.design.boundingBox;

Then, position your ground plane at the minimum y-coordinate of the bounding box.

terrain.position.y = boundingBox.min.y;

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

An alternate solution for achieving synchronous behavior in form submit button click event handling without using the async: false option

Operating with a login form is essential, and our current practice includes utilizing an AJAX call to validate information before proceeding with the login submission. Here is the existing code snippet being employed: (function ($) { var errorMessageH ...

javascriptjqueryajaxasynchronous

Tips for utilizing an Array in React Lifecycle:

Working with Mongo/Meteor 1.3/React has presented an interesting challenge for me. In a basic scenario, I have utilized a wrapper React component to fetch data from a Mongo collection and create an Array. However, when passing this Array to the Child compo ...

javascriptarraysmongodbreactjsmeteor

Utilize JavaScript to assign an identifier to an element created with createElement()

As a beginner in JavaScript, I am trying to set an id into some created tags but it doesn't seem to be working. var d1=document.createElement("div"); d1.setAttribute("class","container"); var b3= document.createElement("button"); b3.setAttri ...

javascripthtml

Displaying a dynamic flag icon in a span element based on the selection from a mat-select

I am working on a mat-select component and I want to dynamically change a flag icon inside a span element in the mat-label based on the selected option. Currently, the initial flag is displayed correctly, but when I click on a different option, the flag d ...

javascriptangularangular-materialngmodelmat-select

What is the reason behind React deciding to skip the final question, even though it has been accurately saved to the

A simple web application was developed to calculate risk scores by asking five questions, with additional points awarded if a checkbox is checked. Despite extensive hours spent debugging, a persistent bug remains: the final question does not appear on the ...

javascriptreactjs

Differences Between Android and JavaScript: Ensuring Library Validity

Validation in JS is provided by the validator library which can be found at https://www.npmjs.com/package/validator Is there an equivalent library for validation in Android? If so, what is the name of Android's library? ...

javascriptandroidvalidation

Experiencing a disappearing session on Express.js happens approximately every 3 minutes (I can relate to this problem as

I am encountering a similar issue to the question mentioned here: Express.js session lost after about 3 minutes Unfortunately, I have not been able to find a solution yet. This is my Session Code: app.use( session({ secret: 'secret', resave ...

javascriptnode.jsexpressexpress-session

Troubleshoot the issue of the service function not being triggered

Seeking help with my Angular project as I am facing an issue with resolve and $resource. Despite spending a whole day on it, I couldn't find a solution. When using resolve to fetch data with $resource and ui-router, the service method never gets calle ...

javascriptangularjsangular-ui-router

Guide on creating a live connection between a slider and a canvas

Currently, I am working on implementing a slider that can dynamically adjust a specific value in the canvas, such as the radius of a circle. Although my code works as intended, I would like the canvas to update in real-time as I move the slider instead of ...

javascripthtmlhtml5-canvas

Using Google Apps Script to retrieve post data from a web application through the `doPost` method

https://i.sstatic.net/2HpSJ.jpg When trying to access formIDArray in my appscript, it returns nothing. How can I properly access the object "FormIDArray[]" from the appscript environment? ...

javascriptarraysobjectgoogle-apps-script

What is the method of aligning content to the left side in a slick slider?

My slider is set up to display three elements, but I'm having trouble aligning one or two elements to the left instead of centering them. jQuery(function () { jQuery('.slider-blog').slick({ arrows: false, dots: true, ...

javascriptcss

The proper invocation of the success and error functions in jQuery is not being achieved for Ajax calls

After successfully sending JSON data to a specified URL using Postman and receiving the required response in JSON format, I intended to send this JSON data to another file by utilizing AJAX post method. However, to my dismay, the Ajax post method failed to ...

javascriptphpjqueryjsonajax

Guide on how to compile template strings during the build process with Babel, without using Webpack

I'm currently utilizing Babel for transpiling some ES6 code, excluding Webpack. Within the code, there is a template literal that I wish to evaluate during the build process. The import in the code where I want to inject the version looks like this: ...

javascriptreactjsbabeljs

Listening to changes in a URL using JQuery

Is there a way to detect when the browser URL has been modified? I am facing the following situation: On my webpage, I have an iframe that changes its content and updates the browser's URL through JavaScript when a user interacts with it. However, no ...

javascriptjqueryhtmliframetypescript

Issues with setting headers after they have been sent - Can you explain why?

How am I setting a header after it has been sent to the client? Here is the code snippet: When a form is submitted, a post ajax request is triggered which returns a JSON object to the client. I have commented out most of the code to troubleshoot, and cur ...

javascriptnode.jshttpexpressfetch

Button to access overlay menu on my map with OpenLayers 3

I am trying to add a menu button on top of my map that, when clicked, will display a window. I have created the map div and the overlayMenu button div, but unfortunately, the button is not showing up where I want it to. I would like the button to be locate ...

javascriptjqueryhtmlcss

Guide on integrating React.js into an HTML development webpage

I can't seem to get this code to work properly. I have saved it as an .html file on my computer, but it's not displaying anything when I try to open it in Google Chrome. <DOCTYPE! html> <html> <head> <script src= ...

javascripthtmlreactjs

Utilizing variables in GraphQL requests

UPDATE: see the working code below GraphiQL Query I have this query for retrieving a gatsby-image: query getImages($fileName: String) { landscape: file(relativePath: {eq: $fileName}) { childImageSharp { fluid(maxWidth: 1000) { base64 ...

javascriptreactjsgraphqlgatsby

Issues with Angular 8 arise when attempting to use JavaScript after pressing the back button in the browser

While working on my Angular 8 project, everything runs smoothly until I hit the browser's back button. Once I do this, my external JavaScript stops functioning. I have tried using JavaScript in various ways, such as importing, requiring, and putting ...

javascriptangular

How can we use forEach on an array or JSON data while sorting by the most recent date?

How can I reverse the order of data in the "forEach" loop so that the latest date is displayed first instead of the oldest to newest? var json = { // JSON data goes here } json.TrackingRecord.MovementInformation.Movement.reverse().forEach(function(it ...

javascriptjson