0

我目前正在尝试向一些 Panolens Infospots 添加点击事件。当您单击 Infospot 时，应该会弹出一个框，就像您使用 时一样infospot.addHoverElement(element, 150)，只需单击而不是悬停。我尝试了一些不同的方法，例如使用 createElement （可以在代码中看到），但我似乎找不到有效的解决方案。这可能吗？

到目前为止，这是我的代码：

<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <title>Image panorama</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="container"></div>
    <div id="panel"></div>

    <script src='https://pchen66.github.io/js/three/three.min.js'></script>
    <script src='https://rawgit.com/pchen66/panolens.js/dev/build/panolens.min.js'></script><script  src="./script.js"></script>
  </body>
</html>

var panorama, viewer, container, infospot, panel;

container = document.querySelector( '#container' );
panel = document.querySelector('#panel');

panorama = new PANOLENS.ImagePanorama( 'https://pchen66.github.io/Panolens/examples/asset/textures/equirectangular/tunnel.jpg' );

infospot = new PANOLENS.Infospot( 400, PANOLENS.DataImage.Info, false );
infospot.position.set( 0, -2000, -5000 );
infospot.addEventListener( "click", function(){
  this.focus();
  let element = document.createElement( 'div' );
  element.style.backgroundColor = '#fff';
  element.style.maxWidth = '200px';
  element.style.maxHeight = '200px';
  element.style.fontFamily = '"Trebuchet MS", Helvetica, sans-serif';
  element.style.position = 'absolute';
  document.body.appendChild(element);

  } );
  

panorama.add( infospot );

viewer = new PANOLENS.Viewer( {
  container: container,     
  controlBar: false,               
  controlButtons: [],               
  autoHideControlBar: true,     
  autoHideInfospot: false,      
  horizontalView: false,        
  cameraFov: 80,                    
  reverseDragging: false,       
  enableReticle: false,         
  dwellTime: 1500,           
  autoReticleSelect: true,      
  viewIndicator: false,         
  indicatorSize: 30,                
  output: 'overlay'
 } );
viewer.add( panorama );

let renderer, camera, scene, box;

renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(panel.clientWidth, panel.clientHeight);
camera = new THREE.PerspectiveCamera(45, panel.clientWidth / panel.clientHeight, 1, 2000);
scene = new THREE.Scene();
console.log(infospot.element);
infospot.element.appendChild( renderer.domElement );

box = new THREE.Mesh(new THREE.BoxGeometry(5, 5, 5), new THREE.MeshNormalMaterial());
box.position.z = -20;
scene.add( box );

viewer.addUpdateCallback(function(){
  renderer.render(scene, camera);
  box.rotation.y += 0.03;
});

任何形式的帮助将不胜感激！

4

0 回答 0