I’m currently trying to add a click event to some Panolens Infospots. When you click on the Infospot a box should pop up, just like when you use infospot.addHoverElement(element, 150), just on click instead of hover. I've tried some different things like using createElement (which can be seen in the code), but I can’t seem to find a solution that works. Is this possible?
This is my code so far:
<!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;
});
Any kind of help would be much appreciated!