W3Cschool
恭喜您成為首批注冊用戶
獲得88經驗值獎勵
modelviewer 動態(tài)庫提供了在小程序中展示 3D 模型功能,底層基于百度 webVR SDK Hydreigon 實現(xiàn)。
使用動態(tài)庫的方法參見小程序文檔:使用動態(tài)庫,在 app.json 中增添一項 dynamicLib,與 pages 同級。
"dynamicLib": {
"myModelviewer": {
"provider": "modelviewer"
}
},
在每個使用到模型組件的頁面,配置 *.json 文件如:
{
"usingSwanComponents": {
"modelviewer": "dynamicLib://myModelviewer/modelviewer"
}
}
<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> 上支持的屬性包括:
屬性名稱 | 類型 | 說明 |
---|---|---|
option | Object | 配置項,參見上方參數(shù)說明列表 |
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
autoStart | 否 | true | 是否 |
parent | 否 | “body” | 父級容器的 dom 元素匹配 css 表達式 |
backgroundImage | 否 | “” | 設置全局 2D 背景圖,該背景圖設置全局有效,可被 scene 的配置覆蓋 |
camera | 否 | 設置相機配置參數(shù),具體設置請看 camera 配置表 | |
scenes | 是 | 設置場景配置參數(shù),可以配置任意數(shù)量的場景,可以通過熱點進行場景切換。所有的場景只會在用到時加載自己所需資源。且在切換為新場景時,舊場景不會被銷毀,從而再次進入舊場景則可以直接展示,無需用戶等待。 |
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
fov | 否 | 65 | 調整透視相機 fov |
position | 否 | {x: 0, y:0, z:0} | 相機初始位置坐標 |
near | 否 | 1 | 調整相機近截面距離 |
far | 否 | 10000 | 調整相機遠截面距離 |
場景是一個數(shù)組,每個數(shù)組元素都是獨立的場景
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
pano | 否 | null | 全景設置。該全景圖會出現(xiàn)在場景里面,會覆蓋 2D 背景圖。 |
scale | 否 | 1 | 模型縮放。 |
animations | 否 | null | 用于額外修改模型動畫默認參數(shù)的配置。 |
lights | 否 | null | 用于設置光照,是個數(shù)組,可以配置任意數(shù)量和不同類型的光照。如果不配置則會 SDK 默認添加一組光照。 |
backgroundImage | 否 | null | 圖片的 url。用于設置該場景的 2D 背景圖,該設置填寫之后會覆蓋全局配置 |
autoPlayAnimation | 否 | null | 是否進入該場景之后自動播放某個名稱的動畫 |
showLabels | 否 | false | 是否進入該場景后自動顯示所有熱點 |
url | 是 | 模型的 url。為了提高展示性能以及縮短用戶的等待時間,SDK 只支持 gltf 和 glb 格式。并且推薦開發(fā)者的模型進行 draco 編碼壓縮。 | |
offset | 否 | {x: 0, y:0, z:0} | 模型默認位置的偏移量。由于絕大部分情況模型建模的原點在模型的底部,從而在展示的時候總是偏向于上方。為了更好的用戶體驗通常需要模型居中展示,通過次參數(shù)進行調整 |
hotspots | 否 | [] | 可以配置任意數(shù)量的熱點進行一些交互操作。具體的參數(shù)設置。 |
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
url | 否 | “” | 如果設置則會創(chuàng)建球面全景圖 |
radius | 否 | 800 | 設置全景圖球體的半徑 |
rotation | 否 | 0 | 全景圖球體在 y 軸上的旋轉弧度 |
position | 否 | [0, 0, -0] | 全景圖的位置偏移,數(shù)組長度為 3,對應 x,y,z 坐標 |
動畫配置為鍵值對形式,通常情況無需配置,只有對某些動畫需要額外處理的時候才需要配置。其中 key 為某個動畫的名稱,其 value 值說明如下
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
startAt | 否 | 0 | |
duration | 否 | Infinity |
光照設置是個數(shù)組,可以設置點錐形源,平行光,環(huán)境光。不同的光有不同的配置參數(shù)。如下所示:
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
type | 是 | SpotLight | type 必須為 SpotLight |
params.color | 否 | 0xffffff | 顏色值,可以為數(shù)字,也可以為#開頭的字符串,如“#FFFFFF”,也可以為顏色英文名稱,如"white" |
params.intensity | 否 | 1 | 光照強度 |
params.position | 否 | [1, 1, 1] | 光源的位置,數(shù)組長度為 3,對應 x,y,z 坐標 |
distance | 否 | 0 | 光的最遠照射距離,0 表示無窮遠 |
angle | 否 | 1.57 | 設置錐角弧度大小 |
decay | 否 | 1 | 衰減率。離光越遠,光照強度越弱。1 為不衰減。取值為 0 到 1 之間 |
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
type | 是 | DirectionalLight | type 必須為 DirectionalLight |
params.color | 否 | 0xffffff | 顏色值,可以為數(shù)字,也可以為#開頭的字符串,如“#FFFFFF”,也可以為顏色英文名稱,如"white" |
params.intensity | 否 | 1 | 光照強度 |
params.position | 否 | [1, 1, 1] | 光源的位置,數(shù)組長度為 3,對應 x,y,z 坐標 |
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
type | 是 | DirectionalLight | type 必須為 AmbientLight |
params.color | 否 | 0xffffff | 顏色值,可以為數(shù)字,也可以為#開頭的字符串,如“#FFFFFF”,也可以為顏色英文名稱,如"white" |
params.intensity | 否 | 1 | 光照強度 |
熱點目前支持 2 種交互操作,一種是模型部位的高亮。一種是場景的切換跳轉。整個的熱點配置是個數(shù)組,數(shù)組的每個元素對應一個熱點。熱點是 dom 元素而非 WebGL 繪制,因此熱點始終會比模型的層級更高。具體配置如下。
屬性名稱 | 必填 | 默認值 | 說明 |
---|---|---|---|
text | 是 | 用于熱點顯示的文本 | |
position | 是 | 熱點相對于 3D 場景掛載的模型節(jié)點的位置,數(shù)組長度為 3,對應 x,y,z 坐標 | |
parentName | 是 | 熱點所掛載的模型節(jié)點的網(wǎng)格或組的名稱 | |
events | 是 | {} | 用于配置熱點的交互。如果是{}則不會出現(xiàn)任何交互操作 |
events.click | 否 | events 可以設置一些交互操作名稱,例如 click,則交互操作在 click 事件觸發(fā)。 | |
events.click.type | 是 | 取值為 highlight 或者 jump,分別對應模型高度操作以及場景跳轉操作。 | |
events.click.color | 否 | [1,1,1] | 模型高亮的顏色,采用的是和著色器的顏色取值,必須是 0 到 1 之間的數(shù)字 |
events.click.duration | 否 | 1000 | 模型高亮是一種呼吸燈的忽明忽暗效果,這個是亮變暗的時間 |
events.click.times | 否 | Infinity | 呼吸燈高亮次數(shù) |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: