新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

創(chuàng)新互聯(lián)百度小程序教程：modelviewer VR 3D 模型-beta

modelviewer VR 3D 模型-beta
- 使用方法
  - 1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)
  - 2. 在使用到模型組件的頁(yè)面配置動(dòng)態(tài)庫(kù)
  - 3. 編寫(xiě) *.swan 文件
- 動(dòng)態(tài)庫(kù)配置文件詳細(xì)說(shuō)明
  - 動(dòng)態(tài)庫(kù)屬性列表
  - 總配置
  - 相機(jī)配置
  - 場(chǎng)景配置
  - 全景設(shè)置
  - 動(dòng)畫(huà)設(shè)置
  - 光照設(shè)置
  - 熱點(diǎn)配置

modelviewer VR 3D 模型-beta

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

使用方法

1. 在項(xiàng)目中引用動(dòng)態(tài)庫(kù)

使用動(dòng)態(tài)庫(kù)的方法參見(jiàn)小程序文檔使用動(dòng)態(tài)庫(kù)，在app.json中增添一項(xiàng)dynamicLib，與pages同級(jí)。

JSON

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

2. 在使用到模型組件的頁(yè)面配置動(dòng)態(tài)庫(kù)

在每個(gè)使用到模型組件的頁(yè)面，配置*.json文件如：

JSON

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

3. 編寫(xiě) *.swan 文件

SWAN

這是一種最基本的配置方式。style也可以在*.css中聲明，需要保證是有寬度和高度的。option在*.js中綁定到頁(yè)面的 data 中：

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

其中，option 是一個(gè)模型展示配置項(xiàng)，定義了模型應(yīng)該如何展示，示例如下：

 
 
   
  
  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  
  
   }  
  
   }  
  
   }  
  
   ]  
  
   }  
  
   ]  
  
  };

動(dòng)態(tài)庫(kù)配置文件詳細(xì)說(shuō)明

動(dòng)態(tài)庫(kù)屬性列表

上支持的屬性包括：

屬性名稱	類型	說(shuō)明
option	Object	配置項(xiàng)，參見(jiàn)上方參數(shù)說(shuō)明列表

總配置

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

相機(jī)配置

屬性名稱	必填	默認(rèn)值	說(shuō)明
fov	否	65	調(diào)整透視相機(jī) fov
position	否	{x: 0, y:0, z:0}	相機(jī)初始位置坐標(biāo)
near	否	1	調(diào)整相機(jī)近截面距離
far	否	10000	調(diào)整相機(jī)遠(yuǎn)截面距離

場(chǎng)景配置

場(chǎng)景是一個(gè)數(shù)組，每個(gè)數(shù)組元素都是獨(dú)立的場(chǎng)景

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

全景設(shè)置

屬性名稱	必填	默認(rèn)值	說(shuō)明
url	否	“”	如果設(shè)置則會(huì)創(chuàng)建球面全景圖
radius	否	800	設(shè)置全景圖球體的半徑
rotation	否	0	全景圖球體在 y 軸上的旋轉(zhuǎn)弧度
position	否	[0, 0, -0]	全景圖的位置偏移，數(shù)組長(zhǎng)度為 3 ，對(duì)應(yīng) x，y，z 坐標(biāo)

動(dòng)畫(huà)設(shè)置

動(dòng)畫(huà)配置為鍵值對(duì)形式，通常情況無(wú)需配置，只有對(duì)某些動(dòng)畫(huà)需要額外處理的時(shí)候才需要配置。其中 key 為某個(gè)動(dòng)畫(huà)的名稱，其 value 值說(shuō)明如下

屬性名稱	必填	默認(rèn)值	說(shuō)明
startAt	否	0
duration	否	Infinity

光照設(shè)置

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

錐形光

屬性名稱	必填	默認(rèn)值	說(shuō)明
type	是	SpotLight	type 必須為 SpotLight
params.color	否	0xffffff	顏色值，可以為數(shù)字，也可以為#開(kāi)頭的字符串，如`#FFFFFF`，也可以為顏色英文名稱，如`white`
params.intensity	否	1	光照強(qiáng)度
params.position	否	[1, 1, 1]	光源的位置，數(shù)組長(zhǎng)度為 3 ，對(duì)應(yīng) x，y，z 坐標(biāo)
distance	否	0	光的最遠(yuǎn)照射距離。0：無(wú)窮遠(yuǎn)
angle	否	1.57	設(shè)置錐角弧度大小
decay	否	1	衰減率。離光越遠(yuǎn)，光照強(qiáng)度越弱。1：不衰減。取值為 0 到 1 之間

平行光

屬性名稱	必填	默認(rèn)值	說(shuō)明
type	是	DirectionalLight	type 必須為 DirectionalLight
params.color	否	0xffffff	顏色值，可以為數(shù)字，也可以為 # 開(kāi)頭的字符串，如`#FFFFFF`，也可以為顏色英文名稱，如`white`
params.intensity	否	1	光照強(qiáng)度
params.position	否	[1, 1, 1]	光源的位置，數(shù)組長(zhǎng)度為 3 ，對(duì)應(yīng) x，y，z 坐標(biāo)

環(huán)境光

屬性名稱	必填	默認(rèn)值	說(shuō)明
type	是	DirectionalLight	type 必須為 AmbientLight
params.color	否	0xffffff	顏色值，可以為數(shù)字，也可以為#開(kāi)頭的字符串，如`#FFFFFF`，也可以為顏色英文名稱，如`white`
params.intensity	否	1	光照強(qiáng)度

熱點(diǎn)配置

熱點(diǎn)目前支持 2 種交互操作，一種是模型部位的高亮。一種是場(chǎng)景的切換跳轉(zhuǎn)。整個(gè)的熱點(diǎn)配置是個(gè)數(shù)組，數(shù)組的每個(gè)元素對(duì)應(yīng)一個(gè)熱點(diǎn)。熱點(diǎn)是 dom 元素而非 WebGL 繪制，因此熱點(diǎn)始終會(huì)比模型的層級(jí)更高。具體配置如下。

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

新聞名稱：創(chuàng)新互聯(lián)百度小程序教程：modelviewer VR 3D 模型-beta
文章來(lái)源：http://fisionsoft.com.cn/article/dpdejjp.html