Google VR Viewでホットスポットまわりのコードをいじってみる(パラメータを追加)


現在Google VR Viewのホットスポットは白丸一択です。

(GitHub)

色を変更してみます。

形状・透過度も同様にパラメータ渡しで変更できます。


パラメータを追加して色を変更してみる

現在ホットスポットで指定できるパラメータはpitch,yaw,radius,distanceの4つです。

pitch:上下方向の角度(-90~90)

yaw:左右方向の角度(-180~180)

radisu:ホットスポット(円)の半径、単位はm

distance:カメラ位置からの距離、単位はm。

このパラメータを有効に使うには3D画像計測みたいなルーチンを実装する必要があると思いますが、どこにあるんだ?作らなきゃダメ?THETAなんか目が2つあるんだから側距できそうなもんだけど。現状ではこのパラメータは距離というより「距離感」を出すためのものみたい。近いものは大きく、遠ければ小さくみえる….みたいな。

 

ホットスポットに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は0xで始まる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];

};

 


 

Be the first to comment

Leave a Reply

Your email address will not be published.


*