汽車3D展示(WEB)

# FastWeb之汽車3D展示

# 1. 說明

js-cloudimage-360view是一個簡單且互動性強的庫，可用於虛擬展示產品的相關功能。其原理是通過圖片序列的排序，在界面中以幻燈片的方式展示，點選不同的視角呈現不同的圖片頁面。關於此範例使用的jQueryFrame示例的製作過程請參考360度瀏覽-公轉視角-商品固定。

通過本範例學習，可以掌握在示例中引入3D展示的相關功能。

# 2. 設計明細

開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel07，此控制元件是所有佈局展示控制元件的容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel01，此控制元件是標題欄佈局展示控制元件的容器。

TUgContainerPanle元件，控制元件名稱為UgContainerPanel02，此控制元件為標題左側的佈局控制元件。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel04，此控制元件為標題處的外層佈局控制元件的容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel05，此控制元件為標題欄位置上方的佈局控制元件容器。

1：TUgSVG元件，控制元件名稱為UgSVG01。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel06，此控制元件為標題欄位置下方的佈局控制元件容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel03，此控制元件為標題欄右側的佈局控制元件容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel08，此控制元件為3D圖形顯示區域的佈局控制元件容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel09，此控制元件為3D顯示左側的佈局控制元件容器。

2：TUgjQueryFrame元件，控制元件名稱為UgjQueryFrame01，此控制元件為3D顯示的控制元件。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel10，此控制元件為標題欄上方的佈局控制元件容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel11，此控制元件為描述欄的佈局控制元件容器。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel12，此控制元件為標描述欄第一行的佈局控制元件容器。

3：TUgLabel元件，控制元件名稱為UgLabel01。

4：TUgLabel元件，控制元件名稱為UgLabel02。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel13，此控制元件為標描述欄第二行的佈局控制元件容器。

5：TUgLabel元件，控制元件名稱為UgLabel03。

6：TUgLabel元件，控制元件名稱為UgLabel04。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel14，此控制元件為標描述欄第三行的佈局控制元件容器。

7：TUgLabel元件，控制元件名稱為UgLabel05。

8：TUgLabel元件，控制元件名稱為UgLabel06。

TUgContainerPanel元件，控制元件名稱為UgContainerPanel15，此控制元件為標描述欄第四行的佈局控制元件容器。

9：TUgLabel元件，控制元件名稱為UgLabel07。

10：TUgLabel元件，控制元件名稱為UgLabel08。

11：TUgLabel元件，控制元件名稱為UgLabel09。

12：TUgTimer元件，控制元件名稱為UgTimer01。

UgWebRunFrame屬性設定
- Height：設定頁面高度=593。
- Width：設定頁面寬度=1076。
- Align：設定對齊的模式，設定為uniAlignmentClient。
UgImage01屬性設定
- Align：設定對齊方式，設定為alClient。
- Picture：設定顯示的圖片，點選[√]打開圖片顯示器，設定顯示的圖片。
- Stretch：設定顯示的圖片是否拉伸，設定為True。
UgContainerPanel07屬性設定
- Align：設定對齊方式，設定為alClient。
- Layout：設定佈局的模式，設定為vbox。
UgContainerPanel01屬性設定
- Layout:設定容器中的控制元件佈局模式，設定為hbox。
- LayoutConfig：設定佈局的相關選項，其中Flex設定為91，Width設定為100%。
UgContainerPanel02屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為41。
UgContainerPanel04屬性設定
- Layout:設定容器中的控制元件佈局模式，設定為vbox。
- LayoutConfig：設定佈局的相關選項，其中Flex設定為25，Height設定為100%。
UgContainerPanel05屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為2。

1：UgSVG01屬性設定

HTML：設定SVG文字資訊。

