Hi there !
I have a question for you, 2 days ago I have found a web viewer for virtual tour : https://www.marzipano.net/
It’s a very good viewer , but I would like to take the CSS file and to include it in my code. But don’t find how to do it…
It’s for my work, these “hotspots” are very professional, and I want to include them, especially the “info hotspot”. Here the example of a demo : Sample Tour | Marzipano.
Here is the code of the function to create the info hotspot :
function createInfoHotspotElement(hotspot) {
// Create wrapper element to hold icon and tooltip.
var wrapper = document.createElement('div');
wrapper.classList.add('hotspot');
wrapper.classList.add('info-hotspot');
// Create hotspot/tooltip header.
var header = document.createElement('div');
header.classList.add('info-hotspot-header');
// Create image element.
var iconWrapper = document.createElement('div');
iconWrapper.classList.add('info-hotspot-icon-wrapper');
var icon = document.createElement('img');
icon.src = 'img/info.png';
icon.classList.add('info-hotspot-icon');
iconWrapper.appendChild(icon);
// Create title element.
var titleWrapper = document.createElement('div');
titleWrapper.classList.add('info-hotspot-title-wrapper');
var title = document.createElement('div');
title.classList.add('info-hotspot-title');
title.innerHTML = hotspot.title;
titleWrapper.appendChild(title);
// Create close element.
var closeWrapper = document.createElement('div');
closeWrapper.classList.add('info-hotspot-close-wrapper');
var closeIcon = document.createElement('img');
closeIcon.src = 'img/close.png';
closeIcon.classList.add('info-hotspot-close-icon');
closeWrapper.appendChild(closeIcon);
// Construct header element.
header.appendChild(iconWrapper);
header.appendChild(titleWrapper);
header.appendChild(closeWrapper);
// Create text element.
var text = document.createElement('div');
text.classList.add('info-hotspot-text');
text.innerHTML = hotspot.text;
// Place header and text into wrapper element.
wrapper.appendChild(header);
wrapper.appendChild(text);
// Create a modal for the hotspot content to appear on mobile mode.
// var modal = document.createElement(‘div’);
// modal.innerHTML = wrapper.innerHTML;
// modal.classList.add(‘info-hotspot-modal’);
// document.body.appendChild(modal);
var toggle = function() {
wrapper.classList.toggle('visible');
// modal.classList.toggle('visible');
};
// Show content when hotspot is clicked.
wrapper.querySelector('.info-hotspot-header').addEventListener('click', toggle);
// Hide content when close icon is clicked.
// modal.querySelector(’.info-hotspot-close-wrapper’).addEventListener(‘click’, toggle);
// Prevent touch and scroll events from reaching the parent element.
// This prevents the view control logic from interfering with the hotspot.
stopTouchAndScrollEventPropagation(wrapper); // it's not necessary for my code
return wrapper;
}
And there is the code in the “main” :
data.infoHotspots.forEach(function(hotspot) {
var element = createInfoHotspotElement(hotspot);
scene.hotspotContainer().createHotspot(element, { yaw: hotspot.yaw, pitch: hotspot.pitch }); // Here is my problem
});
My Problem: : I don’t know how to include that in BabylonJS canvas. Because the scene is not a “BABYLONJS Scene” so I don’t know how to display on the screen. The first function seems to run btw.
My best regards,
Mathieu, an intern in webVR