Changing color or icon to hotspots in GoogleVr View - google-vr

Question

In Google Vr (Web View) it is possible to define hotspots by providing the following information:
vrView.addHotspot('hotspot_name', {
pitch: 30, // In degrees. Up is positive.
yaw: 20, // In degrees. To the right is positive.
radius: 0.05, // Radius of the circular target in meters.
distance: 2 // Distance of target from camera in meters.
});
However I see no way to set the shape or colour of the hotspots. So all hotspots are the same.
I would like to define hotspots that allow navigation (e.g. within a list of images/videos), either by providing controls similar to the VR view in YouTube (where the video control appear if you gaze at them and you move to the next or previous video), or simply by inserting hotspots that are different in shape and/or colour (e.g. with right and left arrow to indicate direction as in StreetView).
However I have not found any way to do it.
I see that in the underlying library, hotspots are defined as three's Object3D. I am not familiar with three but I suppose there should be a way to change the shape?

Answer 1

You have to change the embed.js code. There you can set color for the hotspot.
var innerMaterial = new THREE.MeshBasicMaterial({
color: 0x93c01f, side: THREE.DoubleSide, transparent: true,
opacity: MAX_INNER_OPACITY, depthTest: false
});
var outerMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff, side: THREE.DoubleSide, transparent: true,
opacity: MAX_OUTER_OPACITY, depthTest: false
});
To change shape you have to edit three.js and include function BoxGeometry and dependencies from:
https://threejs.org/build/three.js

Answer 2

In order to apply different colors within the same scene, you can change these following lines of code in embed.js:
HotspotRenderer.prototype.add = function(pitch, yaw, radius, distance, id, color) {
var hotspot = this.createHotspot_(radius, distance, color);
}
HotspotRenderer.prototype.createHotspot_ = function(radius, distance, givenColor) {
if (!givenColor) {
givenColor = 0xffffff;
}
var innerMaterial = new THREE.MeshBasicMaterial({
color: givenColor, side: THREE.DoubleSide, transparent: true,
opacity: MAX_INNER_OPACITY, depthTest: false
});
var outerMaterial = new THREE.MeshBasicMaterial({
color: givenColor, side: THREE.DoubleSide, transparent: true,
opacity: MAX_OUTER_OPACITY, depthTest: false
});
}
function onAddHotspot(e) {
var id = e.id;
var color = e.color;
worldRenderer.hotspotRenderer.add(pitch, yaw, radius, distance, id, color);
}
… in vrview.js:
Player.prototype.addHotspot = function(hotspotId, params) {
var data = {
pitch: params.pitch,
yaw: params.yaw,
radius: params.radius,
distance: params.distance,
id: hotspotId,
color: params.color
};
this.sender.send({type: Message.ADD_HOTSPOT, data: data});
};
… and in your upper-level JavaScript for the player:
vrView.addHotspot('hotspot-1', {
pitch: 1,
yaw: 10,
radius: 0.2,
distance: 1,
color: 0xffaa00
});
vrView.addHotspot('hotspot-2', {
pitch: -1,
yaw: -20,
radius: 0.2,
distance: 1,
color: 0x22fefe
});