How to prevent panning on mobile devices in Three.js using Javscript?

Currently working on my 3D project using three.js and everything is running smoothly on my laptop. I'm utilizing OrbitControls for camera movement, but I have disabled right-click panning to only allow camera rotation. However, when testing on a mobile device (iPhone), using two fingers allows me to move the camera instead of just rotating it. Is there a way to prevent this behavior on mobile devices?

this.controls = new OrbitControls(this.camera, this.renderer.domElement)
this.controls.enableDamping = true
this.controls.maxPolarAngle = Math.PI * 0.45
this.controls.mouseButtons = {
  LEFT: THREE.MOUSE.ROTATE,
  MIDDLE: THREE.MOUSE.DOLLY,
  RIGHT: ''
}

Update function:

_RAF() {
    requestAnimationFrame(() => {
      this.water.material.uniforms[ 'time' ].value += 1.0 / 60.0
      this.controls.maxDistance = 10000.0
      this.controls.minDistance = 10.0
      this.controls.update()
      this.camera.updateProjectionMatrix()
      this.renderer.render(this.scene, this.camera)
      this._RAF()
    })
  }
javascriptmobilethree.js

Answer №1

It appears that you are not completely disabling panning, but rather altering the mouse action used by controls.

To properly disable or enable panning, you should utilize the enablePan method.

If you only wish to disable panning on mobile devices, you can set a break-point to conditionally enable or disable panning:

this.controls.updatePanning = () => {
  const minWidth = 780 // Define your minimum breakpoint for enabling panning.
  if (window.innerWidth >= minWidth) {
    this.controls.enablePan = true;
  } else {
    this.controls.enablePan = false;
  }
}

Then, simply call the above function in your update loop:

_RAF() {
    requestAnimationFrame(() => {
      this.water.material.uniforms[ 'time' ].value += 1.0 / 60.0;
      this.controls.maxDistance = 10000.0;
      this.controls.minDistance = 10.0;
      this.controls.updatePanning();
      this.controls.update();
      this.camera.updateProjectionMatrix();
      this.renderer.render(this.scene, this.camera);
      this._RAF();
    });
  }

There are multiple approaches you can take with this. For instance, you may choose to execute this function only once instead of every frame.

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

My attempt to use the Redux method for displaying data in my testing environment has not yielded

I've been attempting to showcase the data in a Redux-friendly manner. When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected. For this purpose, I implemented the ...

javascripthtmlcssreactjsredux

Tips for incorporating validation/restrictions into react-datepicker

I've been working on implementing restriction and validation in a react-datepicker component. I'm utilizing redux-form for validation and normalization purposes. Issue: I've noticed that neither the normalizing function nor the validation f ...

javascriptreactjsreduxredux-formreact-datepicker

Utilizing Ajax and Jquery to dynamically adjust CSS properties, dependent on data from a specific MySQL row

I've been working on a system to automatically update a Scene Selection page whenever a new number is added to the permission table in Mysql. The PHP for the login and retrieving the number from the members table is working fine. My issue now lies wi ...

phpjavascriptjqueryhtmlajax

The form within the dynamically loaded AJAX content is malfunctioning

My webpage is set up to load content from a separate file (content.php) into a div and refresh it every 5 seconds. In the content.php file, I have a form (basic HTML without javascript) that works fine when accessed directly at (example.com/content.php). ...

javascripthtmlajaxforms

Struggling with PHP variables and AJAX JavaScript

Hey everyone, I've made some edits and have a new question regarding a similar issue. On test.php in my Apache server, I have a PHP script that connects to a database and retrieves data from a table. <?php $con = mysqli_connect("localhost", "user" ...

javascriptphpjqueryajax

Tips for navigating to a specific row within a designated page using the Angular Material table

Utilizing angular material, I have set up a table with pagination for displaying data. When a user clicks on a row, they are redirected to another page. To return to the table page, they must click on a button. The issue arises when the user needs to retu ...

javascriptangulartypescriptangular-material

A few of the npm packages that have been installed globally are not functioning properly

