Create a Sinewav3 Plugin

Cliff Hall
Apr 12, 2018 · 2 min read
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!

Sinewav3

A web-based music visualization and video creation tool for…

Sinewav3

A web-based music visualization and video creation tool for artists and developers. Artists: Easily choreograph 3D visual accompaniment for your music. Developers: Use Three.js, WebGL, and our API to create amazing plugins and share the revenue when they’re used commercially.

Cliff Hall

Written by

Software Architect, Author, Musician, Dude. https://cliffordhall.com

Sinewav3

A web-based music visualization and video creation tool for artists and developers. Artists: Easily choreograph 3D visual accompaniment for your music. Developers: Use Three.js, WebGL, and our API to create amazing plugins and share the revenue when they’re used commercially.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store