1 of 61

資料可視化

HW07 - 移動紀錄可視化

林立森

國立臺北科技大學資訊工程系

2 of 61

目錄

P.2

01

章節 01

3 of 61

Demo影片

P.3

4 of 61

目錄

  • 資料來源
  • 使用方法
  • 評分標準
  • 作業說明
  • 繳交資訊

P.4

5 of 61

資料來源

P.5

02

章節 02

6 of 61

資料來源

將zip檔解壓縮後我們要使用的資料為

userLocationData.json

P.6

7 of 61

Unity開發室內定位APP

P.7

8 of 61

Real-Time Position on Web

P.8

9 of 61

P.9

10 of 61

使用方法

P.10

03

章節 03

11 of 61

Import Unitypackage

P.11

12 of 61

開啟檔案

P.12

13 of 61

開新檔案

P.13

14 of 61

Import unitypackage

P.14

15 of 61

Import unitypackage

P.15

16 of 61

基本場景

P.16

17 of 61

Camera控制CameraManagement.cs

P.17

18 of 61

Camera控制

P.18

19 of 61

JsonLoader

P.19

20 of 61

ReadJson.cs

P.20

21 of 61

Visitors

P.21

22 of 61

VisitorMove.cs

P.22

60行可以調整

播放速度

23 of 61

下載UniVRM Package

​

P.23

24 of 61

Unity匯入UniVRM套件

P.24

25 of 61

Unity匯入UniVRM套件

P.25

匯入成功後上方工具列會多出UniGLTF 及 VRM

26 of 61

直接將.vrm拉到Assets裡面

Unity匯入Vrm角色

27 of 61

角色學號顯示設定

先將匯入好的模型拉

到Hierarchy視窗

28 of 61

角色學號顯示設定

Hierarchy視窗右鍵

UI->Text

->TextMeshPro

記得Import TMP

29 of 61

角色學號顯示設定

將文字設定到角色的上方

30 of 61

角色學號顯示設定

在設定好學號後的

角色更改名子後拉

回Assets中，並且

刪掉Hierachy中的

角色

31 of 61

角色學號顯示設定

點擊Visitors，將自己製作的角色拉到Vistor Prefab

32 of 61

角色動作設定

33 of 61

資料放置位置

在Assets底下新增Data資料夾，並且把userLocationData.json

放進去，執行程式會依照裡面的檔案數量去生成人物，並且在3D場景中回放移動路徑。

34 of 61

評分標準

P.34

01

章節 01

35 of 61

評分標準

  • Simple baseline (3pt)
    • 將Unitypackage放入Unity中(2pt)
    • 透過Vroid製作人物用來代表場景中的角色(1pt)
  • Medium baseline (5pt)
    • 在Unity場景(師大美術館)上顯示出自己的移動路徑 (1pt)
    • 將組員(8人)的移動路徑在Unity場景(師大美術館)上顯示(2pt)
    • 每個人物模型上顯示出組員的學號(2pt)
  • Strong baseline (2pt)
    • 熱力圖、泡泡圖、有向圖(2pt)

P.35

36 of 61

作業說明

P.36

02

章節 02

37 of 61

Simple baseline (2pt)

    • 將Unitypackage放入Unity中(2pt)

P.37

38 of 61

Simple baseline (1pt)

    • 透過Vroid製作人物用來代表場景中的角色(1pt)

P.38

39 of 61

Medium baseline (5pt)

  • 在Unity場景(師大美術館)上顯示出自己的移動路徑 (1pt)
  • 將組員(8人)的移動路徑在Unity場景(師大美術館)上顯示(2pt)
  • 每個人物模型上顯示出組員的學號(2pt)

P.39

40 of 61

Medium baseline (5pt)

如果沒有要做每個人物模型上顯示出組員的學號，請將以下圖片匡起來的部分程式碼註解

​

P.40

41 of 61

Strong baseline (4pt)-熱力圖範例

  • 熱力圖、圈圈圖、有向圖(2pt)

P.41

42 of 61

