本文主要介绍在全景图中进行三维模型交互式操作，主要步骤如下：

1，加载核心js代码库

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

2，创建全景容器

<div id="chair-container" class="container" style="display:none">

3，加载全景图及三维模型

加载全景照片

      path = 'img/cube/';
      format = '.jpg';
      panorama = new PANOLENS.CubePanorama( [
          path + 'px' + format, path + 'nx' + format,
          path + 'py' + format, path + 'ny' + format,
          path + 'pz' + format, path + 'nz' + format
      ] );

      viewer = new PANOLENS.Viewer();
      viewer.add( panorama );

   加载三维模型

      loader = new THREE.ColladaLoader();
      loader.load( './model/room/room.dae', function ( collada ) {

        dae = collada.scene;

        dae.scale.multiplyScalar( 15 );
        dae.position.set( -60, -20, 370 );
        dae.rotation.set( -Math.PI/2, 0, -1.9 );

        dae.traverse( child => {

          if ( child.material instanceof THREE.Material ) {
            const map = child.material.map;
            child.material = new THREE.MeshPhysicalMaterial({map, reflectivity: 0, metalness: 0});
          }

        } );

        // Get chair model
        dae.children.map( function( object ) {
          if ( object.name === 'Chair-Desk' && 
              object.material.name === 'Textile - Slate Blue' ) {
            chairModels.push( object );
          }
        } )

        panorama.add( dae );

      } );

4，实现三维模型交互体验

添加监听事件

 panorama.addEventListener( 'click', function( event ){

        if ( event.intersects.length > 0 ) {

          intersect = event.intersects[ 0 ].object;

          if ( !(intersect instanceof PANOLENS.Infospot) && intersect.material ) {

            if ( !intersect.previousMaterial ) {

              intersect.previousMaterial = intersect.material.clone();
              intersect.material = new THREE.MeshNormalMaterial();

            } else {

              intersect.material = intersect.previousMaterial;
              intersect.previousMaterial.dispose();
              intersect.previousMaterial = undefined;

            } 

          }

        }

      } );

文章完整下载代码：360全景交互式三维模型panolens.js实现代码.zip-互联网文档类资源-CSDN下载