sudden swivel when shifting camera while following an object on a flat surface/pathway

I'm relatively new to three.js and I'm eager to create a scenario where a cube or object moves on a flat surface or road. I have managed to move the object in the z direction, but now I want to move the camera as well, giving the impression of a driver in a car.

function move() {
   // Move the cube and camera
   cube.position.z -= 0.06;
   camera.position.z -= 0.06;
}

However, when I run the code, the movement starts correctly but suddenly the world seems to rotate and change direction. Ideally, I want the cube to move with the camera following behind, resembling a car moving on a road. Instead of the world rotating around the x-axis, I want to maintain a consistent movement. I'm unsure why this rotation is occurring.

Here is a live example on JSFiddle

Reference image

javascriptthree.js

Answer №1

Your camera is still focused on its original target because you haven't specified where it should be looking. To make it track the cube in your scenario, adjust your move() function to the following:

function move() {
   cube.position.z -= 0.06;
   camera.position.z -= 0.06;
   camera.lookAt(cube);
}

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

Creating an iPad-inspired password field experience in a text input with jquery: A step-by-step guide

Looking for a plugin that mimics the iPad's password field behavior for credit card number entry. The focus should only reveal the entered digit and then switch to a bullet as the next digit is typed. Additionally, all previously entered digits should ...

javascriptjqueryhtml

What techniques do Python and Javascript use to handle resizing of arrays?

What methods do programming languages like JavaScript and Python use to resize arrays compared to Java? For example, when adding an element to a 10-index array, Java typically doubles the size of the array while languages such as JS and Python may utilize ...

javascriptpythonarraysperformancememory

Exploring ngModel components with a specified class

In my HTML code, I've assigned many elements with ngModel defined as ng-model = "object.[something]". For example: <div class="form-group row" ng-model="object.askUser"> I use this method to keep my purpose clear for these elements. My questi ...

javascripthtmlangularjsangular-ngmodel

What is the best way to divide text into key-value pairs using JavaScript?

I have data in text format from my Raspberry Pi that I need to insert into MongoDB as key-pair values or JSON for my Node.js Application. I'm relatively new to JavaScript and I'm looking for a solution. Any suggestions would be greatly appreciate ...

javascriptnode.jstypescriptmongodb

Can lazy loading be implemented for the video tag using JavaScript?

Currently, I am in the process of working on a project that entails incorporating three videos onto the homepage. However, loading them simultaneously is causing a significant decrease in load time. In addition, I prefer to utilize the <video/> tag ...

javascriptreactjsnext.js

How to effectively manage errors in WCF using JavaScript?

Does anyone have instructions on using callback functions in a WCF Service that is accessible to Javascript? I am particularly interested in retrieving information from the FailureCallback to understand why my method is not working as expected. To clarify ...

javascriptajaxwcfmicrosoft-ajaxwcf-callbacks

How can we bring in prop array values in React?

I've been working on developing a small music player program in React. Is there a way to import all these values together with a single import statement? I noticed that manually inputting the values into the props array doesn't work because the ...

javascriptreactjs

Exploring JSON information containing colons in the labels

I am having trouble accessing JSON data in Angular that contains a colon in the label (refer to responsedata). This is the code causing issues: <li ng-repeat="i in items.autnresponse.responsedata | searchFor:searchString"> <p>{{i.autn:numhits} ...

javascriptjsonangularjs

Ensure there is a sufficient gap between the top and bottom icons within the Material-UI Drawer

I'm having difficulty articulating this, but I'd like to add two different sets of icons to the Drawer component. Set 1 should be displayed at the top in a standard column format, similar to the examples provided by them. Set 2 should go at the b ...

javascriptreactjsmaterial-ui

Spin the object at regular intervals

Recently, I stumbled upon this interactive Pen: https://codepen.io/golle404/pen/BoqrEN that caught my eye. I thought it would be interesting to make the object move every few seconds. My first attempt involved using the following code snippet: setTimeout( ...

javascripthtmlcss

Express encountered an issue when trying to upload a file through AngularJS

I am currently facing an issue with uploading a file to express and subsequently to mongoDB. Despite my efforts, when I attempt to upload the file to express, it appears that no data is being passed through the response. I am utilizing ng-file-upload.min. ...

javascriptangularjsnode.jsexpressng-file-upload

Is it possible to add animated text using anime.js?

var elements = document.querySelectorAll('.content'); anime({ targets: elements, content: 100, }); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script> <span class="content"> ...

javascripthtmlcssanime.js

Utilize Angular to inject an input from a component directly into the header of my application

I am looking to customize my Pages by injecting various components from different Pages/Components into the header. Specifically, I want to inject an Input search field from my content-component into the header Component. I initially attempted to use ng-Co ...

javascriptangularcomponentsinjectng-content

The issue of NextAuth in connection with Spotify failing to display the user's profile picture

I have recently implemented NextAuth v4 and encountered an issue after authenticating with Spotify. Despite successfully retrieving user information from Spotify, I seem to be missing access to the user's profile picture. Here is the data I receive fr ...

javascriptnext.jsspotifynext-auth

What are the drawbacks of utilizing the onClick function in JavaScript?

What is the rationale behind programmers opting not to use onClick function in Javascript? ...

javascriptjquery

Guide on making a personalized object in JavaScript

I am struggling with a piece of JavaScript code that looks like this: var myData=[]; $.getJSON( path_url , function(data){ var len = data.rows.length; for (var i = 0; i < len; i++){ var code = data.rows[i].codeid; var ...

javascriptjqueryajaxjson

Ways to dynamically update a div with data from a JSON response

I'm currently in the process of developing a search platform. I have three static divs on the search results page that display certain content, all containing similar code. For example: <div id="result" class="card"> <img src="hello.png" ...

javascriptjqueryhtmlcssloops

What is the best way to share dynamic content from a DIV or SPAN element on WhatsApp using jQuery?

I’ve been attempting to share the text content of a specific DIV on WhatsApp, but so far I haven't been successful. My goal is to only share a portion of the document (specifically the contents of showques). Below is the code snippet I've been ...

javascripthtmljqueryreactjswhatsapp

Ways to exclusively trigger the onclick function of the primary button when dealing with nested buttons in React.js

Let me elaborate on this issue. I have a List component from material-UI, with ListItem set to button=true which makes the entire item act as a button. Within the ListItem, I have added a FontAwesomeIcon. To hide the button, I set its style to visibility: ...

javascripthtmlcssreactjsmaterial-ui

Transferring information among PHP web pages using a list generated on-the-fly

I am working with a PHP code that dynamically generates a list within a form using data from a database: echo '<form name="List" action="checkList.php" method="post">'; while($rows=mysqli_fetch_array($sql)) { echo "<input type='pas ...

phpjavascriptjquery