Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to stop my panolens.js image from pausing spinning whenever the user clicks on it?

I’m trying to create a 360 image background that automatically rotates which it is doing and I also prevented the user from having any camera controls but the one thing I can’t figure out is how to prevent the user from having any interaction with whatsoever. The only thing I can’t seem to stop is that whenever the user clicks on the background image that’s spinning the picture pauses for about 3 seconds and then starts spinning again, I’m not sure if there’s a function or way to stop this.

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 is my js code.

Tags:

2

Answers


  1. 0

    If you check the documentation PANOLENS.Viewer

    Login or Signup to reply.
  2. 0

    To prevent your panolens.js image from pausing its spinning motion when the user clicks on it, you can add a click event listener to the infospot. When the user clicks on the infospot, you can display a box or perform any other action you desire. Here’s how you can achieve this:

    1. First, make sure you have included the necessary libraries in your HTML file:

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image panorama</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>
    <script src='https://pchen66.github.io/js/three/three.min.js'></script>
    <script src='https://rawgit.com/pchen66/panolens.js/dev/build/panolens.min.js'></script>
    <script src="./script.js"></script>
</body>
</html>

    2. In your JavaScript code (script.js), create an infospot and add a click event listener to it:

      var panorama, viewer, container, infospot, panel;

container = document.querySelector('#container');
panel = document.querySelector('#panel');

panorama = new PANOLENS.ImagePanorama('https://pchen66.github.io/Panolens/examples/asset/textures/equirectangular/tunnel.jpg');

infospot = new PANOLENS.Infospot(400, PANOLENS.DataImage.Info, false);
infospot.position.set(0, -2000, -5000);

infospot.addEventListener("click", function () {
    // Your custom action when the infospot is clicked
    // For example, create a div element and style it
    let element = document.createElement('div');
    element.style.backgroundColor = '#fff';
    element.style.maxWidth = '200px';
    element.style.maxHeight = '200px';
    element.style.fontFamily = '"Trebuchet MS", Helvetica, sans-serif';
    element.style.position = 'absolute';
    document.body.appendChild(element);
});

panorama.add(infospot);

viewer = new PANOLENS.Viewer({
    container: container,
    controlBar: false,
    controlButtons: [],
    autoHideControlBar: true,
    autoHideInfospot: false,
    horizontalView: false,
    cameraFov: 80,
    reverseDragging: false,
    enableReticle: false,
    dwellTime: 1500,
    autoReticleSelect: true,
    viewIndicator: false,
    indicatorSize: 30,
    output: 'overlay'
});

viewer.add(panorama);

    3. Customize the infospot.addEventListener function to perform the desired action when the infospot is clicked. In the example above, a white box is created and appended to the body when the infospot is clicked.

    Let me know if it worked

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search