ホットスポットに画像を貼り付ける場合、embed.jsに定義する関数にパラメータを渡します。
種類は主にshape,opacity,icon,rotationの４つです。
shape：ホットスポットの形（丸、四角、三角など、例：circle,square,rectangle_A,triangle_A）
opacity:透過度(例：1.0)
icon：画像名(例：image.png)
rotation：ホットスポットの回転（Euler角、x,y,zの文字列、例：’10,20,-30′)
画像を使う場合colorは#ffffffの白のみ使います。
【main.html,index.js】
//sceneにホットスポット定義、元々circleしかなかったのでradiusになってますが、これで半径以外に辺の長さなどとして渡します
var scenes = {
scene1: {
image: ‘ｐanoramas.png’,
preview: ‘images/loading.gif’,
hotspots: {
spot1: {
pitch: 4.5,
yaw: 47.1,
radius: 0.4,
distance: 2,
shape: ‘rectangle_A’,
opacity:1.0,
icon:’image.png’,
rotation:’10,20,-30′,
}
//hotspot作成時にパラメータを渡す
function loadScene(id){
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_stereo: true,
is_autopan_off: true
});
// Add all the hotspots for the scene
var newScene = scenes[id];
var sceneHotspots = Object.keys(newScene.hotspots);
for (var i = 0; i < sceneHotspots.length; i++) {
var hotspotKey = sceneHotspots[i];
var hotspot = newScene.hotspots[hotspotKey];
vrView.addHotspot(hotspotKey, {
pitch: hotspot.pitch,
yaw: hotspot.yaw,
radius: hotspot.radius,
distance: hotspot.distance,
shape:hotspot.shape,
opacity:hotspot.opacity,
icon:hotspot.icon,
rotation:hotspot.rotation
});
}
}
}
【embed.js】
//関数追加
HotspotRenderer.prototype.createHotspot_icon_ = function(radius, distance, shape, opacity, icon, rotation) {
var hex_color = 0xffffff;
var param_error = false;
try{
var loader = new THREE.TextureLoader();
//imagesフォルダーに画像お置いておく
var path = ‘./images/’ + icon;
//画像をtextureにする
var texture = loader.load (path);
}catch(e){
param_error = true;
}
if(shape == “circle”){
//円
var innerGeometry = new THREE.CircleGeometry(radius, 32, Math.PI);
var outerGeometry = new THREE.RingGeometry(radius * 0.85, radius, 32);
}else if(shape == “triangle_A”){
//三角形
var innerGeometry = new THREE.CircleGeometry(radius, 3, Math.PI/2);
var outerGeometry = new THREE.CircleGeometry(radius, 3, Math.PI/2);
}else if(shape == “rectangle_A”){
//横長の四角形
//（three.jsではPlaneBufferGeometryをexportしておきます、実装を参照）
var innerGeometry = new THREE.PlaneBufferGeometry(radius,radius/2);
var outerGeometry = new THREE.PlaneBufferGeometry(radius,radius/2);
}else if(shape == “square”){
//正方形
//（three.jsではPlaneBufferGeometryをexportしておきます、実装を参照）
var innerGeometry = new THREE.PlaneBufferGeometry(radius,radius);
var outerGeometry = new THREE.PlaneBufferGeometry(radius,radius);
}else if(shape == “hexagon”){
//六角形
var innerGeometry = new THREE.CircleGeometry(radius, 6, Math.PI);
var outerGeometry = new THREE.CircleGeometry(radius, 6, Math.PI);
}else if(shape == “triangle_B”){
//逆三角形
var innerGeometry = new THREE.CircleGeometry(radius, 3, Math.PI/6);
var outerGeometry = new THREE.CircleGeometry(radius, 3, Math.PI/6);
}else if(shape == “rectangle_B”){
//縦長の四角
//（three.jsではPlaneBufferGeometryをexportしておきます、実装を参照）
var innerGeometry = new THREE.PlaneBufferGeometry(radius/2,radius);
var outerGeometry = new THREE.PlaneBufferGeometry(radius/2,radius);
}else{
var innerGeometry = new THREE.CircleGeometry(radius, 32, Math.PI);
var outerGeometry = new THREE.RingGeometry(radius * 0.85, radius, 32);
}
if(param_error == false){
if(Number(opacity) == 1.0){
var innerMaterial = new THREE.MeshBasicMaterial({
map:texture,color:0xffffff,side:THREE.DoubleSide,depthTest:false,alphaTest:0.1
});
var outerMaterial = new THREE.MeshBasicMaterial({
map:texture,color:0xffffff,side:THREE.DoubleSide,depthTest:false,alphaTest:0.1
});
}else{
var innerMaterial = new THREE.MeshBasicMaterial({
map: texture,color:0xffffff,side: THREE.DoubleSide, opacity:Number(opacity),transparent:true, depthTest: false
});
var outerMaterial = new THREE.MeshBasicMaterial({
map: texture,color:0xffffff,side: THREE.DoubleSide, opacity:Number(opacity),transparent:true,depthTest: false
});
}
}else{
var innerMaterial = new THREE.MeshBasicMaterial({
color: hex_color, 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
});
}
var inner = new THREE.Mesh(innerGeometry, innerMaterial);
inner.name = ‘inner’;
var outer = new THREE.Mesh(outerGeometry, outerMaterial);
outer.name = ‘outer’;
if(rotation != ”){
var rot_list = rotation.split(“,”);
if((rot_list[0] != ‘0’)&&(rot_list[0] != null)){
inner.rotation.x = Number(rot_list[0]) * Math.PI / 180;
outer.rotation.x = Number(rot_list[0]) * Math.PI / 180;
}
if((rot_list[1] != ‘0’)&&(rot_list[0] != null)){
inner.rotation.y = Number(rot_list[1]) * Math.PI / 180;
outer.rotation.y = Number(rot_list[1]) * Math.PI / 180;
}
if((rot_list[2] != ‘0’)&&(rot_list[0] != null)){
inner.rotation.z = Number(rot_list[2]) * Math.PI / 180;
outer.rotation.z = Number(rot_list[2]) * Math.PI / 180;
}
}
var hotspot = new THREE.Object3D();
hotspot.position.z = -distance;
hotspot.scale.set(NORMAL_SCALE);
hotspot.add(inner);
hotspot.add(outer);
return hotspot;
};
//この関数を参照して記述を追加
HotspotRenderer.prototype.add = function(pitch, yaw, radius, distance, shape, opacity,icon,rotation)
//追加
if(icon != “”){
var hotspot = this.createHotspot_icon_(radius, distance, shape, opacity, icon, rotation);
}else{
//画像が無ければ、元々のHotspotスタイル
var hotspot = this.createHotspot_(radius, distance, color, shape, opacity, rotation);
}
Leave a Reply