What changes should I make to the panUp function in Three.js orbit controls?

Currently, I am tinkering with adjusting the behavior of the panUp function in three.js' orbit controls.

By default, this function moves the camera up and down along the y axis. However, I want to change it so that it moves in and out along the z axis instead. Essentially, I am looking for it to mimic the behavior of the panLeft function but on a different axis.

I attempted to tweak the panOffset from:

panOffset.set( te[4], te[5], te[6] );

to:

panOffset.set( te[2], te[1], te[0] );

This adjustment somewhat works, but limits the camera's movement to only the x and z axes without allowing a combination of both. On the contrary, the panLeft function can move the camera freely in any direction.

javascriptcontrolsthree.js

Answer №1

Here is the solution I discovered. Initially, I found that I had a partially working setup with the use of:

panOffset.set(te[8],te[9],te[10]);

However, this was causing unwanted movement along the y-axis. My objective was to restrict movement to only the x and z axes, allowing users to grab and pan a map freely. The resolution came by setting the y value to 0. It's clear now in hindsight!

panOffset.set(te[8],0,te[10]);

Answer №2

Your solution is almost there, but not quite accurate. It's a bit unclear what exactly needs to be changed. In order to enable map panning as if you were dragging across the map, one approach is to modify a single line of code within the OrbitControls.js file.

Around line 116, you should replace this...

v.set( te[ 4 ], te[ 5 ], te[ 6 ] );

With this:

v.set( -te[ 8 ] * 2, 0, -te[ 10 ] * 2 );

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

Dynamic collapsible containers

I discovered a useful feature on w3schools for collapsing elements: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_symbol However, I would like to reverse it so that all elements are initially shown when the page loads, and then ...

javascripthtmlcss

Having issues with AngularJS rzslider failing to dispatch updated slider value

Hello, I am currently using the rzmodule/rzslider in AngularJS. However, after changing the slider to a specific range, the ng-modal is not returning the updated value. It keeps returning the initial value of 10000 that was configured initially. $scope.sl ...

javascriptangularjsangularjs-3rd-party

ng-required is ineffective when used with number inputs that have a minimum value requirement

In my form, I have implemented a checkbox that, when checked, toggles the visibility of a div using AngularJS's ng-show. Within this div, there is an input field of type "number" with a validation setting of min="10000". I am trying to prevent the f ...

javascripthtmlangularjsng-required

Attaching and detaching children to and from parents using A-Frame

I'm currently working on developing an application similar to Google Street View that is able to capture and display images in a 360 Equirectangular format using Aframe. https://i.sstatic.net/hDSCv.gif One idea I have been considering involves makin ...

javascriptthree.jsaframevirtual-reality

Implementing jQuery in Ionic 3: A Step-by-Step Guide

I am attempting to display an external website within a div element using jQuery in Ionic 3. TS: export class HomePage { constructor(public navCtrl: NavController) { $('#loadExternalURL').load('http://www.google.com'); ...

javascriptjqueryionic3

Getting data from an HTML file with AJAX

I have a JavaScript application where I am trying to retrieve an HTML file in order to template it. Currently, I am using the following method: var _$e = null; $.ajax({ type: "GET", url: "/static ...

javascriptjqueryhtmlajaxxml

Is there a way to display a single Vue component in two separate sub routes simultaneously?

const routes = [ { path: '/', component: LogInView }, { path: '/store', component: Dashboard, children: [ { path: '/products', component: ProductsView, }, ] }, { ...

javascriptvue.jsroutesvue-router

Problem with Bootstrap loading state when certain input fields are required

Just starting out with Bootstrap 3 and looking to integrate the loading state button function into my form. I've set up an input field with the required option as shown below. <form> <input class="input" name="title" type="text" required / ...

javascriptjquerytwitter-bootstrapinput

Saving an item using localStorage

I've been struggling to figure out how to make localStorage save the clicks variable even after refreshing the browser. Initially, I attempted using JSON.stringify and JSON.parse but later discovered that using parseInt could be a more suitable optio ...

javascriptlocal-storagephaser-framework

What is the best way to pass props down to grandchildren components in React?

I'm trying to pass some props from a layout to its children. The issue is, it works fine when the child component is directly nested inside the layout, but it doesn't work when the child component is wrapped in another element like a div. Exampl ...

javascriptreactjsnext.js

Exploring Vue.js: Accessing nested elements

Trying to convert this to vuejs has presented some challenges. First off, How do I access nested sub elements? <div ref="tickerwrapper" class="tickerwrapper"> <ul ref="list" class='list'> <li re ...

javascriptjqueryvue.js

Placing an exit button beside an image for easy navigation

Here is a snippet of my code: <style type="text/css"> .containerdiv { position:relative;width:100%;display:inline-block;} .image1 { position: absolute; top: 20px; left: 10px; } </style> <div class="containerdiv"> <ima ...

javascripthtmlcss

Is the output returning before the AJAX call is completed?

Similar Question: How can I get the AJAX response text? When calling a JavaScript method that sends an Ajax request and receives a response in a callback function labeled "success," sometimes the JavaScript method returns a result as "undefined" inste ...

javascriptajaxconcurrency

Feasible: Embedding my complete website using custom HTML code into an iframe

I have the HTML for a website saved in a JavaScript string and I want to display it within an iframe. How can I insert this HTML string into the iframe and make the website appear? I have attempted to use this.src = HTML_STR; this.innerHTML = HTML_STR; but ...

javascripthtmlcssiframe

The :first selector examines the parent's parent as a reference point, rather than the immediate

I am facing a challenge with shuffling large elements within my layout because of floating them and attempting to display them. Specifically, the elements with the class .gallery-large always need to be the first child inside the .item container. There are ...

javascriptjqueryhtmlcss

Animate out Material UI element with zoom effect and then remove it from the

I'm currently working on a dynamic user interface that allows for adding and removing items dynamically. Each item has both an add and remove button, with a special animation effect using Zoom. While this works smoothly when adding new items, I encoun ...

javascriptreactjsmaterial-ui

Is it possible to utilize ag-grid's API to filter multiple checkbox values simultaneously?

I am currently utilizing angularjs and have implemented a series of checkboxes to filter my ag-grid. So far, I have successfully utilized radio buttons and the api.setQuickFilter method for filtering based on individual values. However, I am facing an iss ...

javascriptangularjscheckboxfilteringag-grid

Unable to perform a POST request and send JSON data using AJAX with jQuery at the

It seems like there may be a server issue causing this problem, and unfortunately, I don't have access to our server to troubleshoot. I was hoping that someone else might have a solution or could help me understand the root cause of the issue. The is ...

phpjavascriptjqueryajax

Enhance the JQuery dropdown by padding with zeros at the beginning for smooth incrementing

I have been attempting to customize a date dropdown in Sharepoint because the default minutes dropdown only allows selection in 5-minute intervals. Initially, I was able to make it work with the code below: $("select[id$='DateTimeFieldDateMinutes&apo ...

javascriptjquery

The image remains unchanged in the JavaScript function

My attempt to swap images using jQuery has hit a snag. Upon running the page, it appears that the chase() method finishes executing before the animation has completed. The goal was to create an illusion of chasing between two images by repeatedly replaci ...

javascriptjqueryhtml