愛招飛幫助手冊 愛招飛幫助手冊
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastERP-1
  • Smart
  • PinToo
  • FastWeb
  • FastERP-2 企業管理系統 (opens new window)
  • 印染業ERP (opens new window)
  • 工廠終端機 (opens new window)
  • TARS
  • MARS
  • TaskRunner
  • Flying
  • FastDesk
  • HiDesk
  • HiNAT
  • FastBPM
  • 設備故障診斷 (opens new window)
  • 設備最佳運轉效益 (opens new window)
  • 企業智能助手SmeGPT (opens new window)
  • 燈號管理 (opens new window)
  • 戰情室 (opens new window)
  • 能源管理 (opens new window)
  • 人車定位 (opens new window)
  • 戰情指揮系統 (opens new window)
  • FastERP-1
  • FastWeb
  • Smart
  • PinToo
  • Flying
  • TARS
  • 通用功能

    • Report
    • Script
    • Echarts
    • Chart
    • DB Install
  • FastWeb幫助主頁
  • 學習手冊

  • 開發手冊

    • 通訊協議

    • 互動輸出

    • 媒體存取

      • 文件媒體

        • 網路文件瀏覽(WEB)
        • 網路視訊播放(WEB)
        • 網路視訊播放(APP)
        • 傢俱3D展示(WEB)
          • 1. 說明
          • 2. 設計明細
          • 3. 程式設計
          • 4. 運行結果
        • 汽車3D展示(WEB)
        • 別墅3D展示(WEB)
        • 菜譜展示(WEB)
        • 環繞風景展示(WEB)
        • 全景視訊(WEB)
        • 全景汽車內飾(WEB)
        • 全景漫遊(WEB)
        • 傢俱3D展示-視覺化控制元件(WEB)
        • 汽車3D展示-視覺化控制元件(WEB)
        • 別墅3D展示-視覺化控制元件(WEB)
        • 菜譜展示-視覺化控制元件(WEB)
        • 環繞風景展示-視覺化控制元件(WEB)
        • 全景視訊-視覺化控制元件(WEB)
        • 全景汽車內飾-視覺化控制元件(WEB)
        • CKPlayer視訊播放(WEB)
        • 儀表展示(WEB)
        • 表格數據匯入(WEB)
      • 遠端監控

    • 人工智慧

    • 實體運用

目录

傢俱3D展示(WEB)

# FastWeb之傢俱3D展示

# 1. 說明

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

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

# 2. 設計明細

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

  • 以下控制元件都在TUgContainerPanel元件,控制元件名稱為UgContainerPanel01的容器中。

  1:TUgContainerPanel元件,控制元件名稱為UgContainerPanel02。

  2:TUgLabel元件,控制元件名稱為UgLabel01。

  3:TUgLabel元件,控制元件名稱為UgLabel02。

  4:TUgImage元件,控制元件名稱為UgImage02。

  • 以下控制元件都在TUgContainerPanel元件,控制元件名稱為UgContainerPanel03的容器中。

  5:TUgContainerPanel元件,控制元件名稱為UgContainerPanel05。

  6:TUgjQueryFrame元件,控制元件名稱為UgjQueryFrame01。

  7:TUgContainerPanel元件,控制元件名稱為UgContainerPanel06。

  8:TUgContainerPanel元件,控制元件名稱為UgContainerPanel04。

  9:TUgImage元件,控制元件名稱為UgImage01。

  • UgWebRunFrame屬性設定

    • Height:設定頁面高度=442。
    • Width:設定頁面寬度=960。
    • AlignmentControl:設定控制元件的對齊模式,設定為uniAlignmentClient。
  • UgContainerPanel01屬性設定

      此控制元件為佈局使用的控制元件。作為佈局中使用的容器。

    • Align:設定對齊的方式,設定為alClient。
    • Layout:設定佈局的模式,設定為hbox。
  • 1:UgContainerPanel02屬性設定

      此控制元件為佈局使用的控制元件,作為佈局中使用的容器。

    • LayoutConfig:設定容器中的控制元件的佈局參數,其中的Flex設定為3,Height設定為100%。
  • 2:UgLabel01屬性設定

    • Caption:設定顯示的字幕內容,設定為現代風格 弧度系列。
    • Font:設定字型相關的資訊,點選[√]打開字型設定對話方塊,設定字型資訊。
  • 3:UgLabel02屬性設定

    • Caption:設定顯示的字幕內容,設定為在現代潮流的家居生活中,沉穩內斂的奢華感是年輕群體的追求。季唯系列將意式家居的高度審美引入產品設計中,下分為真皮系列和功能系列,用材質本身的質感呼應高階品位,更是從品質控制、舒適設計、外觀美學上全面升級。。
  • 4:UgImage02屬性設定

    • Picture:設定顯示的圖片內容,點選[√],打開圖片對話方塊,選擇對應的圖片進行設定。
  • UgContainerPanel03屬性設定

    • Layout:設定佈局相關的資訊,設定為vbox。
    • LayoutConfig:設定佈局的參數資訊,設定Flex為2,Height為100%。
  • 5:UgContainerPanel05屬性設定

    • LayoutConfig:設定佈局的參數資訊,設定Flex為1。
  • 6:UgjQueryFrame01屬性設定

      雙擊控制元件,打開管理器,選擇其中的360度瀏覽-固定視角-商品自轉選項匯入。

    • Layout:設定佈局資訊,設定為fit。
    • LayoutConfig:設定佈局的參數資訊,Flex設定為5,Width設定為100%。
  • 7:UgContainerPanel06屬性設定

    • LayoutConfig:設定佈局的參數資訊,設定Flex為1。
  • 8:UgContainerPanel04屬性設定

    • LayoutConfig:設定佈局的參數資訊,Flex設定為2,Height設定為100%。
  • 9:UgImage01屬性設定

    • Align:設定對齊方式,設定為alClient。
    • Stretch:設定是否實現拉伸的效果,設定為True。
    • Picture:設定圖片,點選[√],打開圖片對話方塊,選擇對應的圖片進行設定。

# 3. 程式設計

# 4. 運行結果

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

  點選3D展示的圖片,使用滑鼠拖動以顯示旋轉樣式的圖片。

網路視訊播放(APP)
汽車3D展示(WEB)

← 網路視訊播放(APP) 汽車3D展示(WEB)→

Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式