Exporting interactive model from Sketchup to three.js

Question

I've finished designing my 3D model using Google Sketchup, my model contains scenes and dynamic moves, in other words my model responds to clicks made by the user (click on model then model moves or does something) my query is that if I upload my model into three.js, does it still interacting with the user or will viewed just as one entity (doesn't respond to clicks). Please I am seeking help regarding this subject since a long time, and if there is a possible way to do it then how?

Answer 1

Step 1. Loading Sketchup Models into Three.js

You can export from sketchup, for example as .obj, and load the model file into Three.js. There is an example in this SO thread. This will not transfer any animation or "on click logic" you mentioned though. I don't think there is a way to transfer this kind of application logic.

Step 2. Detect Click Events

Once you have imported your objects into a Three.js scene, you want to detect when the user clicks on an object. You can do this "picking" by casting rays into the scene. Three.js has a Raycaster class that does it. Here is an example for how to use the Raycaster.

Step 3. Animating Objects

Once you get the click event on one of your objects, it is time to animate it. There are two ways of animating objects in a scene: First, you can do rigid animation at the scene graph level: If you have for example a box, you can move it through your scene. The box moves, rotates, maybe scales, but it does not change its shape.

Then there is non-rigid animation which is what most organic things like human characters do. This type of animation is not done at the scene graph level, but by transforming invividual vertices. Here is an example for how to do this using vertex skinning.

---

Animation at the scene graph level is arguably simpler than skinned animation. You should probably focus on this simpler type of animation if you just get started.