Move the camera in Three.js along a path between two vectors

I created a basic scene and came across a tutorial at to help me move the camera: 

var timer = new Date().getTime() * 0.0005; 
camera.position.x = Math.floor(Math.cos( timer ) * 200);
camera.position.z = Math.floor(Math.sin( timer ) * 200);

However, I noticed that it only rotates the camera in a circle and I'm struggling to smoothly move the camera from one point to another with a specified speed. For instance, if the camera is initially at coordinates (0,0,0), I want it to move to (100,0,100) while facing that point. Is there a way to achieve this through code or did I miss an official function? Thank you.

javascript3dthree.js

Answer №1

If you're looking to enhance your animations, I highly recommend using tween.js:

const animateCamera = new TWEEN.Tween( camera.position )
  .to( {
    x: newPosition.x,
    y: newPosition.y,
    z: newPosition.z}, 1500 )
  .easing( TWEEN.Easing.Sinusoidal.InOut)
  .start();

This code snippet will smoothly move the camera to a specific position in 1.5 seconds with various transition effects available for added visual appeal.

Answer №2

Appreciate the response, I also discovered that this issue can be resolved through coding.

camera.lookAt(new THREE.Vector3(moveVectors[currentIndex][0] * ((time - moveBaseTime+1)/100000) + camera.position.x * (1-((time - moveBaseTime+1)/100000)), moveVectors[currentIndex][1] * ((time - moveBaseTime+1)/100000) + camera.position.y * (1-((time - moveBaseTime+1)/100000)) , moveVectors[currentIndex][2] * ((time - moveBaseTime+1)/100000) + camera.position.z * (1-((time - moveBaseTime+1)/100000))));
camera.position.x = moveVectors[currentIndex][0] * ((time - moveBaseTime)/100000) + camera.position.x * (1-((time - moveBaseTime)/100000));
camera.position.y = moveVectors[currentIndex][1] * ((time - moveBaseTime)/100000) + camera.position.y * (1-((time - moveBaseTime)/100000));
camera.position.z = moveVectors[currentIndex][2] * ((time - moveBaseTime)/100000) + camera.position.z * (1-((time - moveBaseTime)/100000));

The concept involves setting a timer, which gradually increases until it reaches 1. As the timer progresses from 0 to 1, the equation should be: CURRENT_POSITION*(1-timer) + TARGET_POSITION*timer; as the timer approaches 1, the current position*(1-timer) becomes zero and the target position*timer results in the final target position.

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

Transferring Variables from WordPress PHP to JavaScript

I have implemented two WordPress plugins - Snippets for PHP code insertion and Scripts n Styles for JavaScript. My objective is to automatically populate a form with the email address of a logged-in user. Here is the PHP snippet used in Snippets: <?p ...

javascriptphpjquerywordpress

How can we convert milliseconds to the corresponding date and time zone in Java?

1)I am trying to determine the user's timezone and current time using the following code snippets: Calendar currentdate1 = Calendar.getInstance(); TimeZone tz = Calendar.getInstance().getTimeZone(); System.out.println("time zone"+tz); System.out.pri ...

javajavascriptjqueryajaxjakarta-ee

Why does my counter keep incrementing by more than one every time?

As I work on creating a test in jQuery, I've encountered an issue with my counter variable count. It seems to increase by more than one when the correct answer is used. function nextQuestion(){ $('#submit').show(); $('#next&apo ...

javascriptjquery

Encountering a "Parsing error: Unexpected token, expected ";" " when developing a React application with the provided code

I am currently working on developing a React application, and I have encountered an issue in my app.js file regarding the render function. Despite being new to JavaScript, I am unable to figure out why this error is occurring. Apologies if it is due to a s ...

javascriptreactjs

Is there a way to delay the start of this until a legitimate answer is provided in a pop-up window?

Is it possible to delay the loading of this content until a prompt box is answered with a valid response, and have it only appear once a month? Do I need anything beyond JS and HTML for this functionality? <script language="javascript"> function ...

javascripthtml

Repeated URL causes Node to redirect

I am currently working on a project that involves redirecting users if they enter a specific URL, especially for redirecting from a Heroku domain. During my testing phase on localhost, I noticed that the redirect URL keeps getting repeated: http://localh ...

