現在Google VR Viewのホットスポットは白丸一択です。
色を変更してみます。
形状・透過度も同様にパラメータ渡しで変更できます。
パラメータを追加して色を変更してみる
現在ホットスポットで指定できるパラメータはpitch,yaw,radius,distanceの４つです。
pitch：上下方向の角度（-90～90）
yaw：左右方向の角度（-180～180）
radisu：ホットスポット（円）の半径、単位はｍ
distance：カメラ位置からの距離、単位はｍ。
このパラメータを有効に使うには３D画像計測みたいなルーチンを実装する必要があると思いますが、どこにあるんだ？作らなきゃダメ？THETAなんか目が２つあるんだから側距できそうなもんだけど。現状ではこのパラメータは距離というより「距離感」を出すためのものみたい。近いものは大きく、遠ければ小さくみえる….みたいな。
ホットスポットにcolorというパラメータを追加してみます。
vrView.addHotspot(‘spot1’, {
pitch:0,
yaw: 20,
radius:0.05,
distance:2,
color:’ #ffffff ‘ //<—ここ
});
対象
vrview-master/build/vrview.js
vrview-master/build/embed.js
vrview.js
addHotspotという関数で、パラメータが渡されています。
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});
};
これが、今度はMessageでembed.jsに渡されます。
embed.js
まず、パラメータは渡されると配列に格納されます。ので、配列を定義しておきます。
function HotspotRenderer(worldRenderer)
の中に
this.hotspotcolors = {};
を追加
最初に渡されるところ
function onAddHotspot(e) {
if (Util.isDebug()) {
console.log(‘onAddHotspot’, e);
}
var pitch = parseFloat(e.pitch);
var yaw = parseFloat(e.yaw);
var radius = parseFloat(e.radius);
var distance = parseFloat(e.distance);
var id = e.id;
var color = e.color; //<—ここ
//引数にcolorを追加しておく
worldRenderer.hotspotRenderer.add(pitch, yaw, radius, distance, id, color);
}
次の関数がこれ
HotspotRenderer.prototype.add = function(pitch, yaw, radius, distance, id, color){
//この関数の中で、hotspotのcreateが呼ばれ、配列に格納されます
var hotspot = this.createHotspot_(radius, distance, color);
this.hotspotcolors[id] = color;
}
hotspotをcreateします
HotspotRenderer.prototype.createHotspot_ = function(radius, distance, color) {
//colorは０ｘで始まる16進値にする必要があります
color = color.toLowerCase();
color = color.replace(“#”,””);
if(color.length == 6){
var hex_color = parseInt(color,16);
}else{
var hex_color = 0xffffff;
}
//colorはGeometry描画のMaterialの中で使われます
var innerGeometry = new THREE.CircleGeometry(radius, 32);
var innerMaterial = new THREE.MeshBasicMaterial({
color: hex_color, side: THREE.DoubleSide, transparent: true,
opacity: MAX_INNER_OPACITY, depthTest: false
});
var inner = new THREE.Mesh(innerGeometry, innerMaterial);
inner.name = ‘inner’;
//丸いホットスポットを縁取っている部分は白いままにしてみます
var outerGeometry = new THREE.RingGeometry(radius * 0.85, radius, 32);
var outerMaterial = new THREE.MeshBasicMaterial({
color: 0xffffff, side: THREE.DoubleSide, transparent: true,
opacity: MAX_OUTER_OPACITY, depthTest: false
});
var outer = new THREE.Mesh(outerGeometry, outerMaterial);
outer.name = ‘outer’;
}
ホットスポットはクリックした時色が変わります。マウスのダウン・アップで色を変えているのですが、アップした時もとの色に戻す必要があります。
HotspotRenderer.prototype.up_ = function(id) {
var hotspot = this.hotspots[id];
var outer = hotspot.getObjectByName(‘inner’);
var color = this.hotspotcolors[id];
color = color.toLowerCase();
color = color.replace(“#”,””);
if(color.length == 6){
var r = color.slice(0,2);
var g = color.slice(2,4);
var b = color.slice(4,6);
var R = parseInt(r,16)/255;
var G = parseInt(g,16)/255;
var B = parseInt(b,16)/255;
var temp_inactive_color = new THREE.Color(R, G, B);
}else{
var temp_inactive_color = new THREE.Color(1, 1, 1);
}
this.tween = new TWEEN.Tween(outer.material.color).to(temp_inactive_color, ACTIVE_DURATION)
.start();
};
最後にhotspotが削除された時の処理
HotspotRenderer.prototype.remove = function(id) {
//これを追加しておきます
delete this.hotspotcolors[id];
};
Leave a Reply