文档中心

安装

环境准备

1. 运行浏览器需要支持es5、6;
2. 要使用百度VR产品，您需要拥有一个百度VR云账号和一个有效的 AK(Access Key ID)、SK(Secret Access Key)用来进行签名认证。可以通过百度vr console页面获得并了解您的AK/SK信息。

下载和安装

1. 环物
2. 全景图
3. 全景视频
4. 模型

快速入门

本节介绍如何快速使用 Hydreigon SDK 完成基本操作。具体接口参数定义详细请参考API文档。
Hydreigon SDK包含四个品类功能，分别是全景图（PanoViewer）、环物（SpinTileViewer）、全景视频（PanovideoViewer）和模型（Modelviewer）。

全景图（PanoViewer）

1. 创建一个配置参数对象。
   通过 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://hydre

igon-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').setSce

neName('Cool').setFov(70).setFovRange([1, 179]).setPitchRange([-90, 90]);

1. 创建渲染器对象 Render 对象。
   创建渲染器并绑定 canvas 到父容器，如下示例：

var container = document.getElementById("container"); var renderer = Hydreigon.RenderManager

.create(container); container.appendChild(renderer.canvas);

1. 创建全景视图 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); // 监听事件，启用pointE

vent panoViewer.addEventListener('scene-loaded', () => { panoViewer.enablePointEvent(true); });

1. 添加 PanoViewer 到渲染器进行展示。
   将创建完的 panoViewer 添加到渲染器并进行渲染展示，如下示例：

renderer.setCurrentViewer(panoViewer); Hydreigon.RafManager.add(renderer.render);

完整创建流程如下Demo链接。

环物（SpinTileViewer）

1. 创建一个配置参数对象。
   通过 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 }, });

1. 创建环物 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）

1. 创建一个配置参数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" } ] }};

1. 创建全景视频 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.addEv

entListener('hyd-video-on-meta', d => { console.log('hyd-video-on-meta'); viewer.show();});viewer.init();

完整创建流程如下Demo链接。

模型（Modelviewer）

1. 创建一个配置参数对象。
   构造一个配置参数的 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/shoe

1/baked_mesh.obj', mtl: 'https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/assets/models/s

hoe1/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链接改为对应文件链接即可。

1. 创建模型 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链接。