Strong baseline (4pt)-有向圖範例

  • 熱力圖、圈圈圖、有向圖(2pt)

P.42

43 of 61

Strong baseline (4pt)-圈圈圖範例

  • 熱力圖、圈圈圖、有向圖(2pt)

P.43

44 of 61

Strong baseline (4pt)-熱力圖

  • 熱力圖、圈圈圖、有向圖(2pt)

P.44

45 of 61

Strong baseline (4pt)-圈圈圖

  • 熱力圖、圈圈圖、有向圖(2pt)

P.45

46 of 61

Strong baseline (4pt)-有向圖

  • 熱力圖、圈圈圖、有向圖(2pt)

P.46

47 of 61

繳交資訊

P.47

03

章節 03

48 of 61

UnityPackage Export

點擊 Assets -> Export Package

P.48

49 of 61

Github

請把 demo影片 + unitypackage 這兩個檔案放到src資料夾

P.49

50 of 61

https://linlisen.github.io/vis2023f/hw07/index.html

P.50

51 of 61

src按鈕、評分表

P.51

<!-- ------------------------------------------------>

<div class="row hw12">

<div class="col-md-12 twenty">

打開src資料夾

<input type="button" name="back" onclick="location.href='https://github.com/你的帳號/ct2023s/tree/main/hw04/src'" value="按我٩(｡・ω・｡)و">

</div>

</div>

<div class="row hw12">

<div class="col-md-12 twenty">

<table>

<tr>

<th>總分</th>

<th>完成後打勾</th>

<th>配分</th>

<th>分項描述</th>

</tr>

<tr>

<td rowspan="7" id="myTotal"></td>

<td><input type="checkbox" class="flipswitch" id="myCheckbox1" checked></td>

<td id='m1'>2</td>

<td>Simple baseline - 將Unitypackage放入Unity中</td>

</tr>

<tr>

<td><input type="checkbox" class="flipswitch" id="myCheckbox2" checked></td>

<td id='m2'>1</td>

<td>Simple baseline - 透過Vroid製作人物用來代表場景中的角色</td>

</tr>

<tr>

<td><input type="checkbox" class="flipswitch" id="myCheckbox3" checked></td>

<td id='m3'>1</td>

<td>Medium baseline - 在Unity場景(師大美術館)上顯示出自己的移動路徑 </td>

</tr>

<tr>

<td><input type="checkbox" class="flipswitch" id="myCheckbox4" checked></td>

<td id='m4'>2</td>

<td>Medium baseline - 將組員(8人)的移動路徑在Unity場景(師大美術館)上顯示 </td>

</tr>

<tr>

<td><input type="checkbox" class="flipswitch" id="myCheckbox5" checked></td>

<td id='m5'>2</td>

<td>Medium baseline - 每個人物模型上顯示出組員的學號 </td>

</tr>

<tr>

<td><input type="checkbox" class="flipswitch" id="myCheckbox6" checked></td>

<td id='m6'>2</td>

<td>Strong baseline - 熱力圖、泡泡圖、有向圖 </td>

</tr>

</table>

</div>

</div>

​

52 of 61

Regulations

  • You should finish your homework on your own. 
  • Do not share your codes with any living creatures. 
  • Your HW will get 0 pt if you violate any of the above rules. 
  • Professor & TAs preserve the rights to change the rules & grades.

P.52

53 of 61

助教聯絡資訊

P.53

04

章節 04

54 of 61

助教聯絡資訊

  • TA Email
    • 林立森 t111598040@ntut.org.tw
    • Email 標題請按照此格式(X為作業編號) : [vis2023f-hwX-學號]

P.54

55 of 61

VRoid

P.55

01

章節 01

56 of 61

安裝

現在只能在 Steam 及 AppStore 上安裝

https://store.steampowered.com/app/1486350/

P.56

57 of 61

安裝

P.57

58 of 61

安裝

搜尋欄輸入 VRoid

P.58

59 of 61

安裝

P.59

60 of 61

建立新模型

使用預設模板

P.60

61 of 61

參數

模型部位

部位細項

樣式

P.61