<?xml version="1.0"encoding="UTF-8"standalone="no"?><!DOCTYPE svg PUBLIC"-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%"height="100%"viewBox="0 0 161 32"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xml:space="preserve"xmlns:serif="http://www.serif.com/"style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Layer1"transform="matrix(1,0,0,1,5.01591,1.38639)"><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M85.325,3.85C85.325,3.576 85.099,3.35 84.825,3.35L76.565,3.35C76.291,3.35 76.065,3.576 76.065,3.85L76.065,4.56C76.064,4.836 76.289,5.065 76.565,5.07L81.765,5.07C82.115,5.07 82.095,5.22 82.095,5.63L82.095,5.72C82.095,6.12 82.095,6.21 81.765,6.21L71.175,6.21C70.901,6.21 70.675,5.984 70.675,5.71L70.675,2.64C70.675,2.366 70.901,2.14 71.175,2.14L84.815,2.14C85.089,2.14 85.315,1.914 85.315,1.64L85.315,0.51C85.315,0.236 85.089,0.01 84.815,0.01L68.035,0.01C67.761,0.01 67.535,0.236 67.535,0.51L67.535,8.01C67.535,8.284 67.761,8.51 68.035,8.51L84.815,8.51C85.089,8.51 85.315,8.284 85.315,8.01L85.315,3.76"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M58.315,5.91C58.124,6.075 57.886,6.177 57.635,6.2L55.505,6.2C55.254,6.177 55.016,6.075 54.825,5.91L50.725,3.32C50.678,3.28 50.617,3.258 50.555,3.258C50.411,3.258 50.293,3.376 50.293,3.52C50.293,3.53 50.294,3.54 50.295,3.55L50.295,8.01C50.295,8.284 50.069,8.51 49.795,8.51L47.645,8.51C47.371,8.51 47.145,8.284 47.145,8.01L47.145,0.51C47.145,0.236 47.371,0.01 47.645,0.01L49.935,0.01C50.185,0.026 50.423,0.12 50.615,0.28L56.205,3.9C56.414,4.05 56.696,4.05 56.905,3.9L62.5,0.28C62.69,0.122 62.924,0.028 63.17,0.01L65.46,0.01C65.734,0.01 65.96,0.236 65.96,0.51L65.96,8.01C65.96,8.284 65.734,8.51 65.46,8.51L63.32,8.51C63.046,8.51 62.82,8.284 62.82,8.01L62.82,3.55C62.82,3.27 62.63,3.17 62.39,3.32L58.305,5.9L58.315,5.91Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M28.645,8.47L25.875,8.47C25.873,8.47 25.871,8.47 25.869,8.47C25.74,8.47 25.633,8.366 25.63,8.237C25.629,8.185 25.645,8.134 25.675,8.092L31.675,0.342C31.802,0.157 32.003,0.037 32.225,0.012L45.045,0.012C45.356,0.021 45.607,0.28 45.607,0.592C45.607,0.598 45.607,0.605 45.607,0.612L45.607,8.012C45.607,8.286 45.381,8.512 45.107,8.512L42.967,8.512C42.693,8.512 42.467,8.286 42.467,8.012L42.467,6.91C42.467,6.61 42.467,6.5 42.137,6.5L30.865,6.5C30.657,6.527 30.472,6.649 30.365,6.83L29.475,8.01C29.295,8.282 29.008,8.464 28.685,8.51L28.645,8.47ZM34.205,2.14C34.059,2.157 33.927,2.237 33.845,2.36L32.525,4.07C32.425,4.19 32.525,4.29 32.635,4.29L42.175,4.29C42.475,4.29 42.505,4.17 42.505,3.88L42.505,2.7C42.505,2.29 42.505,2.14 42.175,2.14L34.205,2.14Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M23.235,8.47C23.558,8.424 23.845,8.242 24.025,7.97L29.785,0.51C29.995,0.23 29.895,0.01 29.615,0.01L28.465,0.01C28.241,0.037 28.039,0.162 27.915,0.35L21.915,8.1C21.886,8.141 21.87,8.19 21.87,8.24C21.87,8.372 21.978,8.48 22.11,8.48C22.112,8.48 22.113,8.48 22.115,8.48L23.235,8.47Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M19.835,8.47C20.158,8.439 20.453,8.272 20.645,8.01L26.405,0.55C26.615,0.27 26.515,0.05 26.245,0.05L24.605,0.05C24.381,0.077 24.179,0.202 24.055,0.39L18.055,8.14C18.026,8.181 18.01,8.23 18.01,8.28C18.01,8.412 18.118,8.52 18.25,8.52C18.252,8.52 18.253,8.52 18.255,8.52L19.835,8.47Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M13.875,8.47C13.873,8.47 13.871,8.47 13.869,8.47C13.74,8.47 13.633,8.366 13.63,8.237C13.629,8.185 13.645,8.134 13.675,8.092L19.675,0.342C19.799,0.154 20.001,0.029 20.225,0.002L22.645,0.002C22.925,0.002 23.025,0.232 22.805,0.502L17.015,8.012C16.835,8.284 16.548,8.466 16.225,8.512L13.875,8.47Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M8.865,8.47C8.863,8.47 8.861,8.47 8.859,8.47C8.73,8.47 8.623,8.366 8.62,8.237C8.619,8.185 8.635,8.134 8.665,8.092L14.665,0.342C14.789,0.154 14.991,0.029 15.215,0.002L18.415,0.002C18.695,0.002 18.795,0.232 18.585,0.502L12.805,8.012C12.625,8.284 12.338,8.466 12.015,8.512L8.865,8.47Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M0.245,8.47C0.243,8.47 0.241,8.47 0.239,8.47C0.11,8.47 0.003,8.366 0,8.237C-0.001,8.184 0.014,8.133 0.045,8.09L6.045,0.34C6.171,0.15 6.374,0.026 6.6,0L13.6,0C13.88,0 13.98,0.23 13.76,0.5L8.005,8.01C7.826,8.283 7.538,8.465 7.215,8.51L0.245,8.47Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M25.645,13.4L26.365,13.4C26.601,13.383 26.839,13.383 27.075,13.4C27.436,13.449 27.764,13.64 27.985,13.93C28.495,14.654 28.495,15.626 27.985,16.35C27.743,16.66 27.378,16.849 26.985,16.87C26.742,16.884 26.498,16.884 26.255,16.87L25.645,16.87L25.645,13.4ZM26.195,16.47L26.485,16.47C26.651,16.483 26.819,16.483 26.985,16.47C27.239,16.437 27.463,16.289 27.595,16.07C27.749,15.803 27.825,15.498 27.815,15.19C27.826,14.879 27.743,14.572 27.575,14.31C27.436,14.101 27.214,13.963 26.965,13.93C26.765,13.915 26.565,13.915 26.365,13.93L26.215,13.93L26.195,16.47Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M29.105,13.4L29.865,13.4C30.088,13.386 30.312,13.386 30.535,13.4C30.801,13.426 31.047,13.551 31.225,13.75C31.374,13.94 31.455,14.175 31.455,14.417C31.455,14.858 31.185,15.257 30.775,15.42L31.645,16.94L31,16.94L30.19,15.51L29.65,15.51L29.65,16.94L29.1,16.94L29.105,13.4ZM29.645,15.01L29.895,15.01C30.111,15.019 30.326,14.995 30.535,14.94C30.649,14.902 30.745,14.824 30.805,14.72C30.86,14.623 30.888,14.512 30.885,14.4C30.904,14.194 30.792,13.998 30.605,13.91C30.485,13.859 30.356,13.832 30.225,13.83L29.645,13.83L29.645,15.01Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><rect x="32.505"y="13.4"width="0.55"height="3.54"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M33.765,13.4L34.355,13.4L35.275,16.32L36.195,13.4L36.775,13.4L35.545,16.96L34.975,16.96L33.765,13.4Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><rect x="37.495"y="13.4"width="0.55"height="3.54"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M39.255,13.4L39.845,13.4L41.405,16.11L41.405,13.4L41.925,13.4L41.925,16.95L41.355,16.95L39.775,14.25L39.775,16.95L39.255,16.95L39.255,13.4Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M44.365,15.15L45.545,15.15L45.545,16.62C45.183,16.877 44.749,17.014 44.305,17.01C43.889,17.028 43.485,16.868 43.195,16.57C43.034,16.403 42.915,16.201 42.845,15.98C42.762,15.718 42.722,15.445 42.725,15.17C42.691,14.655 42.864,14.147 43.205,13.76C43.663,13.309 44.362,13.2 44.935,13.49C45.293,13.694 45.512,14.078 45.505,14.49L45.015,14.49C44.988,14.107 44.652,13.814 44.269,13.84C44.01,13.826 43.76,13.938 43.599,14.14C43.383,14.446 43.278,14.816 43.299,15.19C43.277,15.568 43.386,15.943 43.609,16.25C43.782,16.455 44.042,16.566 44.309,16.55C44.582,16.549 44.85,16.469 45.079,16.32L45.079,15.6L44.359,15.6L44.365,15.15Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M48.285,13.4L49,13.4C49.336,13.384 49.673,13.418 50,13.5C50.213,13.567 50.392,13.714 50.5,13.91C50.596,14.088 50.644,14.288 50.64,14.49C50.655,14.773 50.55,15.049 50.35,15.25C50.146,15.432 49.883,15.535 49.61,15.54L48.83,15.54L48.83,16.92L48.28,16.92L48.285,13.4ZM48.835,15.09L49.065,15.09C49.28,15.099 49.494,15.082 49.705,15.04C49.829,15.006 49.934,14.923 49.995,14.81C50.05,14.712 50.077,14.602 50.075,14.49C50.101,14.265 49.98,14.047 49.775,13.95C49.546,13.878 49.305,13.847 49.065,13.86L48.835,13.86L48.835,15.09Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M51.965,14.87L53.385,14.87L53.385,15.34L51.965,15.34L51.965,16.47L53.565,16.47L53.565,16.94L51.415,16.94L51.415,13.4L53.515,13.4L53.515,13.87L51.965,13.87L51.965,14.87Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M54.515,13.4L55.275,13.4C55.498,13.386 55.722,13.386 55.945,13.4C56.211,13.426 56.457,13.551 56.635,13.75C56.784,13.94 56.865,14.175 56.865,14.417C56.865,14.858 56.595,15.257 56.185,15.42L57.055,16.94L56.405,16.94L55.645,15.52L55.1,15.52L55.1,16.95L54.55,16.95L54.515,13.4ZM55.065,15.04L55.315,15.04C55.531,15.049 55.746,15.025 55.955,14.97C56.069,14.932 56.165,14.854 56.225,14.75C56.28,14.653 56.308,14.542 56.305,14.43C56.324,14.224 56.212,14.028 56.025,13.94C55.905,13.889 55.776,13.862 55.645,13.86L55.075,13.86L55.065,15.04Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M58.515,14.87L59.935,14.87L59.935,15.34L58.515,15.34L58.515,16.94L57.965,16.94L57.965,13.4L60.065,13.4L60.065,13.87L58.515,13.87L58.515,14.87Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M62.185,13.33C62.583,13.323 62.966,13.487 63.235,13.78C63.867,14.596 63.867,15.744 63.235,16.56C62.681,17.139 61.75,17.159 61.171,16.606C61.155,16.591 61.14,16.576 61.125,16.56C60.787,16.167 60.615,15.657 60.645,15.14C60.647,14.875 60.691,14.612 60.775,14.36C60.879,14.02 61.103,13.728 61.405,13.54C61.64,13.397 61.91,13.324 62.185,13.33ZM62.185,13.8C61.915,13.788 61.657,13.917 61.505,14.14C61.31,14.436 61.212,14.786 61.225,15.14C61.217,15.494 61.314,15.842 61.505,16.14C61.663,16.354 61.914,16.48 62.18,16.48C62.36,16.48 62.535,16.422 62.68,16.315C62.747,16.266 62.806,16.207 62.855,16.14C63.048,15.843 63.146,15.494 63.135,15.14C63.148,14.786 63.05,14.436 62.855,14.14C62.701,13.925 62.449,13.801 62.185,13.81L62.185,13.8Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M64.645,13.4L65.405,13.4C65.628,13.386 65.852,13.386 66.075,13.4C66.341,13.426 66.587,13.551 66.765,13.75C66.914,13.94 66.995,14.175 66.995,14.417C66.995,14.858 66.725,15.257 66.315,15.42L67.185,16.94L66.535,16.94L65.725,15.51L65.175,15.51L65.175,16.94L64.645,16.94L64.645,13.4ZM65.195,15.04L65.445,15.04C65.661,15.049 65.876,15.025 66.085,14.97C66.199,14.932 66.295,14.854 66.355,14.75C66.41,14.653 66.438,14.542 66.435,14.43C66.454,14.224 66.342,14.028 66.155,13.94C66.035,13.889 65.906,13.862 65.775,13.86L65.205,13.86L65.195,15.04Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M68.105,13.4L68.895,13.4L69.775,16.4L70.655,13.4L71.435,13.4L71.435,16.95L70.935,16.95L70.935,14.01L70.055,16.95L69.5,16.95L68.65,14.01L68.65,16.95L68.15,16.95L68.105,13.4Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M73.435,13.39L73.965,13.39L75.175,16.95L74.645,16.95L74.385,16.12L73.1,16.12L72.83,16.95L72.27,16.95L73.435,13.39ZM74.205,15.64L73.705,14.05L73.205,15.64L74.205,15.64Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M75.975,13.4L76.565,13.4L78.125,16.11L78.125,13.4L78.645,13.4L78.645,16.95L78.075,16.95L76.495,14.25L76.495,16.95L75.975,16.95L75.975,13.4Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M82.275,14.47L81.785,14.47C81.764,14.09 81.436,13.793 81.055,13.81C80.787,13.803 80.533,13.936 80.385,14.16C80.196,14.458 80.101,14.807 80.115,15.16C80.102,15.514 80.2,15.864 80.395,16.16C80.545,16.374 80.794,16.498 81.055,16.49C81.508,16.49 81.761,16.207 81.815,15.64L82.315,15.64C82.307,15.913 82.235,16.18 82.105,16.42C81.899,16.773 81.514,16.985 81.105,16.97C80.71,16.98 80.329,16.824 80.055,16.54C79.391,15.691 79.417,14.481 80.115,13.66C80.386,13.409 80.746,13.276 81.115,13.29C81.338,13.288 81.559,13.343 81.755,13.45C82.097,13.673 82.295,14.062 82.275,14.47Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g><g transform="matrix(1.58705,0,0,1.58705,7.53074,1.11468)"><path d="M83.725,14.87L85.145,14.87L85.145,15.34L83.725,15.34L83.725,16.47L85.325,16.47L85.325,16.94L83.175,16.94L83.175,13.4L85.275,13.4L85.275,13.87L83.725,13.87L83.725,14.87Z"style="fill:rgb(255,255,255);fill-rule:nonzero;"/></g></g></svg>

