2013年12月14日 星期六

滑鼠拖曳控制圖片的方法

好不容易找到方法了,
紀錄一下過程,
如果已經準備好圖片,就直接跳到step005,



step 001
先使用zbrush算出一段影片出來,記得先將畫布尺寸設定為所需要的影片(圖片)尺寸, 基本上不太需要太大的尺寸, 再來到movie\modifiers內將recording和playback設定為旋轉台所需要的張數, 以這邊的是每10度為一張也就是36


step 002
接著按下movie\turntable讓模型旋轉一圈, 再到overlay image處將opacity設定為0, 順便將title image 前兩個一樣設定為0


step 003
按下movie\export, 出現對話框, 請將格率設定為recording多一張, 按下確定後就可輸出影片囉

step 004
這邊我是用extraplayer將mov檔轉成圖片, 方法是將影片開啟後在影片處按下右鍵, 選取圖片檔案\圖檔其它\分解影片檔案BMP或JPG, 然後按下否選取存放位置即可將mov轉為圖片囉


step 005
請到 http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/
下載j360這個檔案, 還要誠心的感謝作者, 將檔案解壓縮後會有images資料夾+js資料夾+index網頁檔

step 006
開起images資料夾將裡頭的東西全刪除, 放入影片所轉成的圖片檔, 接著回上一層將index檔按下右鍵用wordpad開啟

step 007
將 <img src="images/01.jpg" />
這一排全部刪除, 然後改為
 <img src="images/圖片檔案名.jpg" />

看有多少張圖片就要放多少個,另外再將寬度和高度修改成圖片的尺寸, 完成後存檔, 重新用網頁瀏覽器開啟index這個檔案就可以看到效果了


step 008
接著就可以將這個網頁放到網路空間上囉, 然後再要放入的網頁中將以下語法填入, 將網頁位置改一下, 再將寬度和高度改成和圖片一樣就好囉,試試看,下圖可以旋轉喔。




沒有留言:

張貼留言