What is preventing orbitControls from functioning on a mobile device?

I am currently working with THREE.js and trying to create a 360 video viewer that is compatible with mobile devices. However, I am facing an issue where orbitControls does not seem to be functioning properly on my phone, even though it works perfectly on my computer.

I have searched for solutions and tried different approaches, but so far, I have not been able to find a resolution to this problem. Despite reading that it should work on mobile, I cannot get it to function as expected.

https://jsfiddle.net/wmorris01/3ctv9hdL/2/

controls = new THREE.OrbitControls(camera, renderer.domElement)
controls.enabled = true
controls.touches.ONE = THREE.TOUCH.PAN
controls.touches.TWO = THREE.TOUCH.DOLLY_ROTATE
javascriptthree.jsorbitcontrols

Answer №1

Is there a specific rationale for opting to use r128?

2. You can do without the word "THREE"

controls = new THREE.OrbitControls(camera, renderer.domElement)

implemented in this manner

controls = new OrbitControls( camera, renderer.domElement);

Ensure to include this tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

As for your query about Live Server, unfortunately I lack knowledge in that area. Personally, I utilize bundler (Vite), which you may want to explore as well.

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

Updating documents in MongoDB periodically at specified intervals

I have developed a unique "lowest bid auction" system where users can set a base price, a price drop amount, and a price drop interval. For instance, if a user sets the base price as $1000, price drop amount as $100, and price drop interval as 1 hour, the ...

javascriptnode.jsmongodb

Is there a way to retrieve the `this.$route` data while using vue-apollo?

Currently working on building a GraphQL query with vue-apollo and graphql-tag. When I manually set the ID, everything runs smoothly. However, I'm aiming to dynamically pass the current route's ID as a variable to Vue Apollo. Successful Implemen ...

javascriptvue.jsgraphqlvue-apollo

What is the method for sending raw put data using the request npm package in a Node.js environment

How can I hit an API using the "require" npm package in Node? The API requires raw PUT data instead of PUT fields. Can anyone please guide me on how to achieve this using the request npm package? For example, here is the raw PUT data that needs to be sent ...

javascriptnode.jsrequestnpmput

The placement of the camera results in objects mysteriously vanishing

Currently, I am in the process of developing a Blazor client-side application where I need to incorporate a 3D scene. However, I am encountering a problem that seems to be related to materials. The issue arises with a composition of parallelepipeds, where ...

asp.net-corethree.jsblazor-client-side

Understanding the difference between Parameters in Javascript and Java

Currently, I am facing an issue where I am losing some information while sending an ajax request to a servlet. The specific parameter that I am losing data from is the "comment" parameter. Below are the last 4 lines of my ajax code: var params = "name=" + ...

javajavascriptajax

Experiencing a bug in my express application: TypeError - Unable to access properties of undefined (reading 'prototype')

I've encountered the TypeError: Cannot read properties of undefined (reading 'prototype') error in my javascript file. Despite researching online, it seems that many attribute this issue to importing {response} from express, but I am not doi ...

javascripttypescriptexpress

"Upon completing an AJAX file upload, both $_POST and $_FILES arrays are found

Recently, I've delved into the realm of web development and encountered a hurdle with ajax file uploading... My current setup involves two HTML input fields: one for files and another for a button. <input type="file" name="Frame" id=" ...

javascriptphpjqueryajax

Preload your React Three.js Canvas now!

My software relies on Chromium for displaying UI elements, with a React SPA handling the entire user interface. I utilize react-three-fiber to integrate 3D animations, such as background effects for menus. However, I encounter an issue when transitioning ...

reactjsthree.jspreloadreact-three-fiber

Transferring my JavaScript variable to PHP through Ajax

I'm currently facing an issue where my JavaScript variable is not being successfully passed to a PHP variable using AJAX in order to update my SQL database. The function is being called, but for some reason the data is not being sent to PHP.php. UPDA ...

javascriptphpjqueryajax

JavaScript Lightbox for Full Page Content (or near full page)

One option to consider is always jQuery. I am in search of a lightbox that provides a "full screen" effect. Not necessarily filling the entire screen, but rather covering most of the content on the page. The lightboxes I have come across either only displ ...

javascriptjquerylightbox

Can you explain the distinctions among 'data:', 'data: ()', and 'data()' when working with Vue.js?

While exploring the Vue.js documentation, I came across two ways to define data: data: {} and data() { return; }. data: { defaultLayout: 'default' } data() { return { defaultLayout: 'default' } } However, there is ...

javascriptvue.jsvuejs2

What is the best way to incorporate animation into a React state?

Looking to implement a fade-in animation for the next index but struggling with tutorials using "react transition group" that are focused on class components or redux. https://i.sstatic.net/q791G.png const AboutTestimonials = () => { const [index, se ...

javascriptreactjsnext.jsreact-animations

Regular expressions can be used to extract specific attributes and inner content from a div element within a contentEditable container

Context I am currently developing a tagging system called @Name for my website. Successfully, I have managed to detect names upon keystroke and replace the content with the corresponding div class='tag' data-id='User-id'>Name</di ...

javascriptjqueryregexhtml

Significant issue identified with ajax functionality, requiring immediate attention

After executing the code in the console, I expected to see the ajax object with a readyState of 0 (as I aborted the ajax call). However, Chrome is displaying the number 4 in the console instead of 0. This discrepancy is surprising. http://jsfiddle.net/8yC ...

javascriptajax

Showcasing a dynamically created JSON document on a basic web page

Looking for a solution to display the contents of a result.json file generated by my Java tool on a simple website. I am aware that accessing local files directly with JavaScript is not possible, so seeking alternative methods that do not involve using a w ...

javascriptjavahtmljsonfile

Tips for resolving the error message "TypeError: Converting circular structure to JSON"

I had a straightforward query where I needed to select all from the aliases table. Everything was working fine until I ran npm update. TypeError: Converting circular structure to JSON public async fetchAliases(req: Request, res: Response): Promise< ...

javascriptmysqlnode.jstypescriptexpress

Issue with webpack ProvidePlugin and vendor bundle: The error "angular.module is not a function"

Currently, my Angular application is compiled into a single bundle using Webpack, including all dependencies and app code in one file. I am trying to split this code into two separate bundles: one for dependencies and one for application code. In my webpa ...

javascriptangularjswebpack

Add a trash can or delete icon within every row of a table using Vue.js

I am new to vue.js and I'm struggling to implement a trash icon in each row of a table for deleting rows. Additionally, I'm trying to make the input of a cell act as a dropdown menu or list within the table rows. I recently came across this scrip ...

javascriptvue.jsvue-tables-2vuetify-datatable

What could be causing the React state (array) to be empty within a callback function? Why is it failing to utilize the latest value from the external

I'm facing a challenge that has me stumped. I am attempting to add values to an existing array, but for some reason, the 'state' variable is always empty inside the onmessage callback function. I can't seem to figure out why this is hap ...

javascriptreactjscallbackreact-hooksserver-sent-events

Node.JS file upload fails to maintain the current state of uploaded files

I am encountering an issue with my Node.js server-side script where it successfully uploads a file to a specified directory, but it is not the intended file. The script throws an error message: Request received: POST undefined:1 ------WebKitFormBoundar ...

javascriptajaxnode.jsfile-upload