sidebar: modelviewer

title: modelviewer 动态库-Beta header: develop nav: framework

sidebar: modelviewer

modelviewer 动态库提供了在小程序中展示 3D 模型功能，底层基于百度webVR SDK Hydreigon 实现。

使用方法

1. 在项目中引用动态库

使用动态库的方法参见小程序文档：使用动态库，在 app.json 中增添一项 dynamicLib，与 pages 同级。

"dynamicLib": {
    "myModelviewer": {
        "provider": "modelviewer"
    }
},

2. 在使用到模型组件的页面配置动态库

在每个使用到模型组件的页面，配置 *.json 文件如：

{
    "usingSwanComponents": {
        "modelviewer": "dynamicLib://myDynamicLib/modelviewer"
    }
}

3. 编写 *.swan 文件

<modelviewer option="{{ option }}" style="width: 100%; height: 500px; display: block"></modelviewer>

这是一种最基本的配置方式。style 也可以在 *.css 中声明，需要保证 <modelviewer> 是有宽度和高度的。option 在 *.js 中绑定到页面的 data 中：

const option = ...;
Page({
    data: {
        option: option
    }
});

其中，option 是一个模型展示配置项，定义了模型应该如何展示，示例如下：

option = {
    "autoStart": true,
    "parent": "body",
    "backgroundImage": "https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/dist/assets/bg.jpg",
    "camera": {
        "fov": "65",
        "position": [
            0,
            0,
            0
        ],
        "near": 1,
        "far": 10000
    },
    "scenes": [
        {
            "pano": {
                "url": "https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/dist/assets/model/bio/skybox.jpg",
                "radius": 800,
                "rotation": 0,
                "position": [0, 0, -0]
            },
            "scale": 1,
            "animationSettings": {
                "111": {
                    "startAt": 0,
                    "duration": 3.6
                }
            },
            "lights": [
                {
                    "type": "AmbientLight",
                    "params": {
                        "color": 16777215,
                        "intensity": 1
                    }
                },
                {
                    "type": "DirectionalLight",
                    "params": {
                        "color": 16777215,
                        "intensity": 1,
                        "position": [
                            1,
                            1,
                            1
                        ]
                    }
                },
                {
                    "type": "SpotLight",
                    "params": {
                        "color": 16777215,
                        "intensity": 1,
                        "position": [
                            1,
                            1,
                            1
                        ],
                        "distance": 0,
                        "angle": 1.57,
                        "penumbra": 0.5,
                        "decay": 1
                    }
                }
            ],
            "backgroundImage": "https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/dist/assets/bg.jpg",
            "autoPlayAnimation": "111",
            "showLabels": false,
            "url": "https://hydreigon-publish.bj.bcebos.com/swan-hydreigon/model/new_robot/scene.gltf",
            "bg": "https://bj.bcebos.com/v1/hydreigon-dev/sdk-dev/dist/assets/bg.jpg",
            "offset": [
                0,
                -25,
                0
            ],
            "hotspots": [
                {
                    "text": "右上臂",
                    "position": [
                        -0.7,
                        1.2,
                        0
                    ],
                    "parentName": "右上臂",
                    "events": {
                        "click": {
                            "type": "highlight",
                            "color": [
                                0.096,
                                0.359,
                                0.757
                            ],
                            "duration": 1000,
                            "times": 3
                        }
                    }
                },
                {
                    "text": "左下臂",
                    "position": [
                        0.7,
                        0.6,
                        0
                    ],
                    "parentName": "左下臂",
                    "events": {
                        "click": {
                            "type": "highlight",
                            "color": [
                                0.096,
                                0.359,
                                0.757
                            ],
                            "duration": 1000,
                            "times": 3
                        }
                    }
                },
                {
                    "text": "膝盖",
                    "position": [
                        0,
                        0.5,
                        0
                    ],
                    "parentName": "膝盖",
                    "events": {
                        "click": {
                            "type": "highlight",
                            "color": [
                                0.096,
                                0.359,
                                0.757
                            ],
                            "duration": 1000,
                            "times": 3
                        }
                    }
                }
            ]
        }
    ]
};

动态库配置文件详细说明

动态库属性列表

<modelviewer> 上支持的属性包括：

总配置

相机配置

场景配置

场景是一个数组，每个数组元素都是独立的场景

全景设置

动画设置

动画配置为键值对形式，通常情况无需配置，只有对某些动画需要额外处理的时候才需要配置。其中key为某个动画的名称，其value值说明如下

光照设置

光照设置是个数组，可以设置点锥形源，平行光，环境光。不同的光有不同的配置参数。如下所示：

锥形光：

平行光：

环境光：

热点配置

热点目前支持2种交互操作，一种是模型部位的高亮。一种是场景的切换跳转。整个的热点配置是个数组，数组的每个元素对应一个热点。热点是dom元素而非WebGL绘制，因此热点始终会比模型的层级更高。具体配置如下。