WEB端 SDK
更新时间：2022-02-28
安装
环境准备
- 运行浏览器需要支持es5、6;
- 要使用百度VR产品，您需要拥有一个百度VR云账号和一个有效的 AK(Access Key ID)、SK(Secret Access Key)用来进行签名认证。可以通过百度vr console页面获得并了解您的AK/SK信息。
下载和安装
快速入门
本节介绍如何快速使用 Hydreigon SDK 完成基本操作。具体接口参数定义详细请参考API文档。
Hydreigon SDK包含四个品类功能，分别是全景图（PanoViewer）、环物（SpinTileViewer）、全景视频（PanovideoViewer）和模型（Modelviewer）。
| 品类 | SDK 文件 |
|---|---|
| PanoViewer | hydreigon.panoviewer.min.js |
| SpinTileViewer | hydreigon.spintileviewer.min.js |
| PanovideoViewer | hydreigon.panovideoviewer.min.js |
| Modelviewer | hydreigon.modelviewer.min.js |
全景图（PanoViewer）
- 创建一个配置参数对象。
通过 Hydreigon.PanoConfiguration 构造一个配置对象，必须传入基本的渲染参数对象，目前全景图支持四种渲染类型，分别是 cube 散图、cube 雪碧图、单张全景图和分级分块图，如下代码示例；
- cube 散图
// 构造配置参数，分别设置场景资源，id, 场景类型，场景名称，fov值，fov范围，仰角(pitch)范围
var configuration = new Hydreigon.PanoConfiguration({
resource_type: 'pano', // 场景类型，与materialType保持一致
render_type: 'cube-list', // 渲染类型
resource: { // 资源链接
source: {
image: [
'https://hydreigon-dev.cdn.bcebos.com/pano-lite/keting-4000/f.jpg',
'https://hydreigon-dev.cdn.bcebos.com/pano-lite/keting-4000/b.jpg',
'https://hydreigon-dev.cdn.bcebos.com/pano-lite/keting-4000/l.jpg',
'https://hydreigon-dev.cdn.bcebos.com/pano-lite/keting-4000/r.jpg',
'https://hydreigon-dev.cdn.bcebos.com/pano-lite/keting-4000/u.jpg',
'https://hydreigon-dev.cdn.bcebos.com/pano-lite/keting-4000/d.jpg'
],
order: 'fblrud'
}
}
}).setId('scene-01').setSceneType('pano').setSceneName('Cool').setFov(70).setFovRange([1, 179]).setPitchRange([-90, 90]);- cube 雪碧图
// 构造配置参数，分别设置场景资源，id, 场景类型，场景名称，fov值，fov范围，仰角(pitch)范围
var configuration = new Hydreigon.PanoConfiguration({
resource_type: 'pano', // 场景类型，与materialType保持一致
render_type: 'cube', // 渲染类型
resource: { // 资源链接
source: {
image:'https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/dist/assets/pano/cube-sprite.jpg',
order: 'fblrud'
}
}
}).setId('scene-01').setSceneType('pano').setSceneName('Cool').setFov(70).setFovRange([1, 179]).setPitchRange([-90, 90]);- 单张全景图
// 构造配置参数，分别设置场景资源，id, 场景类型，场景名称，fov值，fov范围，仰角(pitch)范围
var configuration = new Hydreigon.PanoConfiguration({
resource_type: 'pano', // 场景类型，与materialType保持一致
render_type: 'sphere', // 渲染类型
resource: { // 资源链接
source: {
image: 'https://hydreigon-dev.bj.bcebos.com/sdk-dev%2Fdist%2Fassets%2Fpano%2Fpano-test.jpg',
order: 'fblrud'
}
}
}).setId('scene-01').setSceneType('pano').setSceneName('Cool').setFov(70).setFovRange([1, 179]).setPitchRange([-90, 90]);- 分级分块图
// 构造配置参数，分别设置场景资源，id, 场景类型，场景名称，fov值，fov范围，仰角(pitch)范围
var configuration = new Hydreigon.PanoConfiguration({
resource_type: 'pano', // 场景类型，与materialType保持一致
render_type: 'cube-multi', // 渲染类型
resource: { // 资源链接
source: {
tile_path: "https://bj.bcebos.com/v1/repos3d/penglai/pano_packages/pack_pano_default_07/pieces/panos/input.tiles/",
tile_file: "panos/input.tiles/%s/l%l/%v/l%l_%s_%v_%h.jpg",
tile_size: [
512,
1152,
2304,
4608
]
}
}
}).setId('scene-01').setSceneType('pano').setSceneName('Cool').setFov(70).setFovRange([1, 179]).setPitchRange([-90, 90]);- 创建渲染器对象 Render 对象。
创建渲染器并绑定 canvas 到父容器，如下示例：
var container = document.getElementById("container");
var renderer = Hydreigon.RenderManager.create(container);
container.appendChild(renderer.canvas);- 创建全景视图 PanoViewer 对象。
传入父容器、ak、sk和调试配置参数，来创建全景视图 PanoViewer 对象并初始化，如下示例：
var PanoViewer = Hydreigon.PanoViewer;
var ak = 'xxx';
var sk = 'xxx';
var panoViewer = new PanoViewer(container, ak, sk, config);
panoViewer.init(configuration);
// 监听事件，启用pointEvent
panoViewer.addEventListener('scene-loaded', () => {
panoViewer.enablePointEvent(true);
});- 添加 PanoViewer 到渲染器进行展示。
将创建完的 panoViewer 添加到渲染器并进行渲染展示，如下示例：
renderer.setCurrentViewer(panoViewer);
Hydreigon.RafManager.add(renderer.render);完整创建流程如下Demo链接。
环物（SpinTileViewer）
- 创建一个配置参数对象。
通过 Hydreigon.Configuration 构造一个配置对象，必须传入基本的渲染参数对象。
var configuration = new Hydreigon.Configuration({
resource_type: 'spin',
render_type: 'sphere',
resource: {
tile_path: 'https://hydreigon-dev.cdn.bcebos.com/view3dsdk-dev/assets/panamera_360',
tile_size: 510,
tile_file: '${row}_${col}_files',
cover_image: '${row}_${col}_cover.jpg',
extension: 'jpg',
width: 8256,
height: 5504,
min_level: 11,
col_count: 32,
row_count: 1,
cover_width: 1032,
cover_height: 688
},
});- 创建环物 SpinTileViewer 对象。
传入父容器、ak、sk，来创建环物 SpinTileViewer 对象并初始化，如下示例：
var ak = 'xxx';var sk = 'xxx';var viewer = new Hydreigon.SpinTileViewer(document.getElementById('container'), ak, sk);viewer.on('hyd-image-loaded', () => { viewer.show(1);});viewer.init(configuration);完整创建流程如下Demo链接。
全景视频（PanovideoViewer）
- 创建一个配置参数json数据。
var config = { "name": "D1", "type": "scene_panovideo", "transform": {}, "view": { "fov": 70, "fov_range": [ 70, 120 ], "pitch_range": [ -90, 90 ] }, "video": { "path": "https://bj.bcebos.com/v1/repos3d-dev/penglai-dev/resources/videos/7476f51a49203bd1d72295312123c165", "origin": "/VR超清美少女萌翻台儿4K.mp4", "targets": [ { "multi_file": "/formats/mp4/%s/output.mp4", "resolution": [ "2560x1280", "1920x960", "3840x1920", "1280x640" ] } ], "tracks": [ { "file": "/assets/thumbs/thumbs.vtt", "type": "thumbnails" } ] }};- 创建全景视频 PanovideoViewer 对象。
传入父容器、配置参数json、ak、sk，来创建全景视频 PanovideoViewer 对象并初始化，在视频加载完需要监听事件并展示全景视频，如下示例：
const ak = 'xxx';const sk = 'xxx';var viewer = new Hydreigon.PanovideoViewer(document.body, config, ak, sk, { starttime: 0, mp4_first: true, autostart: true});viewer.addEventListener('hyd-video-on-meta', d => { console.log('hyd-video-on-meta'); viewer.show();});viewer.init();完整创建流程如下Demo链接。
模型（Modelviewer）
- 创建一个配置参数对象。
构造一个配置参数的 json 数据，必须有以下字段，如下示例。
- 单体obj文件渲染
var configuration = { resource_type: 'model', render_type: 'obj', resource: { models: [ { type: 'obj', obj: 'https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/assets/models/shoe1/baked_mesh.obj', mtl: 'https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/assets/models/shoe1/baked_mesh.mtl' } ], background: { texture: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-08-18%2F5b778423b403d.jpg' } }}- 单体gltf或glb文件渲染
var configuration = { resource_type: 'model', render_type: 'gltf', resource: { models: [ { type: 'gltf', obj: 'https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/assets/models/bear/bear.glb', } ], background: { color: 'white' } }}- 单体fbx文件渲染 - 参考上文【单体gltf或glb文件渲染】中配置， 只需要将render_type和resource.models.type改为 'fbx' ，并将obj链接改为对应文件链接即可。
- 创建模型 ModelViewer 对象。
传入父容器、配置参数 json 对象、ak、sk和可选参数，来创建模型 ModelViewer 对象并初始化，在返回的 promise 对象 then 函数中初始化 modelViewer 对象，如下示例：
var ak = 'xxx';var sk = 'xxx';var viewer;Hydreigon.ModelViewer.create(document.getElementById('container'), configuration, ak, sk, { justify_camera: true, justify_model: true, vm_ratio: 0.7,}).then(v => { viewer = v; viewer.init();});完整创建流程如下Demo链接。