LayoutConfig：設定佈局的相關選項，其中Flex設定為5。

UgContainerPanel06屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為2。
UgContainerPanel03屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為41。
UgContainerPanel08屬性設定
- Layout:設定容器中的控制元件佈局模式，設定為hbox。
- LayoutConfig：設定佈局的相關選項，其中Flex設定為296，Width設定為100%。
UgContainerPanel09屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為100。
2：UgjQueryFrame01屬性設定

雙擊控制元件，打開選擇器，選擇360度瀏覽-公轉視角-商品固定。
- LayoutConfig：設定佈局的相關選項，其中Flex設定為876，Height設定為100%。
UgContainerPanel10屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為100。
UgContainerPanel11屬性設定
- Layout:設定容器中的控制元件佈局模式，設定為hbox。
- LayoutConfig：設定佈局的相關選項，其中Flex設定為207，Width設定為100%。
UgContainerPanel12屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為256，Width設定為100%。
3：UgLabel01屬性設定
- Caption：設定顯示的文字內容，設定為迅猛輕靈，逐風而行。
- Font：設定字型，點選[√]打開字型界面。設定字型。
4：UgLabel02屬性設定
- AutoSize：設定是否自適應文字顯示。設定為False。
- Caption：設定顯示的文字內容，設定為AMG 4.0升V8雙渦輪增壓發動機，澎湃動力讓速度成為信仰；而立體鋁架結構，則賦予車輛輕盈卻剛性極強，確保卓絕的動態效能。每一程快意馳騁，皆由心而動。。
- Font：設定顯示的字型，點選[√]打開字型界面，設定字型。
- Width：設定控制元件的寬度，設定為203。
UgContainerPanel13屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為264，Width設定為100%。
5：UgLabel03屬性設定
- Caption：設定顯示的文字內容，設定為矚目隨行，動感隨心。
- Font：設定字型，點選[√]打開字型界面。設定字型。
6：UgLabel04屬性設定
- AutoSize：設定是否自適應文字顯示。設定為False。
- Caption：設定顯示的文字內容，設定為延續家族式設計語言，AMG專屬垂瀑式格柵搭配雙邊排氣佈局，輕鬆衝破空氣阻力，一路隨心而馭。更有固定式尾翼迅猛加持，時刻釋放令人心潮澎湃的動感魅力。御風競速，全場矚目。。
- Font：設定顯示的字型，點選[√]打開字型界面，設定字型。
- Width：設定控制元件的寬度，設定為231。
UgContainerPanel14屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為269，Width設定為100%。
7：UgLabel05屬性設定
- Caption：設定顯示的文字內容，設定為矚目隨行，動感隨性。
- Font：設定字型，點選[√]打開字型界面。設定字型。
8：UgLabel06屬性設定
- AutoSize：設定是否自適應文字顯示。設定為False。
- Caption：設定顯示的文字內容，設定為材質，顏色，風格……共同構築了一個具有純正運動格調的空間，令人流連。從Nappa皮飾 / DINAMICA微纖維AMG高效能方向盤到帶碳纖維效果中控臺飾板、紅色亮點設計的AMG儀表盤，再到儀表板的雕刻線條，每一個內部元素，均令人振奮不已。。
- Font：設定顯示的字型，點選[√]打開字型界面，設定字型。
- Width：設定控制元件的寬度，設定為247。
UgContainerPanel15屬性設定
- LayoutConfig：設定佈局的相關選項，其中Flex設定為285，Width設定為100%。
9：UgLabel07屬性設定
- Caption：設定顯示的文字內容，設定為限時購車新方案。
- Font：設定字型，點選[√]打開字型界面。設定字型。
10：UgLabel08屬性設定
- AutoSize：設定是否自適應文字顯示。設定為False。
- Caption：設定顯示的文字內容，設定為可享最大保險折扣限額人民幣5,000元/臺AMG售後增值禮包「款待常享」12-48期金融貸款方案，年利率低至1.99%。
- Font：設定顯示的字型，點選[√]打開字型界面，設定字型。
- Width：設定控制元件的寬度，設定為247。
10：UgLabel08屬性設定
- AutoSize：設定是否自適應文字顯示。設定為False。
- Caption：設定顯示的文字內容，設定為瞭解詳情請點選。
- Font：設定顯示的字型，點選[√]打開字型界面，設定字型。
11：UgTimer01屬性設定
- Interval：設定顯示的時間間隔，設定為100。

# 3. 程式設計

點選程式設計界面右下角的按鈕，切換至單元選擇界面，勾選需要使用的單元。該程式無需引用單元。

# 3.1. 程式初始設定

該程式初始化顯示程式。

//JScript
//汽車動態展示的參數相關定義

  //目錄地址
  var ImageFolder = "library/js/js-cloudimage-360-view/demo/iris/";
  //檔案的名稱，包含編號規則字元{index}
  var FileName  = "iris-{index}.jpeg";
  //展示的圖片檔案的數量
  var data_amount = "36";
  //圖片檔案的可放大倍率
  var data_magnifier = "3";
  //是否在底部顯示全景示意的圓環
  var data_bottom_circle = "true";
  //底部圓環的偏移量
  var data_bottom_circle_offset = "-50";
  //是否啟用鍵盤操作全景圖的旋轉
  var data_key = "true";
  //是否開啟自動旋轉
  var data_autoplay = "true";
  //是否為反向(順時針)旋轉
  var data_spin_reverse = "true";

  UgJQueryFrame01.Init("6E15138C-B71D-491C-9367-8EA65D0B2DAC");
  Self.OnAfterRunScript = &UgWebRunFrameOnAfterRunScript;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//PasScript
//汽車動態展示的參數相關定義
var
  //目錄地址
  ImageFolder: string = 'library/js/js-cloudimage-360-view/demo/iris/';
  //檔案的名稱，包含編號規則字元{index}
  FileName: string = 'iris-{index}.jpeg';
  //展示的圖片檔案的數量
  data_amount: string = '36';
  //圖片檔案的可放大倍率
  data_magnifier: string = '3';
  //是否在底部顯示全景示意的圓環
  data_bottom_circle: string = 'true';
  //底部圓環的偏移量
  data_bottom_circle_offset: string = '-50';
  //是否啟用鍵盤操作全景圖的旋轉
  data_key: string = 'true';
  //是否開啟自動旋轉
  data_autoplay: string = 'true';
  //是否為反向(順時針)旋轉
  data_spin_reverse: string = 'true';
  
