百度智能小程序 VR 3D模型-beta

2020-08-28 15:52 更新

modelviewer VR 3D 模型-beta

modelviewer 動態(tài)庫提供了在小程序中展示 3D 模型功能,底層基于百度 webVR SDK Hydreigon 實現(xiàn)。

使用方法

1. 在項目中引用動態(tài)庫

使用動態(tài)庫的方法參見小程序文檔:使用動態(tài)庫,在 app.json 中增添一項 dynamicLib,與 pages 同級。

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

2. 在使用到模型組件的頁面配置動態(tài)庫

在每個使用到模型組件的頁面,配置 *.json 文件如:

{
    "usingSwanComponents": {
        "modelviewer": "dynamicLib://myModelviewer/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
                        }
                    }
                }
            ]
        }
    ]
};

動態(tài)庫配置文件詳細說明

動態(tài)庫屬性列表

<modelviewer> 上支持的屬性包括:

屬性名稱類型說明
optionObject配置項,參見上方參數(shù)說明列表

總配置

屬性名稱必填默認值說明
autoStarttrue是否
parent“body”父級容器的 dom 元素匹配 css 表達式
backgroundImage“”設置全局 2D 背景圖,該背景圖設置全局有效,可被 scene 的配置覆蓋
camera設置相機配置參數(shù),具體設置請看 camera 配置表
scenes設置場景配置參數(shù),可以配置任意數(shù)量的場景,可以通過熱點進行場景切換。所有的場景只會在用到時加載自己所需資源。且在切換為新場景時,舊場景不會被銷毀,從而再次進入舊場景則可以直接展示,無需用戶等待。

相機配置

屬性名稱必填默認值說明
fov65調整透視相機 fov
position{x: 0, y:0, z:0}相機初始位置坐標
near1調整相機近截面距離
far10000調整相機遠截面距離

場景配置

場景是一個數(shù)組,每個數(shù)組元素都是獨立的場景

屬性名稱必填默認值說明
panonull全景設置。該全景圖會出現(xiàn)在場景里面,會覆蓋 2D 背景圖。
scale1模型縮放。
animationsnull用于額外修改模型動畫默認參數(shù)的配置。
lightsnull用于設置光照,是個數(shù)組,可以配置任意數(shù)量和不同類型的光照。如果不配置則會 SDK 默認添加一組光照。
backgroundImagenull圖片的 url。用于設置該場景的 2D 背景圖,該設置填寫之后會覆蓋全局配置
autoPlayAnimationnull是否進入該場景之后自動播放某個名稱的動畫
showLabelsfalse是否進入該場景后自動顯示所有熱點
url模型的 url。為了提高展示性能以及縮短用戶的等待時間,SDK 只支持 gltf 和 glb 格式。并且推薦開發(fā)者的模型進行 draco 編碼壓縮。
offset{x: 0, y:0, z:0}模型默認位置的偏移量。由于絕大部分情況模型建模的原點在模型的底部,從而在展示的時候總是偏向于上方。為了更好的用戶體驗通常需要模型居中展示,通過次參數(shù)進行調整
hotspots[]可以配置任意數(shù)量的熱點進行一些交互操作。具體的參數(shù)設置。

全景設置

屬性名稱必填默認值說明
url“”如果設置則會創(chuàng)建球面全景圖
radius800設置全景圖球體的半徑
rotation0全景圖球體在 y 軸上的旋轉弧度
position[0, 0, -0]全景圖的位置偏移,數(shù)組長度為 3,對應 x,y,z 坐標

動畫設置

動畫配置為鍵值對形式,通常情況無需配置,只有對某些動畫需要額外處理的時候才需要配置。其中 key 為某個動畫的名稱,其 value 值說明如下

屬性名稱必填默認值說明
startAt0
durationInfinity

光照設置

光照設置是個數(shù)組,可以設置點錐形源,平行光,環(huán)境光。不同的光有不同的配置參數(shù)。如下所示:

錐形光

屬性名稱必填默認值說明
typeSpotLighttype 必須為 SpotLight
params.color0xffffff顏色值,可以為數(shù)字,也可以為#開頭的字符串,如“#FFFFFF”,也可以為顏色英文名稱,如"white"
params.intensity1光照強度
params.position[1, 1, 1]光源的位置,數(shù)組長度為 3,對應 x,y,z 坐標
distance0光的最遠照射距離,0 表示無窮遠
angle1.57設置錐角弧度大小
decay1衰減率。離光越遠,光照強度越弱。1 為不衰減。取值為 0 到 1 之間

平行光

屬性名稱必填默認值說明
typeDirectionalLighttype 必須為 DirectionalLight
params.color0xffffff顏色值,可以為數(shù)字,也可以為#開頭的字符串,如“#FFFFFF”,也可以為顏色英文名稱,如"white"
params.intensity1光照強度
params.position[1, 1, 1]光源的位置,數(shù)組長度為 3,對應 x,y,z 坐標

環(huán)境光

屬性名稱必填默認值說明
typeDirectionalLighttype 必須為 AmbientLight
params.color0xffffff顏色值,可以為數(shù)字,也可以為#開頭的字符串,如“#FFFFFF”,也可以為顏色英文名稱,如"white"
params.intensity1光照強度

熱點配置

熱點目前支持 2 種交互操作,一種是模型部位的高亮。一種是場景的切換跳轉。整個的熱點配置是個數(shù)組,數(shù)組的每個元素對應一個熱點。熱點是 dom 元素而非 WebGL 繪制,因此熱點始終會比模型的層級更高。具體配置如下。

屬性名稱必填默認值說明
text用于熱點顯示的文本
position熱點相對于 3D 場景掛載的模型節(jié)點的位置,數(shù)組長度為 3,對應 x,y,z 坐標
parentName熱點所掛載的模型節(jié)點的網(wǎng)格或組的名稱
events{}用于配置熱點的交互。如果是{}則不會出現(xiàn)任何交互操作
events.clickevents 可以設置一些交互操作名稱,例如 click,則交互操作在 click 事件觸發(fā)。
events.click.type取值為 highlight 或者 jump,分別對應模型高度操作以及場景跳轉操作。
events.click.color[1,1,1]模型高亮的顏色,采用的是和著色器的顏色取值,必須是 0 到 1 之間的數(shù)字
events.click.duration1000模型高亮是一種呼吸燈的忽明忽暗效果,這個是亮變暗的時間
events.click.timesInfinity呼吸燈高亮次數(shù)


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號