360全景教学panolens.js 实现

最新推荐文章于 2024-08-08 08:33:24 发布

珞珈鸡丝

最新推荐文章于 2024-08-08 08:33:24 发布

阅读量1.5k

点赞数 2

分类专栏：智慧城市代码片段文章标签： javascript node.js vue.js

本文链接：https://blog.csdn.net/u012556425/article/details/120339122

版权

智慧城市代码片段专栏收录该内容

8 篇文章 2 订阅

订阅专栏

本文详细介绍了如何利用Panolens.js库创建360全景教学场景。通过加载核心js库，创建全景容器和教学热点，为不同位置添加交互式讲解文字，实现了在全景图片上进行互动教学的功能。示例代码展示了具体实现步骤，并提供了完整代码下载链接。

摘要由CSDN通过智能技术生成

本文主要介绍基于panolens来实现在360全景中进行教学。主要步骤如下：

1，加载核心js库

    <script src="js/three.min.js"></script>
    <script src="js/panolens.min.js"></script>
    <script src="js/typed.min.js"></script>

2，创建全景容器

<div class="credit"><a href="https://github.com/pchen66/panolens.js">Panolens.js</a> 360全景教学</a></div>

3，创建教学讲解热点

      // Infospots
      meterInfospot = new PANOLENS.Infospot();
      valveInfospot = new PANOLENS.Infospot();
      seatInfospot = new PANOLENS.Infospot();
      topboxInfospot = new PANOLENS.Infospot();
      endingInfospot = new PANOLENS.Infospot( 10e-7 );  // Make it not visible

      meterInfospot.position.set( 4610.04, 1280.07, 1431.29 );
      valveInfospot.position.set( 4637.61, -798.12, -1671.24 );
      seatInfospot.position.set( 1934.61, -2611.69, -3792.91 );
      topboxInfospot.position.set( -3348.82, 3705.92, 45.54 );
      endingInfospot.position.set( -3461.4, -3592.37, -241.38 );

      meterInfospot.addHoverText( 'Speedometer', 50 );
      valveInfospot.addHoverText( 'Valve', 50 );
      seatInfospot.addHoverText( 'Seat', 50 );
      topboxInfospot.addHoverText( 'Box', 50 );

      // Panorama
      panorama = new PANOLENS.ImagePanorama( 'img/dusty9000x4500.jpg' );
      panorama.addEventListener( 'progress', onProgress );
      panorama.addEventListener( 'load', onLoad );
      panorama.addEventListener( 'enter', onEnter );
      panorama.add( meterInfospot, valveInfospot, seatInfospot, topboxInfospot, endingInfospot );

      // Viewer
      viewer = new PANOLENS.Viewer( { controlBar: false, initialLookAt: new THREE.Vector3( 0, 0, 5000 ) } );
      viewer.OrbitControls.enabled = false;
      viewer.add( panorama );

本文完整代码下载地址：360全景教学panolens.js实现代码.zip-互联网文档类资源-CSDN下载