Snaploader - Preview Interactive Nodes Sample Code

sample.js

var interactiveNodesElement = document.getElementById('interactive-nodes');
var viewerElement = document.getElementById('viewer3d');

var interactiveNodes = JSON.parse(viewerElement.getAttribute('data-interactive-nodes'));

var interactiveNodeOptions = {};

for (var i = 0; i < interactiveNodes.length; i++) {
	var nodeName = interactiveNodes[i];
	interactiveNodeOptions[nodeName] = {};
}

var options = {
	sceneSnapId: '5b8aa75a-5322-49b9-947e-2dad226acda1',
	sceneModelId: '1d0176bc-ba87-4fee-9c35-bf2ee1dc4386',
	layout: 'fill',
	plugins: {
		developerStack: {
			interactiveNodes: interactiveNodeOptions
		}
	}
};

var developerStack = null;
var viewer = new snaploader.Viewer3d(viewerElement, options);
var overlay = new snaploader.ui.ProjectorOverlay(viewer);
var overlayElement = document.createElement('div');
overlayElement.style.background = '#0000f0';
overlayElement.style.borderRadius = '50%';
overlayElement.style.width = '12px';
overlayElement.style.height = '12px';

function highlightNode(nodeName) {
	if (developerStack) {
		if (overlayElement) {
			overlay.removeChild(overlayElement);
		}

		interactiveNodesElement.querySelectorAll('.preview-interactive-node').forEach(function(nodeElement) {
			nodeElement.classList.remove('preview-interactive-node-highlighted');
		});

		if (nodeName) {
			var newInteractiveNodeOptions = Object.assign({}, interactiveNodeOptions);
			newInteractiveNodeOptions[nodeName] = {
				interactionHighlightColor: '#3060ff',
				interactionDefaultHighlighted: true
			};

			developerStack.patchOptions({
				interactiveNodes: newInteractiveNodeOptions
			});

			var interactiveNodeElement = interactiveNodesElement.querySelector('.preview-interactive-node[data-node-name="' + nodeName + '"]');

			if (interactiveNodeElement) {
				interactiveNodeElement.classList.add('preview-interactive-node-highlighted');
			}

			overlay.addChild(overlayElement, nodeName);
		} else {
			developerStack.patchOptions({
				interactiveNodes: interactiveNodeOptions
			});
		}
	}
}

viewer.addListener('sceneLoaded', function() {
	developerStack = viewer.getPlugin('developerStack');

	developerStack.addListener('currentInteractiveNodeChanged', function(viewer, nodeName) {
		highlightNode(nodeName);
	});

	overlay.show();
});

viewer.addListener('rendered', () => {
	overlay.update()
});

interactiveNodesElement.querySelectorAll('.preview-interactive-node').forEach(function(nodeElement) {
	nodeElement.addEventListener('mouseover', function(event) {
		highlightNode(event.target.getAttribute('data-node-name'));
	});

	nodeElement.addEventListener('mouseout', function(event) {
		highlightNode(null);
	});
});