Using Skeleton without the skin in three.js

2
votes

I'm very new to three.js, so please forgive me if my question has already been answered some place else or is obvious.

What I'm trying to do is the following: I have data from a motion capture system. This data consists of frames where each frame has the Cartesian coordinates of multiple markers. I'd like to visualise this data using three.js in a web browser.

So far so good. My initial thought was to simply use geometric primitives for each marker and connect some markers to create a sort of 3D "stickman". However, I found out that three.js has a concept called Skeleton, which consists of a set of Bones. That seems precisely like what I want. However, I do not have any sort of "skin" that I would like to use (e.g. a SkinnedMesh).

My question therefore is two-fold: 1) Should I even use Skeleton for my intentions or is the primitive approach described earlier the way to go and 2) if I'm to use the Skeleton stuff, how do I present it in a scene without using any skin?

Any help here is greatly appreciated!

1
javascriptthree.js
can you outline the data format etc generated by your motion capture system ? - Scott Stensland
Sorry about the late response. Sure, the data is essentially a 2D array. Each "row" (that is the first index) corresponds to a time frame. Each column contains a scalar value that describes one coordinate of the marker. Each marker has 3 coordinates, so if for example 50 markers are sampled for 100 time steps, the array would have 100 rows and 50 * 3 = 150 columns. - mplappert

1 Answers

1
votes

To answer my own question: The easiest solution that I found was simply using spheres for the markers and connecting them with lines. This has some shortcomings (e.g. lines do not scale with the zoom level), but overall it works quite well.

If you are interested in doing the same, I've put together a simple demo, which is also available on Github.