3D 客製化裝飾鐘平台

指導老師 :陳淵琮

組員 :莊文化廖御庭陳凱傑

背景與動機1

相關技術應用4

國內外相關研究3

研究目的2

建置架構與流程5

目錄

7 實作成果

6 程序與製作

8 工作分配表11 參考文獻

9 甘特圖

預期成果10

壹、背景與動機 電子商務的發展，各行各業紛紛建立網路交易平台。

三維技術的發展，慢慢崛起 3D 相關產業。

傳統掛鐘產業逐漸沒落。

整合、跨領域的創新是現代發展的趨勢。

1/28

透過網路，提供顧客一個能隨時買、隨地買、更有彈性付款方式、更貼心的取貨服務空間，了解電子商務的運用範圍和整個實際交易流程。

建立購物平台結合 X3D 技術，增加本專題購物平台的吸引力。

透過顧客客製化創意的發想，以新穎的方式來挽救逐漸沒落的產業。

鐘錶業跨其他領域的結合，發展商機。

貳、研究目的

2/28

参、國內外相關研究SWOT 分析

3D 展示商品客製化商品行動科技的崛起盛行的網路購物模式即將為主流的 HTML5電子商務的發展特性瀏覽器對 X3D 的支援

與裝潢結合與廣告刊版結合掛鐘材質的結合應用

技術的透明化購物網站的可信度

3/28

熱潮過後退流行須有網路才可取得服務製作過程資本不足

S( 優勢 )

W( 劣勢 )

O( 機會 )

T( 威脅 )

参、國內外相關研究相關網站特點分析

4/28

3D 網頁結合網拍系統 3D 客製化公仔平台

3D展示商品購物車系統 3D展示商品客製化商品

3D 展示商品客製化商品購物車系統

3D 展示商品客製化商品購物車系統

特點

参、國內外相關研究 3D 客製化紙娃娃平台

同性質專題分析

5/28網站 : http://120.114.140.10/~ytc/page/Product.php

紙娃娃平台 掛鐘平台網頁主要技術 Flash HTML.v5

購物系統 不完善且老舊 完整性

商品的實用性 僅能裝飾 較實用

後續發展性 紙 多元化(EX: 廠商合作 )

手機應用 無 手機版網頁

参、國內外相關研究2D 掛鐘應用

6/28

為了要突顯出特色， 結合裝潢和電子載具，如圖示 :

肆、相關技術應用

7/28

客製化裝飾鐘平台模型製作

3Ds MAX

商品配件Illustrator

Photoshop

網頁技術X3D

Html v5PHP

Java Script

伺服器架設UbuntuMYSQL

PostgreSQL

伍、建置架構與流程平台建置架構流程

8/28

伍、建置架構與流程使用者流程

9/28

伍、建置架構與流程商品作業流程

10/28

伍、建置架構與流程網頁架構

11/28

顧客中心顧客中心

訂單查詢訂單查詢

會員中心會員中心

購物服務購物服務

2D clock2D

clock

設計作品設計作品

製作團隊製作團隊

關於平台關於平台

首頁首頁

聯絡我們聯絡我們關於我們關於我們 FAQFAQ客製化裝飾鐘客製化裝飾鐘

外框樣式外框樣式

指針樣式指針樣式

背景樣式背景樣式

數字樣式數字樣式

創意主題款創意主題款

購物車

購物車

3D clock3D

clock

陸、程序與製作關鍵製網站練功 ( 版型一 )

12/28

陸、程序與製作關鍵製網站練功 ( 版型二 )

13/28

柒、實作成果後臺作業系統建置 (Ubuntu)

14/28

安裝 Apache2 + php5 + MySQL&Postgresql

及相關套件

sudo apt-get install apache2 sudo apt-get install mysql-serversudo apt-get install postgresqlsudo apt-get install pgadmin3sudo apt-get install php5 libapache2-mod-php5 php5-gd

柒、實作成果後臺作業系統建置 (Ubuntu)

15/28

柒、實作成果資料庫建置與連結

16/29

　　已研究出 MYSQL線上資料庫空間(phpmyadmin) 和 PHP 的連結方法。　　本專題主要用 ubuntu 伺服器架設放 Postgresql資料庫。　在這過程中，能比較出兩種資料庫的差異 !!

柒、實作成果LOGO 設計

17/28

柒、實作成果專題版型

18/28

柒、實作成果配件設計

19/28

柒、實作成果網站框架及 3D 模型製作

20/28

柒、實作成果2D 動態掛鐘製作

21/28

柒、實作成果進度報告

24/29

月份 製作內容 面臨困難 解決方式寒假至二月

專題題目構想X3D 相關文獻收集關鍵製為例網站練功

