Implementing a 300 milliseconds delay on touch events in three.js

Currently, I am working on incorporating touch events in a three.js project using TrackballControls. However, I have noticed that my code is not functioning properly. While examining some successful examples such as http://threejs.org/examples/canvas_geometry_cube.html, I observed a slight delay of 300 ms at the beginning. This delay significantly impacts my project. How can I eliminate this 300 ms delay?

It's worth noting that my project utilizes both single and multi-touch interactions.

I did some research on fastclick (https://github.com/ftlabs/fastclick), but it appears to lack support for multi-touch functionality. If my understanding is incorrect, please provide clarification.

Answer №1

I recall coming across some information regarding this topic: http://code.google.com/p/chromium/issues/detail?id=133391

Based on the details provided in the linked issue, it seems that the 300 ms delay in Chrome for Android is designed to accommodate a double-tap zoom gesture. Following a modification made in October 2012, this delay will not be enforced if the page cannot be zoomed. Therefore, in this particular scenario, adjusting your page's meta viewport settings to ensure the content fits the device screen and avoids zooming should address the issue.

(Disclaimer: I have not personally tested this solution; rather, I came across this information previously. I am unsure whether this behavior exists in the current version of Chrome for Android, and I do not know if other mobile browsers, like the default Android browser, exhibit similar behaviors.)

(Additional disclaimer: While I am employed by Google, it is important to note that I am not involved in the Chrome project and my response does not represent Google's official stance on this matter.)

Answer №2

At long last, I discovered a solution... I had been using touch to drag and drop an object within the scene... The underlying issue was as follows... The 300 ms delay of touch events were accumulating to create a significant delay... To address this, I implemented a condition where touch move events are processed with a 300 ms delay... meaning if one event is handled, the next event will be processed after 300 ms... and it's running smoothly...

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

Navigating through choices in select element using webdriverio

Sample HTML: <select id="random_text"> <option value="option1">asadka_TEST</option> <option value="option2">Peter Parker</option> <option value="option3">Clark Kent</option> <option value="optio ...

javascript loops selenium foreach webdriver-io

Eliminate HTML nodes that are not currently visible

I am currently developing a Vue/Vuetify application that showcases a large number of images (10-20k) in a grid view along with some additional information. These images are grouped into different sections, and clicking on an image opens an overlay displayi ...

javascript html vue.js vuetify.js

Exploring the functionality of promises and synchronous functions that produce errors

Building and testing a function simultaneously can be challenging. While testing is essential in theory, it often becomes cumbersome in practice. The function I'm working on takes a string as input and throws errors if something goes wrong. In case o ...

javascript node.js unit-testing promise bluebird

Integrating information into <script>var t = {{{$data}}}</script> through server-side rendering

Check out this demo: <script> var temp = {{{$data}}} </script> I enjoy inserting the $data into the <script>, but in vue2.0, the {{{}}} is now deprecated and replaced with v-html. However, the v-html does not seem to meet the requir ...

javascript node.js vue.js

Guide on changing the CSS of MUI parent components to set the display of buttons to 'block' in React

I'm facing a challenge with my modal design for mobile view. I need the buttons to display in a stacked format, one above the other, taking up the full width of the modal. I've been exploring ways to override the existing CSS within the component ...

javascript css reactjs material-ui

Wait for the playwright to detect a specific and exact change in the inner text

There is a specific innerText that transitions from Loading to Play after 2-3 seconds. I want to wait for this change to happen before proceeding. Currently, I am using the following code snippet: let attempt = 0; let maxRetries = 4; let payerButtonStatus ...

javascript node.js playwright

Troubleshooting problem with autoplay on a Parallax Content Slider in IE8

Does anyone know how to hide the arrows on pictures in IE8 when the mouse is not hovering over them? I've been struggling to find a solution and would really appreciate some help. ...

javascript jquery css internet-explorer internet-explorer-8

What techniques can I employ to ensure that withLatestFrom() effectively interacts with itself?

In my program, I have an intermediate stream that is connected to a source, but it can also trigger events from other sources (such as user input). In another part of my code, there is a derived stream that needs to compare new data from the intermediate w ...

javascript rxjs

The inconsistency of Selenium's StaleElementReferenceException error and the variability of pageload completion codes is causing issues with clicking on elements

Big shoutout to the amazing stackoverflow community for always providing assistance. Lately, I've been grappling with the frustrating "StaleElementReferenceException" issue and haven't found a universal solution yet. Some helpful members have rec ...

javascript java jquery html selenium

Uncaught Error: The property 'post' is not defined and cannot be read

As I strive to organize my code by separating it into different JavaScript files, the use of 'import/export' or 'module.exports/require' for importing the app module is causing issues. It restricts me from utilizing methods like post an ...

javascript node.js express

Troubleshooting "These dependencies were not found:" error message during deployment on Netlify, despite successful execution of yarn run serve on local machine

Currently, as I am creating a website using Vue.js, yarn, and Netlify. The build process works smoothly on my local machine when running yanr run build. However, upon deploying it through Netlify, an issue arises: 5:17:55 PM: failed during stage 'bui ...

javascript vue.js netlify

Tips on pairing elements from a ngFor processed list with another list using ngIf

If we have a list such as the one shown below: elements = [ { id: 1, name: "one" }, { id: 3, name: "three" }, { id: 5, name: "five" }, { id: 6, name: "six" }, ]; lists = [ { id: 5, name: "five" }, { id: 9, ...

javascript angular typescript

Tips for showing personalized results depending on the contents of specific fields

In order to determine eligibility for posted files, I am working on creating a pop-up modal where users can enter their regional school code in a text or number field. For example, if the code entered is 11002, the user should receive a recommended messag ...

javascript html css

Conflict in the naming and scoping of IE7 and IE8

While reviewing some code, I encountered a problem in Internet Explorer 7 and 8. Despite the constructor executing properly when stepped through, upon returning I received an error stating "Object does not support this property or method." How frustrating! ...

javascript internet-explorer

Implementing dynamic keys in a JSON data structure with Node.js

Specifically focused on utilizing Node.js ES6 capabilities. I am currently working on creating a JSON document for insertion into a MongoDB database. The keys for inserting the document will be derived from the input values provided. For instance, Here i ...

javascript node.js json mongodb ecmascript-6

Tips for configuring a file using javascript and angular.js

I am in need of some assistance. I would like to create a configuration file that stores all the paths for JavaScript files, which can then be dynamically called and included in the index page using Angular.js or JavaScript. The structure of my files is ex ...

javascript jquery html angularjs

Issue with using the bootstrap template plugin for cube portfolio

I have integrated cubeportfolio.js into a bootstrap template, but I am encountering an issue with the custom .js code included in the template that is causing an error in the console. You can view the template I am using here, and it appears to be functio ...

javascript jquery twitter-bootstrap

When IntelliJ starts Spring boot, resources folder assets are not served

I'm following a tutorial similar to this one. The setup involves a pom file that manages two modules, the frontend module and the backend module. Tools being used: IDE: Intellij, spring-boot, Vue.js I initialized the frontent module using vue init w ...

javascript maven spring-boot intellij-idea vue.js

Assign a style based on the value of a boolean

When using a component, I pass in a boolean prop called small <CustomItem title={item.title} small={true} /> Within CustomItem, I want to implement something like this: const isSmall = this.props.small; <Text style={[styles.title]}> {title ...

javascript reactjs react-native

Using regex, match any word along with the preserved white space and consider parentheses as a single word

I need help with creating a regex pattern to split a string of words in a specific way. The current pattern I've been using is (?!$.*)\s(?![^(]*?$), but it's not giving me the desired outcome. It's close, but not quite the ...

javascript regex

JavaScripter Q&A