时间戳

首页 > 解决方案 > 如何为 Panolens 设置初始查看器位置？

javascript - 如何为 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, 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);

我觉得我做错了什么，但我不知道是什么。我已经看到了一些带有 initialLookPosition() 的示例，但它们似乎都不起作用。

标签： javascriptvirtual-tour

解决方案

明白了，所以你需要一个位置数组和一个调用查看器方法的事件监听器。在 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 );
    } );

推荐阅读