如何为自己的产品构建产品配置器'特斯拉设计工作室'？

Question

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

在我们的新网店中，我们希望以Tesla Design Studio的风格包含产品配置器。这样用户就可以选择材质/附加物，并在预览中呈现。这样做的好方法是什么？我正在看看three.js，但并没有真正到达任何地方。

Answer 1

渲染真正令人信服的（如在逼真的外观中）3D图形真的很难，特别是在浏览器中。这可能就是为什么你提到的特斯拉网站甚至没有尝试过这个原因。它只是简单地叠加和替换图像。

例如，如果您选择黑色paintjob，这是它正在加载的图像：

然后将此图像简单地放在汽车的其他部分上。

如果您只有可配置的产品（因此您事先知道所有参数的所有可能选项），那么它可能是一个更好的解决方案（就视觉质量而言）走这条路线并简单地使用预渲染图像。

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

• 了解产品的优秀3D模型
• 以three.js理解的格式导出该模型并测试它的外观
• 调整模型，它的材料和设置，直到你有一个好的形状的单个模型（注意：在这里大量的兔子洞）

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

• 定义将是动态的部分和属性
• 将3D模型拆分为这些部分
• 更改颜色或材料相对简单，就像自定义图像更复杂一些
• 测试了很多不同的设置并确保它看起来还不错

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

根据您的经验，学习新东西的意愿以及您想要的大部分质量水平，这可能需要几天到几周才能建成，但我想鼓励您至少尝试第一次几步，看看你是否喜欢它。编写3D程序非常棒。