在對象上放置圖像（僞3D）

如果有人能指向我將插件放置在對象上的插件，我將不勝感激。具體來說，我需要上傳的圖像將出現在虛擬3d視圖中的瓶子上。我是一個jQuery新手，所以我似乎不可能自己編寫這樣一個困難的插件。的exampe它應該是什麼樣子：在對象上放置圖像（僞3D）

enter image description here

編輯：杯子例子來說明我的意思用僞3D。 enter image description here

來源

2013-07-10 Shelby

你可以畫自己，你想要什麼？我的意思是如果你想自己做，你可以用簡單的筆和紙來做到這一點嗎？你需要渲染一個完整的3D對象嗎？僞3D可以是很多東西。看看www.threejs.org – TecHunter

你是對的，對不起。我已更新帖子並添加了一張圖片。 – Shelby

那個瓶子是靜態還是必須旋轉？ – furas

你能做到在幾個方面：

服務器端，例如使用。 PHP image manipulation functions：您加載背景（瓶子圖像）並覆蓋客戶端上傳的圖片。這是我喜歡的方式，因爲您可以提供適當的圖像;使用3層的解決方法
客戶端：
- 最底部：客戶端的上傳的圖片
- 最上層：相同的PNG-24味瓶子具有空標籤
- 中間層的圖像瓶子圖片，在標籤的位置有一個透明的「洞」，這樣就可以通過它看到「標籤」（即客戶端上傳的圖片）。

免責聲明：接踵而來的是不是廣告，我說出來，只是供大家參考。

我爲a website做了類似的事情，允許客戶在包上「蝕刻」自己的照片。我已經使用PHP後端生成袋子縮略圖，並且Raphael.js（與the Raphael free transfrom插件一起）用於在袋子上交互式放置圖片。

來源

2013-07-10 14:05:52

Thx很多。我會看看Raphael.js。 – Shelby

一些結構第一：

<div id="container"> 
    <div id="bottle"></div> 
    <div id="tag"></div> 
</div>

然後設置樣式：

#container{ 
    position:relative 
} 
#bottle{ 
    background: [your bottle image here, no transparency needed] 
    z-index:0; 
} 
#tag{ 
    position:absolute; 
    top: [whatever px]; 
    left: [another px]; 
    background: [your tag image here with transparent bg] 
    z-index:100; 
}

來源

2013-07-11 05:25:33 TecHunter

在對象上放置圖像（僞3D）

回答

相關問題