Is it possible to enable dragging of a threejs globe on a mobile device?

I have a custom globe created with threejs and I am using orbit controls for interactivity. However, I am facing an issue on touch devices where dragging does not function correctly. On certain browsers like Edge, the globe cannot be dragged at all, while Firefox allows horizontal dragging but scrolls vertically instead. How can I enable proper dragging functionality on mobile devices?

Here is my current orbitcontrols code:

this._controls = new THREE.OrbitControls(this._camera, this._renderer.domElement);
this._controls.rotateSpeed = .08;
this._controls.zoomSpeed = 1.0;
this._controls.enableZoom = false;
this._controls.enablePan = false;
this._controls.enableDamping = true;
this._controls.minDistance = 23.0;
this._controls.maxDistance = 70.0;
this._controls.dampingFactor = 0.1;

Answer №1

The issue lies in the fact that THREE.OrbitControl is designed to only respond to mouse and touch events on the rendering DOM element. However, Microsoft Edge utilizes Pointer Events, which are not recognized by this control. Furthermore, Firefox lacks proper support for touch events altogether. On the other hand, mobile devices with Touch Events should have no problem functioning as expected.

Answer №2

Perhaps you should explore integrating a touch event library like Hammer.js. While it's designed for gestures, I've found that Hammer can also help resolve compatibility problems with straightforward touch interactions.

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

The error message TS2304 is indicating that the name 'Set' cannot be found in electron-builder

I am trying to utilize the AppUpdater feature in electron-builder for my Electron Application. Upon importing the updater in my main.ts file: import { autoUpdater } from "electron-updater" An error is triggered when running the application: node_module ...

Generate a visual distortion effect using WebGL and three.js

I'm currently learning three.js and experimenting with image transformations. After seeing a cool effect demonstrated here, I'm interested in replicating it. Can anyone provide guidance on the steps to achieve similar image transformations? So ...

Learn the process of submitting tag values using JohMun/vue-tags-input feature

I am a beginner in Vue.js and I am looking to implement an input field with multiple tags (user skills) using a Vue.js component. Although I have managed to make it work, I am struggling to figure out how to submit the tags in a form. Below is my code: T ...

Discover the most concise string within the array

Is there a way to determine the shortest string in a JavaScript array regardless of the number of elements it contains? I attempted using var min = Math.min(arr[0].length,arr[1].length,arr[2].length); to find the shortest string among 3 elements in an ar ...

How to implement flash messages in Node.js forms submission process

Recently, I've been attempting to implement a Bootstrap style alert that appears after submitting a contact form using Node JS/Express. My view is based on an ejs template. mailerRoutes.js const nodemailer = require('nodemailer'); const ma ...

Having trouble adding space between paragraphs inside a div element while trying to retrieve its content using jQuery

Issue Description: Currently, I am utilizing the jQuery syntax below to count words: var value = $('#displayContent').text(); Before counting the words, I aim to employ a RegExp in value that concatenates the last word of each sentence with th ...

How can I use JavaScript to loop through a specific attribute?

I have implemented ckeditor inline on a website I created. While it allows me to save data to a database, the issue arises when ckeditor automatically applies its own classes and attributes to certain elements where contenteditable is enabled. It also re ...

The audio.play() HTML element fails to function in Chrome, preventing the audio from playing

I'm experiencing an issue with playing audio in Chrome when the audio.src is not called before the play call, but Firefox seems to handle it fine. Does anyone have any suggestions? You can check out the fiddle link below - http://jsfiddle.net/vn215r2 ...

Is it possible to disregard JQMIGRATE warnings for AngularJS v1.4.5 and proceed with upgrading AngularJS?

I currently have jquery 2.2.4 and AngularJS v1.4.5 integrated into my website. After setting up jquery-migrate-1.4.1, I encountered the following warning: JQMIGRATE: jQuery.fn.attr('selected') might use property instead of attribute The issue s ...

What is preventing bots and crawlers from detecting Next.js meta tags?

I'm currently using Next.js with Typescript and MongoDB to retrieve data. I'm encountering difficulties in rendering the page because the crawler is unable to detect the meta tags. For instance, Bing Search Engine claims that Title and Meta desc ...

Switch out the content within a div upon selection

I'm currently working on a palette board project and facing some challenges when switching to a different theme. The initial page is set to have a Warm color palette, but I intend to alter this once the user clicks on the All theme option. Users wil ...

Performing a PHP Curl request and an ajax query to an ASP.NET page

I am attempting to send an ajax query to an ASP.NET page. Here is the algorithm I am following: 1. There is a form on my webpage; 2. When the user fills in all the fields, they click the submit button; 3. Upon clicking the submit button, JavaScript sends ...

Having trouble determining why the design is not displaying correctly

I'm currently working on a calendar webpage, and everything looks perfect until I add the new JavaScript element. Suddenly, the numbers in the first row start behaving strangely. I've tried to troubleshoot but can't seem to figure out what&a ...

What steps can be taken to ensure that a WebSQL query does not return negative

Here's the code snippet I am currently using: function decrementCart(quantity, id){ db.transaction(function(tx){ tx.executeSql("UPDATE cart SET quantity=(quantity -1) WHERE id=?", [id]) ...

Jquery - The .filter function works successfully when using each() on the console, yet does not produce the expected result

Scenario: In my image gallery, users have the option to select different images by clicking on them. When clicked, the individual image gets a "selected" attribute and a new class is assigned to it. However, I want to restrict this selection process to onl ...

Eliminating TypeScript errors when flattening nested objects

We are facing a challenge in our company with the editing form. One of our team members unilaterally changed the format of the API payload return, causing us to fall behind and play catchup. Unfortunately, the API calls we need to make do not support nest ...

Enhancing the appearance of a checkbox within a ReactJS setting

I'm having trouble customizing a checkbox in a ReactJS environment for IE11. I've tried various approaches, but nothing seems to work. Can anyone offer any advice? Here is the code snippet: CSS: .squared { input[type=checkbox] { bo ...

What is the process for acquiring a comprehensive catalog of Node.js modules?

Currently, I am working on integrating NPM functionality into my Node.js applications. My goal is to be able to analyze the node modules available on my system. When referring to a "module" in this context, it could either be an identifier like "fd" or a f ...

JavaScript's local storage feature seems to be failing in both saving and retrieving data

I'm working on a fun math game where two random numbers and a sign (+ or -) are generated using Math.random(). The user needs to input their answer in the provided input box. However, I am facing an issue with saving and retrieving the score and high ...

Is it possible to showcase multiple items in react JS based on logical operators?

How can I update the navigation bar to display different menu options based on the user's login status? When a user is logged in, the "Logout", "Add Product", and "Manage Inventory" options should be shown. If a user is not logged in, only the "Home" ...