three.js - 将交互模型从 Sketchup 导出到 three.js

Question

我已经使用 Google Sketchup 完成了我的 3D 模型的设计，我的模型包含场景和动态移动，换句话说，我的模型响应用户的点击（点击模型然后模型移动或做某事）我的查询是，如果我上传我的模型变成了three.js，它仍然与用户交互还是将被视为一个实体（不响应点击）。长期以来，我一直在寻求有关此主题的帮助，如果有可能的方法，那该怎么做？

Answer 1

步骤 1. 将 Sketchup 模型加载到 Three.js

您可以从 SketchUp 导出，例如导出为 .obj，然后将模型文件加载到 Three.js。在这个 SO 线程中有一个例子。这不会传输您提到的任何动画或“点击逻辑”。我认为没有办法转移这种应用程序逻辑。

步骤 2. 检测点击事件

将对象导入 Three.js 场景后，您希望检测用户何时单击对象。您可以通过将光线投射到场景中来执行此“拾取”。Three.js 有一个Raycaster类可以做到这一点。这是一个如何使用 Raycaster 的示例。

步骤 3. 动画对象

一旦您在其中一个对象上获得了单击事件，就可以对其进行动画处理了。有两种方法可以为场景中的对象设置动画：首先，您可以在场景图形级别进行刚性动画：例如，如果您有一个盒子，您可以在场景中移动它。盒子移动，旋转，也许缩放，但它不会改变它的形状。

然后是非刚性动画，这是人类角色等大多数有机事物所做的。这种类型的动画不是在场景图级别完成的，而是通过变换单个顶点来完成的。这是一个如何使用顶点蒙皮执行此操作的示例。

---

场景图级别的动画可以说比蒙皮动画更简单。如果您刚刚开始，您可能应该专注于这种更简单的动画类型。