将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步.动画对象

在其中一个对象上获得click事件后,就可以为其设置动画了.在场景中有两种动画对象的方式:首先,您可以在场景图形级别执行刚性动画:如果您有一个框,则可以在场景中移动它.盒子移动,旋转,可能是鳞片,但它不会改变它的形状.

然后是非刚性动画,这是人类角色最有机的事情.这种类型的动画不是在场景图级别完成的,而是通过变换个别顶点来完成的.以下是使用顶点蒙皮进行此操作的示例.

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