Begin
  UgJQueryFrame01.Init('6E15138C-B71D-491C-9367-8EA65D0B2DAC');
End.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Make sure to add code blocks to your code group

# 3.2. 事件設定

11：UgTimer01-OnTimer事件

延遲觸發。

//JScript
function UgTimer01OnTimer(sender)
{
  UgJQueryFrame01.JSONTOData("{\"param_folder\":\""+ ImageFolder + "\"," + 
  "\"param_filename\": \""+ FileName +"\"," + 
  "\"param_amount\": \"" + data_amount +"\"," + 
  "\"param_magnifier\":\"" + data_bottom_circle + "\"," +
  "\"param_bottom_circle\":\"" +data_bottom_circle + "\"," + 
  "\"param_bottom_circle_offset\":\"" + data_bottom_circle_offset + "\"," +
  "\"param_key\": \"" + data_key + "\"," +
  "\"param_autoplay\":\"" + data_autoplay + "\"," +
  "\"param_spin_reverse\":\"" + data_spin_reverse + "\"}");
  UgTimer01.Enabled = False;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
  UgJQueryFrame01.JSONTOData('{"param_folder":"'+ ImageFolder + '",' + 
  '"param_filename": "'+ FileName +'",' + 
  '"param_amount": "' + data_amount +'",' + 
  '"param_magnifier":"' + data_bottom_circle + '",' +
  '"param_bottom_circle":"' +data_bottom_circle + '",' + 
  '"param_bottom_circle_offset":"' + data_bottom_circle_offset + '",' +
  '"param_key": "' + data_key + '",' +
  '"param_autoplay":"' + data_autoplay + '",' +
  '"param_spin_reverse":"' + data_spin_reverse + '"}');
  UgTimer01.Enabled := False;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Make sure to add code blocks to your code group

# 4. 運行結果

使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。

圖示會自動旋轉，點選圖示可停止，在界面中顯示。

← 傢俱3D展示(WEB) 別墅3D展示(WEB)→