如何爲自己的產品構建產品配置器®'Tesla Design Studio'？

Question

我的一個朋友有一個小企業，出售個性化的筆和筆，我爲他做技術相關的東西（電子商務，社交媒體）。

在我們的新網店，我們想要添加一個樣式爲Tesla Design Studio的產品配置。所以用戶可以選擇材質/附加組件，並在預覽中渲染。什麼是這樣做的好方法？我正在看看three.js，但並沒有真正到達任何地方。

Answer 1

真的很難渲染真正令人信服的（如現實外觀）3D-Graphics，特別是在瀏覽器中。這可能就是爲什麼你提到的特斯拉網站甚至沒有嘗試這一點。它只是疊加並將圖像替換爲對方。

例如，這是，如果你選擇黑色paintjob它加載圖像：

該圖像，然後簡單地放置在汽車的其他部分。

如果你只有可配置的產品（所以你事先知道所有參數的所有可能的選擇），它可能是一個更好的解決方案（在視覺質量方面）走這條路線，並簡單地使用預渲染的圖像。

但是，如果您確實需要使用3D（可能是因爲用戶上傳的圖像需要在產品上呈現），那麼您大概會這樣做。請注意，這並不容易（但很有趣），特別是如果您沒有3D編程經驗。

• 獲得對產品的良好的3D模型雙手
• 出口該模型由three.js所理解的格式，並測試它如何看模型周圍
• 的調整，它的材料和設置，直到你有一個很好的形狀單一模式（注意：這裏巨大的兔子洞）

現在你有一個單一的靜態模型看起來不錯，讓我們以個性化：

• 定義將是動態
• 分裂的3D模型到這些部件
• 改變顏色或材料是相對簡單的部件和屬性，像自定義圖像有點複雜
• 測試了大量的不同的設置，並確保它看起來還不錯

在這一點上，您將擁有一個正確的可配置模型，剩下要做的是構建一個用戶界面來控制所有這些設置。

根據你的經驗，願意學習新東西和你想要的所有質量水平的最重要的可能需要幾天到幾周的時間來構建，但我想鼓勵你至少嘗試前幾步，看看你是否喜歡這一點。編寫3D程序非常棒。