javascriptnode.jsexpress

Remove duplicate elements from a JSON array

How can I add each item in an array for each duplicate? Transform: [ { "uuid":"EE877ABD-932F-4B4C-AB23-B324363B0B60", "planning":[ { "uuid":"6D680178-9B05-4744-A004-163D4B3E1E84", "star ...

javascriptangularjsjson

Stripping away AM | PM from date variables

Is there a way to accurately calculate the difference between two datetime values in minutes without including AM|PM? When attempting to trim out the AM | PM from my code, I encounter errors (specifically NaN minutes). How can I safely remove this element ...

javascriptjquery

Error encountered when attempting to resolve Angular UI Router provider

Having difficulty with integrating a resolve into a state using Angular UI router. Strangely, it works perfectly fine in another section of my code. I've organized my code into different component areas structured like this: /app /component-dashbo ...

javascriptangularjsangular-uiangular-ui-router

What are the best practices for presenting Motion JPEG binary data streams using Angular, Ionic, and JavaScript?

I am developing an application for a device that will receive a POST request and send back a binary data stream in the format of multipart/x-mixed-replace. My goal is to display this stream on a specific section of my app's homepage. After conducting ...

javascriptangularjsionic-frameworkstreaming

Emphasize a passage by clicking on a different section of text

Seeking Assistance I am currently customizing this template which incorporates the MixItUp plugin. My query pertains to highlighting the "filter tab" upon clicking on the corresponding text when hovering over each image, a task I find challenging as a new ...

javascriptjqueryhtmlcss

Opting for a .catch over a try/catch block

Instead of using a traditional try/catch to manage errors when initiating requests like the example below: let body; try { const response = await sendRequest( "POST", "/api/AccountApi/RefundGetStatus", JSON.stringify(refundPara ...

javascripttypescripterror-handling

Using Phonegap alongside ons-scroller and ons-button

Recently, I have been using Phonegap with the Onsen UI system on iOS devices. I encountered an issue where buttons included within an ons-scroller were not clickable when running on an iPad or iPhone. Here is the code snippet that caused the problem: < ...

javascriptioscsscordovaonsen-ui

Issue with nodes/JavaScript: Array objects not being properly updated

Being new to Javascript and Node.js, I attempted to code a simple program that generates an array of planes with varying index values. I started by defining a plane object with default values and tried to update the index value in a for loop. However, whe ...

javascriptarraysnode.jsjsonfor-loop

Using Typescript to typecast in D3.js

Utilizing the D3 graph example available here. I've defined my data object as shown below: interface ID3Data { age: string, population: number } const data: ID3Data[] = [ { age: "<5", population: 2704659 }, { age: "5-13", population: 4499 ...

javascripttypescriptd3.js

Trouble with Angular: Passing output between child components is not working

Just dipping my toes into Angular, I started learning it yesterday for a take-home job interview project. Please excuse any rookie mistakes in advance. For some hands-on practice, I decided to work on a basic project where the main component (app) has two ...

javascriptangularfrontendcomponents

Design a model class containing two arrow functions stored in variables with a default value

I am looking to create a model class with two variables (label and key) that store functions. Each function should take data as an input object. If no specific functions are specified, default functions should be used. The default label function will retur ...

javascripttypescript

Having trouble with updating a Firebase database object using snap.val()

I'm trying to figure out how to update a property within the snap.val() in order to make changes to my Firebase database. function updateListItem(listItem) { var dbRef = firebase.database() .ref() .child('userdb') .child($sco ...

javascripttypescriptfirebasefirebase-realtime-database

Sending an Ajax request to C# code

UPDATE After some research, I discovered what seems to be the "correct way" to handle the issue by using a combination of JSON.stringify and creating a model, as explained in this thread. I still can't figure out why the original approach didn't ...

c#javascriptjqueryajax

The Jasmine test in my Angular project is experiencing a timeout issue, displaying the error message "Async callback was not invoked within 5000ms", despite the fact that no async function is being used in the

Reviewing the source code: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { IonicModule } from '@ionic/angular'; import { HomePage } from './home.page'; import { LevelGridComponent } from &a ...

javascriptangularunit-testingtestingjasmine