題目構想起頭難此方面文獻不多第一次接觸 HTML5

資料收集 , 提出想法與老師討論網路相關論文、圖書館收集資料上網看教學、書本教學

三月 專題題目決定掛鐘文獻收集文獻分析整合簡報製作關鍵製為例網站練功

困難就是指專題方向太大、能力有限資料內容不足

困難指新手上路 ~ 遇到的程式碼錯誤

不斷修改題目、直到指導老師同意網路資源分享、參考書的解說

網路資源分享、參考書的解說

四月 Ubuntu 作業系統建置專題模型製作專題網頁版型設計專題網頁 LOGO 設計專題配件製作

USB 開機問題、作業系統建置精緻模型製作如何製作適合此題目的版型如何製作適合此題目的 LOGO配件設計方向

上網收集資料、詢問老師書本教學多收集版型參考多收集 LOGO 設計參考上網多看掛鐘設計

五月 Ubuntu3D 模型2D 展示在行動載具上

亂碼和防火牆的設置換模型不能同時換顏色零件無法更換

找專業老師解答和詢問同儕詢問老師及嘗試各種方法試其他軟體，如 processing 或其他鑲入的方法

柒、實作成果困難與解決

23/28

網頁問題 目前情況 下拉式選單製作表格定位滑動特效無法連接清單使用 <ul> 將網頁按鈕內容寫在同一頁 JavaScript 版本相容問題配件更換的技術整合到網頁

已解決 ( 使用 ul +css 撰寫 )程式碼錯誤修正多研究其他網站的連接方式已解決已解決已解決

網頁版型設計 網頁配色 網頁版型設計

參考書本 (The Color for Desiger) 、網路自動配色多參考網站(dribbble 、 codepenrodesk 、 rodesk)

3D 模型製作、 x3d3Ds Max 精品製作3Ds Max 轉 X3D

參考書本 (3Ds Max 高級建模實例 )已解決

後台作業系統 Ubuntu 作業系統安裝資料庫建置及網站連結網站亂碼的產生防火牆的權限開啟

已解決 , 用 SONY 隨身碟灌已解決已解決已解決

面臨困難 提出解決方式

LOGO 設計出適合的 LOGO樣式 多看、多設計，持續改進

資料庫 第一次接觸 找書、上網查資料X3D 嘗試一些新技術運用 X3dom網站爬文

模型與模型更換 模型局部換貼圖

捌、工作分配表

24/28

姓名項目 莊文化 廖御庭 陳凱傑資料收集 ● ● ●文件撰寫 ● ● ●網頁美工 ● ●網頁製作 (PC版 )

● ●

網頁製作 ( 手機版 )

● ●

2D 動態掛鐘設計

● ●

3D 建模製作 ● ●X3D 技術置入 ● ●資料庫 ● ●商品配件設計 ● ● ●

玖、甘特圖

17/19

拾、預期成果

26/28

預期成果2D 和 3D技術的整合網站文字內容及編排

實體掛鐘手機版網頁建立購物車後台會員機制行銷策略

拾壹、參考文獻

27/28

從關鍵製的網站中，參考 3D 客製化紙娃娃平台 (http://

120.114.140.10/~ytc/page/Product.php) 。 從 mixeeme 的網站中，參考 3D 客製化公仔平台

(https://www.mixeeme.com/littlefolk/new) 。 從 Lativ 的網站中，參考會員機制的運作流程 (http://

www.lativ.com.tw/ ) 。 從 canalys 的網站中，可得知智慧型手機和 PC 電腦

2011年的市佔率 (http://www.canalys.com/newsroom/smart-phones-overtake-client-pcs-2011) 。

從 iCIBA漢語站的網站中，了解 X3D 的特性 (http://

hanyu.iciba.com/wiki/5112295.shtml ) 。

拾壹、參考文獻

28/28

從眾能數位行銷的網站中，了解 PC 版網站和行動上網瀏覽網站的差別 (http://mobile.ourpower.com.tw/ ) 。

Laudon, K. C., & Traver, C. G. (2002).E-commerce: Business, technology, society.from:Boston-Addison Wesley.

從文章中，獲得 2012五大主流瀏覽器 HTML5 和 CSS3的相容性 (http://www.360doc.com/content/

13/0225/09/11625720_267732925.shtml ) 。張修逞 ( 民 89) ， 3D 虛擬健身房之設計 ，碩士論文，國立中央大學 機械工程研究所 。

張慈韡 ( 民 94) ，情境涉入應用於 3D 網路商品展示之研究，碩士論文，國立臺灣藝術大學多媒體動畫藝術研究所。

謝謝各位的聆聽 !!謝謝各位的聆聽 !!