Sinewav3
Published in

Sinewav3

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!

--

--

--

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.

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
Cliff Hall

Cliff Hall

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

More from Medium

Axure Tutorial: Make Text Counter of Text Area

Three steps to slice a mesh with ThreeJS

AR for your ears

How to build 3D web apps. Part 3. Client-side libraries for 3D data display | CAD Exchanger