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

Question

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

Answer 1

第 1 步。将 Sketchup 模型加载到 Three.js 中

您可以从sketchup 中导出，例如.obj，并将模型文件加载到Three.js 中。 this SO thread 中有一个示例.这不会传输您提到的任何动画或“点击逻辑”。我不认为有一种方法可以传输这种应用程序逻辑。

第 2 步。检测点击事件

将对象导入 Three.js 场景后，您想要检测当用户点击一个对象时。您可以通过将光线转换到场景中来执行此“拾取”。Three.js 有一个 Raycaster做它的类。 Here is an example了解如何使用 Raycaster。

第 3 步。动画对象

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

然后是非刚性动画，这是大多数有机物，例如人类字符做。这种类型的动画不是在场景图级别完成的，而是通过变换单个顶点。 Here is an example了解如何使用顶点蒙皮执行此操作。

---

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