Setting the initial viewer position in Panolens: A step-by-step guide

I've been working on setting the initial viewer position for panolens.js for a while now.

Here's how the set-up looks:

const panoPhoto1 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-tip_1_360_living.jpg';
    const panoPhoto2 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-tip_1_360_hol.jpg';
    const panoPhoto3 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-tip_1_360_baie.jpg';
    const panoPhoto4 = 'https://conceptcityiasi.ro/assets/images/tours/tip1/apartamente-noi-de-vanzare-iasi-dacia-1_camera-tip_1_360_bucatarie.jpg';

    const panorama1 = new PANOLENS.ImagePanorama(panoPhoto1);
    const panorama2 = new PANOLENS.ImagePanorama(panoPhoto2);
    const panorama3 = new PANOLENS.ImagePanorama(panoPhoto3);
    const panorama4 = new PANOLENS.ImagePanorama(panoPhoto4);

    panorama1.link( panorama2, new THREE.Vector3( -900, -530, -4800 ) );
    panorama2.link( panorama1, new THREE.Vector3( -490, -1200, -4800 ) );
    panorama2.link( panorama3, new THREE.Vector3( -4700, -1030, 1100 ) );
    panorama1.link( panorama4, new THREE.Vector3( -4100, -690, 2600 ) );
    panorama3.link( panorama2, new THREE.Vector3( -1750, -870, -4500 ) );
    panorama4.link( panorama1, new THREE.Vector3( -4100, -2400, 1300 ) );

    const viewer = new PANOLENS.Viewer({
        container: panoImage,
        autoRotate: true,
        autoRotateSpeed: 0.5,
        autoHideInfospot: false,
        clickTolerance: 100,
        cameraFov: 100,
        viewIndicator: true,
        indicatorSize: 100,             
        output: 'console'
    });
    
    viewer.add(panorama1, panorama2, panorama3, panorama4);

I'm struggling to figure out what I'm doing wrong. I've looked into examples using initialLookPosition(), but none of them seem to work.

javascriptvirtual-tour

Answer №1

Understood, so you'll require an array of positions and an event listener that triggers a viewer method. I recall seeing this in an example on Panolens's website.

var lookAtPositions = [
    new THREE.Vector3(-306, -2070, 4530 ),
    new THREE.Vector3(-2360, -1390, -4180 ),
    new THREE.Vector3(-4350, -2460, -26 ),
    new THREE.Vector3(3609, -2921, -1830 )
    ];

    const panorama1 = new PANOLENS.ImagePanorama(panoPhoto1);
    panorama1.addEventListener( 'enter-fade-start', function(){
        viewer.tweenControlCenter( lookAtPositions[0], 12000 );
    } );

    const panorama2 = new PANOLENS.ImagePanorama(panoPhoto2);
    panorama2.addEventListener( 'enter-fade-start', function(){
        viewer.tweenControlCenter( lookAtPositions[1], 0);
    } );

    const panorama3 = new PANOLENS.ImagePanorama(panoPhoto3);
    panorama3.addEventListener( 'enter-fade-start', function(){
        viewer.tweenControlCenter( lookAtPositions[3], 0 );
    } );

    const panorama4 = new PANOLENS.ImagePanorama(panoPhoto4);
    panorama4.addEventListener( 'enter-fade-start', function(){
        viewer.tweenControlCenter( lookAtPositions[2], 0 );
    } );

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

Guidelines for cycling through a series of HTTP requests and effectively saving the data from each cycle into an array

Utilizing Spotify's API search feature, I am working with an array of SongSearchParams that consist of title and artist parameters: export class SongSearchParams { public title: string; public artist: string; constructor(title: string, a ...

javascripttypescriptasynchronousxmlhttprequestangular-promise

Run a PHP script on the current page upon choosing an option from a dropdown list with the help of Ajax or JavaScript

I'm currently working on a MySQL query that needs to be executed when a user selects options from multiple dropdown lists. What I am looking for is the ability to automatically run a query related to the selected dropdown list option using AJAX/JavaS ...

phpjavascriptmysqlhtmlajax

Is it possible to create an <h1> heading that can be clicked like a button and actually do something when clicked?

I am currently designing a web page that includes <div class="cane-wrap"> <h1 class="mc">christmas tic tac toe</h1> </div> located at the top center of the webpage, with autoplay running in the backgroun ...

javascripthtmlcssaudio

What is the best way to invoke a method within the $http body in AngularJS

