如何设置 Panolens 的初始查看器位置？

问题描述

我尝试为 panolens.js 设置初始查看器位置已经有一段时间了。

设置如下：

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,-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);     

我觉得我做错了什么，但我不知道是什么。我已经看过一些使用 initialLookPosition() 的例子，但似乎没有一个有效。

解决方法

明白了，所以您需要一个位置数组和一个调用查看器方法的事件侦听器。这是在 Panolens 页面上的一些示例中。

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 );
    } );