渲染多场景，入场动画，2d/3d热点，遮罩等
var config = {
"sceneName": "scene_01",
"sceneType": "pano",
"enterAnimation": 1,
"gyro": true,
"views": [
{
"id": "scene_02",
"name": "陆家嘴",
"thumb": "https://bj.bcebos.com/v1/repos3d-dev/penglai-dev/pano_packages/pack_pano_930bffed5/images/thumbnail.jpg",
"source": {
"type": "cube-multi",
"levels": [
2,
3
],
"tileFile": "panos/uploaded.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg",
"tilePath": "https://bj.bcebos.com/v1/repos3d-dev/penglai-dev/pano_packages/pack_pano_930bffed5/pieces/panos/uploaded.tiles/",
"tileSize": [
512,
640,
1280
]
},
"rotation": {"x":0, "y":0, "z":0},
"fov": 90,
"fovRange": [1, 179],
"pitchRange": [-90, 90],
"hotspots": [
{
"id": "hotspot_02_01",
"name": "My House",
"type": "switch",
"pos": {
"x": -8.057313581180379,
"y": -6.480815117436344,
"z": -38.640376981444355
},
"className": "link-right",
"target": {
"id": "scene_01"
},
"tip": "文字标签内容"
},
{
"id": "hotspot_02_02",
"name": "文字标签",
"type": "label",
"pos": {
"x": -28.547728209330113,
"y": -27.27110127197048,
"z": -6.427616159988691
},
"tip": "东方明珠"
},
{
"id": "hotspot_02_04",
"name": "文字标签",
"type": "label",
"pos": {
"x": 35.0390662619074,
"y": 7.0900190425477305,
"z": -17.944232094742105
},
"tip": "你就是那天边最美的云彩"
},
{
"id": "hotspot_02_03",
"name": "热点名称",
"type": "pole",
"pos": {
"x": 0,
"y": -40,
"z": 0
},
"image": "https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/dist/assets/pano/logo.png",
"fixDirection": false
}
]
},
{
"id": "scene_01",
"name": "My House",
"thumb": "https://bj.bcebos.com/v1/repos3d-dev/penglai-dev/pano_packages/pack_pano_e3ae302a6/images/thumbnail.jpg",
"rotation": {"x":0, "y":0, "z":0},
"fov": 80,
"fovRange": [50, 150],
"pitchRange": [-90, 90],
"hotspots": [
{
"id": "hotspot_01_01",
"name": "文字",
"type": "label",
"pos": {
"x": 30.329156112593544,
"y": 0.7414435413663166,
"z": -26.068995971707384
},
"tip": "大电视"
},
{
"id": "hotspot_01_02",
"name": "热点名称",
"type": "pole",
"pos": {"x":0, "y":-40, "z":0},
"image": "https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/dist/assets/pano/logo.png",
"fixDirection": true,
"origin": 30
},
{
"id": "hotspot_01_03",
"name": "去陆家嘴逛逛",
"type": "switch",
"pos": {
"x": 37.214754418090706,
"y": -6.549489915403543,
"z": 13.121213185114595
},
"className": "link-front",
"target": {
"id": "scene_02",
"rotation": {"x":0, "y":2, "z":0}
}
},
{
"id": "hotspot_01_04",
"name": "出门看车",
"type": "switch",
"pos": {
"x": -1.509233010989604,
"y": 1.6492378131064185,
"z": -39.93747901851542
},
"className": "link-front",
"target": {
"id": "scene_03",
"rotation": {"x":0, "y":0, "z":0}
}
}
],
"source": {
"type": "cube-multi",
"levels": [
2,
3
],
"tileFile": "panos/uploaded.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg",
"tilePath": "https://bj.bcebos.com/v1/repos3d-dev/penglai-dev/pano_packages/pack_pano_e3ae302a6/pieces/panos/uploaded.tiles/",
"preview": "https://bj.bcebos.com/v1/repos3d-dev/penglai-dev/pano_packages/pack_pano_e3ae302a6/pieces/panos/uploaded.tiles/preview.jpg",
"tileSize": [
512,
640,
1280
]
}
},
{
"id": "scene_03",
"name": "良驹",
"thumb": "https://bj.bcebos.com/v1/repos3d-dev/penglai-dev/pano_packages/pack_pano_1d97b7d10/images/thumbnail.jpg",
"source": {
"type": "cube-multi",
"levels": [
2,
3
],
"tileFile": "panos/uploaded.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg",
"tilePath": "https://bj.bcebos.com/v1/repos3d-dev/penglai-dev/pano_packages/pack_pano_1d97b7d10/pieces/panos/uploaded.tiles/",
"tileSize": [
512,
640,
1280
]
},
"rotation": {"x":0, "y":0, "z":0},
"fov": 90,
"fovRange": [60, 120],
"pitchRange": [-60, 60],
"hotspots": [
{
"id": "hotspot_06",
"name": "热点名称",
"type": "pole",
"pos": {
"x": 0,
"y": 40,
"z": 0
},
"image": "https://hydreigon-dev.bj.bcebos.com/sdk-dev%2Fdist%2Fassets%2Fpano%2Fmask.png",
"fixDirection": false
},
{
"id": "hotspot_07",
"name": "回家",
"type": "switch",
"pos": {
"x": 36.093230274941,
"y": -0.5731886672384752,
"z": -17.232242543320716
},
"className": "link-left",
"target": {
"id": "scene_01",
"rotation": {
"x": 0,
"y": 2,
"z": 0
}
},
"fixDirection": false
}
]
}
]
}
var PanoViewer = Hydreigon.PanoViewer;
var container = document.getElementById("container");
var panoViewer = new PanoViewer(container, config);
panoViewer.init();