新聞中心

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

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

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

modelviewer VR 3D 模型-beta

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

使用方法

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

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

JSON

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

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

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

JSON

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

3. 編寫 *.swan 文件

SWAN

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

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

其中，option 是一個模型展示配置項(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  
  
   }  
  
   }  
  
   }  
  
   ]  
  
   }  
  
   ]  
  
  };

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

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

上支持的屬性包括：

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

總配置

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

相機(jī)配置

屬性名稱	必填	默認(rèn)值	說明
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)截面距離

場景配置

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

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

全景設(shè)置

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

動畫設(shè)置

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

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

光照設(shè)置

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

錐形光

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

平行光

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

環(huán)境光

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

熱點(diǎn)配置

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

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

網(wǎng)頁標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：modelviewer VR 3D 模型-beta
網(wǎng)頁網(wǎng)址：http://www.5511xx.com/article/dpdejjp.html

日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区