When I try to call the editopenComponentModal method in another method, I encounter the following error: angular.js:13920 TypeError: Cannot read property 'editopenComponentModal' of undefined EditCurrentJob(job) { this.$http.put(pr ...

javascriptangularjsangularjs-directiveangularjs-scope

Is there a way to access and invoke a exposed function of a Vue component within a default slot?

Exploring the realms of a vue playground. The functions interfaceFunction in both ChildA and ChildB are exposed. In App, these functions can be called by obtaining references to the components that expose them. This allows direct function calls from with ...

javascriptvue.jsvue-composition-apivuejs-slots

incorporating event handlers to references retrieved from bespoke hooks

I have designed a simple custom hook in my React application to manage the onChange events of a specific input element. const useInput = () => { const ref = useRef(null); const handleChange = () => { console.log("Input has been ...

javascriptreactjs

Why is the type of parameter 1 not an 'HTMLFormElement', causing the failure to construct 'FormData'?

When I try to execute the code, I encounter a JavaScript error. My objective is to store the data from the form. Error Message TypeError: Failed to create 'FormData': argument 1 is not an instance of 'HTMLFormElement'. The issue arise ...

javascriptreactjsformsnext.jsform-data

Enhance efficiency with Bootstrap typeahead prefetch capability

Currently, I am utilizing the Bootstrap typeahead API to generate a real-time search feature. The source option is quite useful as it enables an AJAX call to retrieve data from the server. However, I am interested in preloading the source upon page load a ...

javascriptajaxtwitter-bootstrapbootstrap-typeaheadtypeahead

Populating JQuery autocomplete using a PHP array

As a beginner in the world of JavaScript and JQuery, I have been scouring the internet for hours trying to find a solution to my query. My goal is to populate a JQuery autocomplete feature using an array that I have created in PHP. Here is a glimpse of the ...

javascriptphpjqueryautocomplete

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss

Display a complete calendar with the date picker on a webpage

Currently experimenting with React to build a straightforward application. Admiring the appearance of full calendars from these date pickers (once clicked): Material-UI React-Toolbox Wondering if it's feasible to present the full calendar directly ...

javascriptreactjsdatepickercalendarmaterial-ui

Is it possible to increment an integer value in jQuery after obtaining the sum result?

Actually, I'm trying to extract the integer value from my input field. For example, if I enter the value 4+5, I want to display the result as 9 in a separate div. However, instead of getting the expected result, I am receiving [object Object]. I&apo ...

javascriptjquery

How can I update getServerSideProps using a change event in Next.js?

Currently, I am faced with the task of updating product data based on different categories. In order to achieve this, I have set up an index page along with two components called Products and Categories. Initially, I retrieve all products using the getServ ...

javascriptreactjsfetchnext.jsgetserversideprops

Is it common for Google Chrome console snapshots to have a prolonged idle time?

I noticed in Google Chrome console snapshot that my JavaScript code has a long "Idle" time. I'm not sure if this is normal. Attached is a screenshot for reference: https://i.stack.imgur.com/k0mkp.png Could this extended "Idle" time be attributed to ...

javascriptjqueryajaxgoogle-chromeconsole

Collect information from forms and save it to a mobile phone number

Is it possible to forward form field details to a cell phone number via text message? Here is the code I currently have for sending form data to an email address. If any adjustments need to be made, please provide instructions. <?php if(isset($_POST[ ...

javascriptphphtmlcss

The feature for favoriting or unfavorite a post is currently not functioning correctly on the frontend (react) side

I have been working on a social media website project for practice, and I successfully implemented the liking and disliking posts feature. However, I encountered an issue where when I like a post and the icon changes to a filled icon, upon refreshing the p ...

javascriptnode.jsreactjsmongodbexpress

Compile the sources of an npm dependency using Brunch

Recently, I've been facing an issue while trying to develop my web application using Brunch. The problem arises from a specific npm package called animated-vue, which consists of sources programmed in ES2016. After adding this package as a dependency ...

javascriptnpmecmascript-6babeljsbrunch

Invoke another component to display within a React.js application

Click here to view the code snippet. I am facing an issue with my React components. I have component A that handles fetching and rendering a list, and I also have component B that accepts user input. How can I trigger component A from component B? It seem ...

javascriptreactjs

An incorrect object was removed from the array

Having an issue where the wrong item is getting deleted from an array in my component's state. Here is a simplified version of my parent Component: export default class BankList extends Component { state = { banks: [new Bank("Name1"), new ...

javascriptarraysnode.jsreactjsreact-native

Removing an Element According to Screen Size: A Step-by-Step Guide

Currently, I am facing a dilemma with two forms that need to share the same IDs. One form is designed for mobile viewing while the other is for all other devices. Despite using media queries and display: none to toggle their visibility, both forms are stil ...

javascriptjquerycsswebmedia-queries