Create a Sinewav3 Plugin

Are you ready? Photo by Hitesh Choudhary on Unsplash

If you’ve checked out the Plugin Overview for developers, you’re probably wondering how to get starting writing your own Sinewav3 plugins.

Since most of us learn from examples, and there are a lot of Three.js examples on the web, this video will show you how to convert one of those examples to a Sinewav3 plugin.

You’ll learn what bits you don’t need to worry about and what extra concerns there are when you’re not writing a single page demo that doesn’t have to clean up after itself.

About the Code

The video specifically examines the Three.js example: geometry/heirarchy2, wherein a box is placed at the center of the scene and then a tentacle of sorts is appended to each of its faces by way of parenting one box to the next for 100 iterations. That’s the construction phase. On each frame, rotation values for x, y, and z axes are calculated based on an equation involving the sine function and the frame number. Then, the boxes are all visited and the rotation values applied. Since there is a parent/child relationship between the boxes, the rotation compounds as it is added to each box, causing the tentacles to whip and coil in an almost lifelike way.

We investigate the Three.js example code and see how to convert it into a Sinewav3 plugin. Mostly this is a process of casting off bits and bobs from the demo rig that have nothing to do with creating visuals, e.g., setting up the renderer, camera, and animation callback apparatus.

Additionally, we add a group of settings to the Sinewav3 plugin, allowing the user to position the root of the tentacle monster wherever they’d like it when using the plugin in a project.

Settings defined for the Sinewav3 Plugin

Sinewav3 lets you focus just on creating customizable components that can be mixed and matched for complex 3D scenes without the hassle of building a rig.

See for yourself: compare the original Three.js example code to a Gist of the final Sinewav3 Plugin.

Finally, check out the docs to learn more about the Sinewav3 API.

Happy coding!