What can I do to prevent my panolens.js image from pausing its spin whenever a user clicks on it?

I've been working on setting up a 360 image background that rotates automatically and disabling most user interaction controls. However, I'm struggling with one issue – preventing any form of interaction from the user altogether. Whenever a user clicks on the spinning background image, it pauses for about 3 seconds before resuming rotation. I'm unsure if there is a specific function or method to prevent this behavior.

const panoramaImage = new PANOLENS.ImagePanorama("img/ship.jpeg");
const imageContainer = document.querySelector(".image-container");

const viewer = new PANOLENS.Viewer({
    container: imageContainer,
    autoRotate: true,
    autoRotateSpeed: 0.3,
    controlBar: false
});

viewer.OrbitControls.noRotate = true;
viewer.OrbitControls.noZoom = true;
viewer.OrbitControls.noPan = true;


viewer.add(panoramaImage);
viewer.onWindowResize();

This represents my JavaScript code.

javascriptthree.js

Answer №1

Upon reviewing the documentation PANOLENS.Viewer

  • A function called Viewer.disableAutoRate() is available to deactivate auto rotation.

  • There is also a method named Viewer.enableAutoRate() which can be used to enable it again.

  • You have the option to create a custom function that turns off auto rate and then use a setTimeout to turn it back on.

  • Controls are managed through THREE.OrbitControls. By referencing the source code, you can modify interactions such as panning by toggling the pan feature using OrbitControls.enablePan().

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

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

Error encountered when importing a Material-UI component: Unable to load a module from @babel/runtime

Struggling to compile the index.js file with rollup: import React from "react"; import ReactDOM from "react-dom"; import Grid from "@material-ui/core/Grid"; ReactDOM.render( <React.StrictMode> <Grid conta ...

javascriptreactjsmaterial-uirollupjs

Assistance is required to navigate my character within the canvas

Having trouble getting the image to move in the canvas. Have tried multiple methods with no success. Please assist! var canvas = document.getElementById("mainCanvas"); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; ...

javascripthtml

The Angular Syncfusion schedule is unable to call upon an object that may potentially be 'undefined'

Currently, I am developing an application using Angular Syncfusion to allow users to view and book appointments. I found a helpful resource at the following link: Below you can find the code snippet I have been working on: <ejs-schedule #scheduleObj ...

javascriptangularsyncfusionej2-syncfusion

What are the different ways in which :style is utilized in re-frame - with brackets, curly brackets, or simply without any characters?

For my current project, I am utilizing Clojure, ClojureScript, lein, shadow-cljs, Emacs, and CIDER to develop a dynamic web application. Typically, when building the project, I initiate the command cider-jack-in-cljs in Emacs, select shadow-cljs, opt for ...

javascriptcssclojureclojurescriptre-frame

When using JavaScript with React, setting a value after the onBlur event can result in users having to click

In my React form, I have an input button with an onBlur event that sets the value to a useState property. However, after the onBlur event is triggered, the user has to click the button twice to focus on it properly. It seems like the page needs time to pro ...

javascriptreactjs

What is the best way to make the current year the default selection in my Select control within Reactive Forms?

Hey there! I managed to create a select element that displays the current year, 5 years from the past, and 3 years from the future. But now I need to figure out how to make the current year the default selection using Reactive Forms. Any ideas on how to ac ...

javascriptangulartypescriptangular-materialdropdown

What is the best way to send a continuous stream of data in Express?

I've been attempting to configure an Express application to send the response as a stream. var Readable = require('stream').Readable; var rs = Readable(); app.get('/report', function(req,res) { res.statusCode = 200; ...

javascriptnode.jscsvexpress

I am encountering an issue where GLTF objects are not loading properly into the Canvas element of my React

I recently downloaded a gltf model from Sketchfab to incorporate into my website. The specific model can be found here. However, every time I attempt to load it into my project, the entire screen disappears. I suspected that the issue might lie with how I ...

reactjsthree.jsreact-three-fiber

ReactJS incorporates multiple CSS files

I am currently working on developing a Single Page Application using ReactJS. However, I am facing an issue with styling. Currently, I have created 3 different pages (with the intention of adding more in the future), each having its own CSS file that is im ...

javascriptcssreactjsreact-routerjsx

How can I create a dropdown menu that is dependent on another dropdown menu using Ajax in my Laravel application?

I have two dropdown fields that are dependent on each other - Class & Section. I am trying to Select * from sections where class_id=selected Class Id. Although I attempted to achieve this using java script, it doesn't seem to work for me. Here are ...

javascriptphpjqueryajaxlaravel

"Utilizing JavaScript, you can remove an element by clicking on the outer element within the

I need the functionality where, when a user clicks on an input type="checkbox", a corresponding textarea is displayed. Then, if the user clicks anywhere except for that specific textarea, it should be hidden. Can someone assist me with implementing this fe ...

javascripthtmljquerycss

reqParam = $.getQueryParameters(); How does this request work within an ajax form

I've spent a lot of time searching, but I can't figure out what the code reqParam = $.getQueryParameters(); means and how it is used in Ajax JavaScript. I copied this Java script from a website as an example. If anyone has any insights, please he ...

javascriptjqueryajax

Container slide-show fill error

I'm attempting to create a slide show with an overlapping caption that appears when hovering over the container or image. The image needs to fit exactly inside the container so no scroll bar is shown and the border radius is correct. I managed to achi ...

javascripthtmlcsscontainers

Tips for effectively incorporating additional directives into a directive as it is being defined

I'm encountering a significant issue with dynamic directives in angularjs. My goal is to include new directives to a directive while defining it through an object: compile: function () { return { pre: function (scope, iElement, iAttrs) { ...

javascriptangularjs

I'm encountering a strange issue where Node JS is mistakenly claiming that the method doesn't exist, even though

Ah, it seems I've encountered an error in my test project. The issue lies with Node JS not being able to locate the getStr function within the Another object. Allow me to share the code with you: test.js var Another = require('./another.js&apo ...

javascriptnode.jsrequire

Guide on generating a fresh array of objects that encompass distinct items, alongside their combined prices and quantities using JavaScript

I am struggling to generate a new array of objects from one that contains duplicates. For instance, here is the console.log output of the current array: console.log(items); [{ _id: 5eb2f7efb5b8fa62bcd7db94, workName: 'best item ever', ...

javascriptarraysmongodbexpressobject

Choosing a value in the second dropdown menu based on the selection made in the first dropdown menu can be achieved by retrieving both values from the database using a common list

I have a scenario where I am utilizing two drop-down menus with the same data sourced from a database. When a particular item is selected in the first drop-down, it should not be available in the second drop-down. For instance, the values in the first dro ...

javascriptjavaajaxjsp

Using jQuery to target form elements that have a specific class assigned to them

I am facing an issue with targeting input fields within a specific form on a page. The form has a certain class, let's say "has-error," and I want to remove this class from all the input fields in that form. I attempted the following code snippet: t ...

javascriptjqueryhtmlinputjquery-selectors

Converting a variety of form fields containing dynamic values into floating point numbers

Trying to parse the input fields with a specific class has presented a challenge. Only the value of the first field is being parsed and copied to the other fields. https://i.stack.imgur.com/QE9mP.png <?php foreach($income as $inc): ?> <input ty ...

javascriptjquery