如何为自己的产品构建产品配置器®'Tesla Design Studio'？

Question

我的一个朋友有一个小企业，出售个性化的笔和笔，我为他做技术相关的东西（电子商务，社交媒体）。

在我们的新网店，我们想要添加一个样式为Tesla Design Studio的产品配置。所以用户可以选择材质/附加组件，并在预览中渲染。什么是这样做的好方法？我正在看看three.js，但并没有真正到达任何地方。

Answer 1

真的很难渲染真正令人信服的（如现实外观）3D-Graphics，特别是在浏览器中。这可能就是为什么你提到的特斯拉网站甚至没有尝试这一点。它只是叠加并将图像替换为对方。

例如，这是，如果你选择黑色paintjob它加载图像：

该图像，然后简单地放置在汽车的其他部分。

如果你只有可配置的产品（所以你事先知道所有参数的所有可能的选择），它可能是一个更好的解决方案（在视觉质量方面）走这条路线，并简单地使用预渲染的图像。

但是，如果您确实需要使用3D（可能是因为用户上传的图像需要在产品上呈现），那么您大概会这样做。请注意，这并不容易（但很有趣），特别是如果您没有3D编程经验。

• 获得对产品的良好的3D模型双手
• 出口该模型由three.js所理解的格式，并测试它如何看模型周围
• 的调整，它的材料和设置，直到你有一个很好的形状单一模式（注意：这里巨大的兔子洞）

现在你有一个单一的静态模型看起来不错，让我们以个性化：

• 定义将是动态
• 分裂的3D模型到这些部件
• 改变颜色或材料是相对简单的部件和属性，像自定义图像有点复杂
• 测试了大量的不同的设置，并确保它看起来还不错

在这一点上，您将拥有一个正确的可配置模型，剩下要做的是构建一个用户界面来控制所有这些设置。

根据你的经验，愿意学习新东西和你想要的所有质量水平的最重要的可能需要几天到几周的时间来构建，但我想鼓励你至少尝试前几步，看看你是否喜欢这一点。编写3D程序非常棒。