After installing npm globally, I checked its version using npm -v and it displayed correctly as 7.13.0. Similarly, I installed heroku-cli globally, but when I ran heroku --version, it returned the error message: C:\Users\MyName\AppData&bso ...

javascriptnode.jsnpmmernheroku-cli

The lookat() function in three.js isn't functioning according to my requirements

Here is the code snippet I am working with: http://codepen.io/usf/pen/pGscf This is the specific section of interest: function animate() { //sun.rotation.x = t/1000; sun.rotation.y += 0.01; t += 0.1; earth.position.x = Math.sin((2*Ma ...

javascriptcamerathree.js

What is the best way to increment the value of an input by any number using JavaScript and HTML?

My code is causing a NaN error, and I'm struggling to identify the root cause. Even providing a specific number in the addnum function did not resolve the issue. <script> var result = document.getElementById("result"); var inputVal = ...

javascripthtml

Is there a way to apply an event function after adding elements through append?

When I click the button, a div is appended inside the body. However, I am trying to make it so that when I click on this newly appended div, an alert message pops up. I have tried implementing this with a highlighted area, but have been unsuccessful. How c ...

javascriptjqueryhtml

Manipulate DIVs by sliding them and resizing their contents with JQuery

Can someone help me with sliding the top div up and down, and the left div left and right? I wrote some code for this but seem to be facing some issues. When I slide the left div, the center content falls down momentarily. Additionally, the code doesn&apos ...

javascriptjqueryhtmlslider

Controlling opacity with jQuery animate() function using a click event

I have a specific requirement for an animation. When the button is clicked, I need the element to transition from 0 opacity to full 1 opacity within 300 milliseconds. The issue I am facing is that when the button is clicked, the animation does not work a ...

javascriptjqueryhtmlcss

Ways to retrieve the innerHTML content in Mozilla Firefox

Look at this HTML code snippet: <div id="divTest"> Hello <input type="text" id="txtID" value="" /> <input type="button" onclick="getForm();" value="Click" /> </div> Also, check out this JavaScript function for retrievi ...

javascriptjquery

How to access the dynamic route's path in Next.js when using Server Components?

Obtaining the dynamic route path in a Next JS server component poses a challenge. This task is simple when working with client components. If you are working on src/app/[id]/page.tsx "use client"; import { usePathname } from "next/navigatio ...

javascriptreactjstypescriptnext.js

adjustable canvas dimensions determined by chosen images

I would like to create a canvas image based on the selected image <canvas id="canvas" ></canvas> <input type="file" id="file-input"> Using JavaScript: $(function() { $('#file-input').change(function(e) { var file ...

javascriptjqueryhtmlcsscanvas

Can one extract request data from an rxjs-timeout-error?

Currently, I am working on enhancing our error handling system, particularly in providing better descriptions of errors in both general and testing environments. My focus is on an Ionic app, but I am facing challenges with the rxjs timeout method. One asp ...

javascriptangularrxjs

Vue.js v-cloak lifecycle method

Currently, I am working on a project where I have styled v-cloak with display: none, and it is decorating the body. As a result, everything remains hidden until the Vue instance is ready. I have created a component that inserts a chart (using highcharts). ...

javascripthighchartsvue.js

Steps for creating a TypeScript class that can implement an interface

As a beginner in TypeScript, I am looking for help with the following code snippet: async function sleep(ms: number) { return new Promise((resolve, reject) => { setTimeout(() => resolve(), ms) }) } async function randomDelay() { ...

javascripttypescriptinterface

Choosing multiple images by clicking on their alternative text with jQuery

I am currently working on a project that involves clicking on a thumbnail to enlarge the image and display its name (alt) below it. I have made progress, but there seems to be an issue where only one image is displayed no matter which thumbnail I click on. ...

javascriptjqueryhtml

Performing an Ajax request to the server and then sending the retrieved data back to Charts.js

After extensively researching ajax, php, and related topics, I'm facing a challenge. I want to take an array retrieved from my database and integrate it into a chart.js script. The data retrieval seems fine as per Firebug inspection, but the issue ari ...

javascriptphpjqueryajax