Adjust the camera in Three.js to move in a straight line towards the right

Seeking assistance with moving the 3D camera in a linear motion. The current code I am using rotates the camera around the object, but I am looking to move the camera alongside the object instead.

Desired Outcome:

https://i.sstatic.net/RGMxP.png

Current Outcome:

https://i.sstatic.net/HGjVF.png

Code Snippet:

function MovePositionRight() {
                  var X, sCurrentX;
                  var sCurrentX = viewer.camera.position.z;
               
                  X =  viewer.camera.position.z - 0.5;
                  
                 MovePositionZ(viewer.camera.position.x, viewer.camera.position.y, X);
              }
 function MovePositionZ(X,Y,Z) {
                  //viewer.camera.position.set(0, 0, 15);
                   
                  viewer.camera.position.set(X, Y, Z);
                  viewer.camera.updateProjectionMatrix();
                  viewer.render();
              }

Answer №1

If you want to smoothly move the camera in a straight line, you can achieve this by adjusting the .position property. For example:

camera.position.x += 0.1;

By only modifying the .position attribute and not altering the .rotation, .up, or any other attributes, the camera will move along the specified axis without any rotation.

Take a look at this JSFiddle link to see the effect in action: JSFiddle. Simply changing .position.x += 1; on line 40 will demonstrate the movement.

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

Traverse the JSON array in a loop

I am currently facing an issue with looping through a JSON array that I am passing to PHP. At this point, I am only passing one array and receiving the same array back from the PHP file. While I can loop through the data in JavaScript, I am encountering er ...

Troubleshooting problem in Vercel with Next.js 13 application - encountering "Module not found" error

Encountering a deployment issue with my Next.js 13 application on Vercel. I recently implemented the Parallel Routes feature of Next in my codebase. While pushing the changes to create a new pull request on GitHub, the branch's deployment on Vercel is ...

The distinction between storing data and component data becomes apparent when using Vuex in conjunction with a persisted state

Below is my post.js file in the store directory: import axios from 'axios' import createPersistedState from "vuex-persistedstate" export default { namespaced: true, state: { sample_data: 'Welcome!!', l ...

JavaScript failed to execute

I am trying to make the JavaScript function execute when the subcat-tab class is clicked, but for some reason it's not working. There are no error messages showing up, but nothing is happening. This is within a phtml file in Magento 2. <a href=&qu ...

What is the best way to transfer data between files in Python?

My website code is (ser.html) <div> <a v-bind:href="'ser/'+post.name"> {{post.name}}</a> </div> I am trying to transfer post.name data from this file to another one (det.html). In my views.py file: from django.shortcut ...

Is there a way to terminate an ongoing axios request?

I have been encountering a memory leak issue whenever my browser is redirected away from this component. To resolve this, I tried to cancel it using the cancel token, but unfortunately, it doesn't seem to be working as expected. I am puzzled as to why ...

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

Save the JSON response from JavaScript to a different file extension in a visually appealing layout

I've created a script to generate both the CSR and private key. The response displayed in the <textarea> is well-formatted with newline characters (assuming familiarity with the correct CSR/Private key format). However, I'm encountering a ...

What is the best way to vertically center a button against a video using CSS?

How can I vertically center a button against a video using CSS? Here is my code: https://jsbin.com/curefoyefe/edit?html,css,js,output <video controls="" ng-show="myForm_live_video.live_video.$valid" ngf-src="live_video" width="200" height="200" class= ...

Troubleshooting issue with error handling in graphql mutation hook with react and apollo is not resolving

It seems like I might have overlooked a configuration in my code, but I can't seem to pinpoint where I went wrong. In our application, we have a basic login form. If the correct username and password are entered, everything works smoothly. However, ...

Attempting to conceal a div element along with its contents using AngularJS

I am attempting to use AngularJS to hide a div and its contents. I have defined a scope variable initialized as false and passed it to the div in order to hide it. However, the div is still visible along with its content. <script type="text/javascr ...

Steps for embedding the code into your website

I'm facing an issue with integrating a .jsx file into my website. I tried testing it on a single-page demo site, but nothing is showing up. Can someone guide me through the steps to successfully integrate it onto my site? I've also attached the . ...

What is the best approach to resolving the MongoServerError: E11000 duplicate key error?

Index.Js File: const cookieSession = require("cookie-session"); const express = require("express"); const app = express(); const helmet = require("helmet"); const morgan = require("morgan"); const dotenv = require(&q ...

Execute the function at intervals of 2 seconds until the variable is altered

Is there a way to make sure that the interval function stops running once theImage length exceeds 0? The Code I'm Using var theImages = $('.awesome-slider .slides img'); function checkImages(){ theImages = $('.awesome-slider .sli ...

The epoch time indicates a 12-hour difference

I keep encountering an error with the time showing as 12:00 P.M. When I receive a response in epoch time format 1454092200000, it corresponds to 1/30/2016, 12:00:00 AM GMT+5:30 $scope.shipmentDate = moment(1454092200000).format("YYYY/MM/DD hh:mm"); The ...

Webpack-hot-middleware increases the number of event listeners exponentially

When configuring my new development environment (node server + client with vanilla js), I encountered an issue with webpack-hot-middleware for live reloading front-end changes. The problem arose when using code like: $button.addEventListener('click&a ...

Send a text input to a shell script using node.js and read it from the standard input

I'm using the simple-ssh library to run a shell script on my remote server. The script requires user input for the SSH password and directory path during execution. I want to pass these values as strings using node.js/javascript. ./myscript.sh Verif ...

Upon receiving the ajax request, the entire code page is called back

I'm having trouble saving data using a button in Laravel. When I use console.log, the entire code appears in the console and I don't understand why this is happening. Here is my input field and button: <form action="{{ url('sendcom& ...

Tips for integrating the AJAX response into a Sumo Select dropdown menu

I am currently using Sumoselect for my dropdowns, which can be found at . The dropdowns on my page are named as countries, state, and cities. The countries are shown in the dropdown, and based on the country selected, the corresponding state name should a ...

The function this.listCatModel.push is not a valid operation

I have a dropdown that I want to populate using the following code: this.categoryService.GetListItem(this.GetAllcatListUrl).subscribe(data=>{ this.listCatModel=data, this.listCatModel.push({ id:0, name:'Main Category', parent ...