<div id="tag-cloud"></div>

Initialize the plug-in

First you need to set up an object array traversal, which contains the tags you need to make and their corresponding link addresses.

var entries = [ 
                { label: 'CodePen', url: 'http://codepen.io/', target: '_top' },
                { label: 'three.js', url: 'http://threejs.org/', target: '_top' },
                { label: 'JS Compress', url: 'http://jscompress.com/', target: '_top' },
                { label: 'TinyPNG', url: 'https://tinypng.com/', target: '_top' },
                { label: 'Can I Use', url: 'http://caniuse.com/', target: '_top' },
                { label: 'URL shortener', url: 'https://goo.gl/', target: '_top' },
                { label: 'Twitter', url: 'https://twitter.com/', target: '_top' },
                { label: 'Gulp', url: 'http://gulpjs.com/', target: '_top' },
                { label: 'Browsersync', url: 'https://www.browsersync.io/', target: '_top' },
                { label: 'GitHub', url: 'https://github.com/', target: '_top' },
                { label: 'Shadertoy', url: 'https://www.shadertoy.com/', target: '_top' },
                { label: 'jsPerf', url: 'http://jsperf.com/', target: '_top' },
                { label: 'Foundation', url: 'http://foundation.zurb.com/', target: '_top' },
                { label: 'CreateJS', url: 'http://createjs.com/', target: '_top' },
                { label: 'Velocity.js', url: 'http://julian.com/research/velocity/', target: '_top' },
                { label: 'jQuery', url: 'https://jquery.com/', target: '_top' },
            ];

Then you can initialize the 3D tag cloud plug-in through the following method.

$( '#tag-cloud' ).svg3DTagCloud( {entries: entries} );

Configuration parameters

The available configuration parameters of the svg3dtagcloud.js plug-in are:

• ##entries: an object array used to initialize tags.

• width: The width of the tag cloud.

• height: The height of the tag cloud.

• radius: The radius of the tag cloud.

• radiusMin: The minimum radius of the tag cloud.

• bgDraw: Whether to use background color.

• bgColor: background color.

• opacityOver: the label transparency when the mouse slides over the label.

• opacityOut: Label transparency when the mouse leaves the label.

• opacitySpeed: label transparency transition speed.

• fov: how the content is presented.

• speed: The speed of tag cloud animation.

• fontFamily: The font of the tag cloud.

• fontSize: The font size of the tag cloud.

• fontColor: The font color of the tag cloud.

• fontWeight: The fontWeight of the tag cloud font.

• fontStyle: The font style of the tag cloud.

• fontStretch: The fontStretch of the font of the tag cloud.

• fontToUpperCase: Whether to convert to uppercase font.