ändern Farbe oder Symbol-Hotspots in GoogleVr Ansicht

Question

In Google Vr (Web View) ist es möglich, Hotspots zu definieren, indem Sie die folgenden Informationen bereitstellt:

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. 
}); 

Jedoch habe ich keine Möglichkeit sehen, die Form oder die Farbe des setzen Hotspots. Alle Hotspots sind also gleich. Ich möchte Hotspots definieren, die Navigation ermöglichen (z. B. in einer Liste von Bildern/Videos), entweder durch ähnliche Steuerelemente wie die VR - Ansicht in YouTube (wo die Videosteuerung angezeigt wird, wenn Sie sie ansehen und zum nächsten oder vorheriges Video) oder einfach durch Einfügen von Hotspots, die sich in Form und/oder Farbe unterscheiden (z. B. mit Pfeil nach rechts und links, um die Richtung wie in StreetView anzuzeigen). Ich habe jedoch keine Möglichkeit gefunden, es zu tun. Ich sehe, dass in der zugrunde liegenden Bibliothek Hotspots als Three's Object3D definiert sind. Ich kenne drei nicht, aber ich nehme an, dass es einen Weg geben sollte, die Form zu ändern?

Answer 1

Sie müssen den Code embed.js ändern. Dort können Sie die Farbe für den Hotspot festlegen.

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 
}); 

Um ihre Form zu ändern Sie three.js und umfassen Funktion BoxGeometry und Abhängigkeiten von bearbeiten haben:

https://threejs.org/build/three.js