dadiorchen/index.html

## index.html
<html>
	<script src='https://unpkg.com/constellation-3d' ></script>
	<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	<script type="text/babel">
		const colors		= (groupId) => {
			const c		= [
				'rgb(195,157,33)',
				'rgb(42, 40, 197)',
				'rgb(88,195, 44)',
				'rgb(174,	42,	154	)',
				'rgb(33, 106, 197)',
			]
			return c[groupId % c.length]
		}

		const setting		= {
			/*
			 * the DOM div element to mount all the component/canvas and so on
			 */
			container		: document.getElementById('container'),
			/*
			 * isAnimated = true	: there is an animation when it show up
			 */
			isAnimated		: true,
			/*
			 * the path to background picture of the component, need copy the
			 * picture to [project root dir]/static/
			 */
			backgroundPicture		: 'https://i.postimg.cc/VLrLzXWm/grid-2.png',
			backgroundPictureRepeatHorizontal		: 500 / 4,
			backgroundPictureRepeatVertical		: 400 / 4,
			/*
			 * the line between two skill nodes
			 */
			lineColor		: 0x5f5f5f,
			/*
			 * the line distance between two skill nodes
			 */
			lineDistance		: 80,
			/*
			 * text type = 'CSS', use CSS+HTML to show text skill node, with setting:textCSS
			 * text type = 'THREE', use 3D model to show text skill node, with setting: textMesh
			 */
			textType		: 'CSS',
			/*
			 * the width of the component
			 */
			width		: 500,
			/*
			 * the height of the component
			 */
			height		: 400,
			/*
			 * if true, the text will always keep facing to the camera
			 */
			isTextDirectionFixed		: true,
			/*
			 * if true, the camera will rotate automatically
			 */
			isAutoRotated		: true,
			/*
			 * the speed of camera rotation
			 */
			autoRotationSpeed		: 1,
			/*
			 * cameraType	= 'perspective' : the camera is first person view
			 * cameraType	= 'orbit'		: the camera is third person view
			 */
			cameraType		: 'orbit',
			/*
			 * in perspective mode, the position of camera, for X,Y,Z coordination
			 */
			cameraPerspectivePositionX		: 300,
			cameraPerspectivePositionY		: 0,
			cameraPerspectivePositionZ		: 0,
			/*
			 * in perspective mode, the angle of camera, for X,Y,Z coordination
			 */
			cameraPerspectiveAngleX		: 0,
			cameraPerspectiveAngleY		: -90,
			cameraPerspectiveAngleZ		: 0,
			/*
			 * in orbit mode, the position of camera, for X,Y,Z coordination
			 */
			cameraObitPositionX		: 0,
			cameraObitPositionY		: 0,
			cameraObitPositionZ		: 200,
			/*
			 * in orbit mode, the distance to camera, the bigger the number, the far
			 * away to the camera
			 */
			cameraObitFrustmSize		: 400,
			/*
			 * strength to push all skill nodes away
			 */
			strengthPushAllAway		: -657,
			/*
			 * strength to pull all skill nodes to X coordination
			 */
			strengthPullToX		: 0.1,
			/*
			 * strength to pull all skill nodes to y coordination
			 */
			strengthPullToY		: 0.1,
			/*
			 * strength to pull all skill nodes to z coordination
			 */
			strengthPullToZ		: 0.1,
			/*
			 * strength to bounce all nodes away
			 */
			strengthToBounceOtherAway		: 0.78,
			/*
			 * this is the setting for show a skill node in CSS/HTML way
			 */
			textCSS		: (node) => {
				return (
					<div
					style={{
						backgroundColor		: colors(node.group),
							width		: (node.weight< 5 ? 6 : 10) + 'px',
							height		: (node.weight< 5 ? 6 : 10) + 'px',
							borderRadius		: '50%',
					}}
					>
					<div
					style={{
						position		: 'absolute',
							color		: 'white',
							top		: (node.weight< 5 ? 6 : 10) + 2 + 'px' ,
							fontSize		: (node.weight< 5 ? 6 : 10) ,
					}}
					>
					{node.name}
					</div>
					</div>

				)
			},
			/*
			 * this is the setting for show a skill node in three.js d3 way
			 */
			textMesh		: (node, font) =>{
				//WebGL text
				const textGeometry = new THREE.TextGeometry( node.name, {
					font: font,
					size: 28 * (node.weight/10),
					height: 5 * (node.weight/10),
					//					curveSegments: 12,
					//					bevelEnabled: true,
					//					bevelThickness: 8,
					//					bevelSize: 8,
					//					bevelOffset: 0,
					//					bevelSegments: 5
				} );
				const textMaterial		= new THREE.MeshNormalMaterial({
					color		: 0x00ffff,
				})
				return new THREE.Mesh(textGeometry, textMaterial)
			},
			/*
			 * the skill data
			 * 	name		:		the skill name
			 * 	weight		: the weight for skill, range from 1 to 10
			 */
			data		: [
				//{{{
				{
					name		: 'Javascript',
					weight		: 8,
					children		: [
						{
							name		: 'React',
							weight		: 8,
							children		: [
								{
									name		: 'Redux',
									weight		: 3,
								},{
									name		: 'Flow',
									weight		: 3,
								},{
									name		: 'Jest',
									weight		: 5,
								},{
									name		: 'Next.js',
									weight		: 3,
								}
							],
						},{
							name		: 'D3',
							weight		: 6,
						},{
							name		: 'Three.js',
							weight		: 3,
						},{
							name		: 'Node.js',
							weight		: 6,
						}
					],
				},{
					name		: 'Java',
					weight		: 6,
					children		: [
						{
							name		: 'spring',
							weight		: 5,
						}
					]
				},{
					name		: 'git',
					weight		: 4,
				},{
					name		: 'TDD',
					weight		: 8,
					children		: [
						{
							name		: 'Trello',
							weight		: 3,
						},{
							name		: 'Agile programming',
							weight		: 5,
						},{
							name		: 'Pomodoro Technique',
							weight		: 3,
						}
					],
				}
				//}}}
			]
		}
		const constellation3D		= new constellation3d.Constellation3D(setting)
		constellation3D.init()
			.then(() => {
				constellation3D.explode()
				constellation3D.animate()
			})
	</script>
	<body>
		<div id='container' />
	</body>
</html>
	<html>
	<script src='https://unpkg.com/constellation-3d' ></script>
	<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	<script type="text/babel">
	const colors = (groupId) => {
	const c = [
	'rgb(195,157,33)',
	'rgb(42, 40, 197)',
	'rgb(88,195, 44)',
	'rgb(174, 42, 154 )',
	'rgb(33, 106, 197)',
	]
	return c[groupId % c.length]
	}

	const setting = {
	/*
	* the DOM div element to mount all the component/canvas and so on
	*/
	container : document.getElementById('container'),
	/*
	* isAnimated = true : there is an animation when it show up
	*/
	isAnimated : true,
	/*
	* the path to background picture of the component, need copy the
	* picture to [project root dir]/static/
	*/
	backgroundPicture : 'https://i.postimg.cc/VLrLzXWm/grid-2.png',
	backgroundPictureRepeatHorizontal : 500 / 4,
	backgroundPictureRepeatVertical : 400 / 4,
	/*
	* the line between two skill nodes
	*/
	lineColor : 0x5f5f5f,
	/*
	* the line distance between two skill nodes
	*/
	lineDistance : 80,
	/*
	* text type = 'CSS', use CSS+HTML to show text skill node, with setting:textCSS
	* text type = 'THREE', use 3D model to show text skill node, with setting: textMesh
	*/
	textType : 'CSS',
	/*
	* the width of the component
	*/
	width : 500,
	/*
	* the height of the component
	*/
	height : 400,
	/*
	* if true, the text will always keep facing to the camera
	*/
	isTextDirectionFixed : true,
	/*
	* if true, the camera will rotate automatically
	*/
	isAutoRotated : true,
	/*
	* the speed of camera rotation
	*/
	autoRotationSpeed : 1,
	/*
	* cameraType = 'perspective' : the camera is first person view
	* cameraType = 'orbit' : the camera is third person view
	*/
	cameraType : 'orbit',
	/*
	* in perspective mode, the position of camera, for X,Y,Z coordination
	*/
	cameraPerspectivePositionX : 300,
	cameraPerspectivePositionY : 0,
	cameraPerspectivePositionZ : 0,
	/*
	* in perspective mode, the angle of camera, for X,Y,Z coordination
	*/
	cameraPerspectiveAngleX : 0,
	cameraPerspectiveAngleY : -90,
	cameraPerspectiveAngleZ : 0,
	/*
	* in orbit mode, the position of camera, for X,Y,Z coordination
	*/
	cameraObitPositionX : 0,
	cameraObitPositionY : 0,
	cameraObitPositionZ : 200,
	/*
	* in orbit mode, the distance to camera, the bigger the number, the far
	* away to the camera
	*/
	cameraObitFrustmSize : 400,
	/*
	* strength to push all skill nodes away
	*/
	strengthPushAllAway : -657,
	/*
	* strength to pull all skill nodes to X coordination
	*/
	strengthPullToX : 0.1,
	/*
	* strength to pull all skill nodes to y coordination
	*/
	strengthPullToY : 0.1,
	/*
	* strength to pull all skill nodes to z coordination
	*/
	strengthPullToZ : 0.1,
	/*
	* strength to bounce all nodes away
	*/
	strengthToBounceOtherAway : 0.78,
	/*
	* this is the setting for show a skill node in CSS/HTML way
	*/
	textCSS : (node) => {
	return (
	<div
	style={{
	backgroundColor : colors(node.group),
	width : (node.weight< 5 ? 6 : 10) + 'px',
	height : (node.weight< 5 ? 6 : 10) + 'px',
	borderRadius : '50%',
	}}
	>
	<div
	style={{
	position : 'absolute',
	color : 'white',
	top : (node.weight< 5 ? 6 : 10) + 2 + 'px' ,
	fontSize : (node.weight< 5 ? 6 : 10) ,
	}}
	>
	{node.name}
	</div>
	</div>

	)
	},
	/*
	* this is the setting for show a skill node in three.js d3 way
	*/
	textMesh : (node, font) =>{
	//WebGL text
	const textGeometry = new THREE.TextGeometry( node.name, {
	font: font,
	size: 28 * (node.weight/10),
	height: 5 * (node.weight/10),
	// curveSegments: 12,
	// bevelEnabled: true,
	// bevelThickness: 8,
	// bevelSize: 8,
	// bevelOffset: 0,
	// bevelSegments: 5
	} );
	const textMaterial = new THREE.MeshNormalMaterial({
	color : 0x00ffff,
	})
	return new THREE.Mesh(textGeometry, textMaterial)
	},
	/*
	* the skill data
	* name : the skill name
	* weight : the weight for skill, range from 1 to 10
	*/
	data : [
	//{{{
	{
	name : 'Javascript',
	weight : 8,
	children : [
	{
	name : 'React',
	weight : 8,
	children : [
	{
	name : 'Redux',
	weight : 3,
	},{
	name : 'Flow',
	weight : 3,
	},{
	name : 'Jest',
	weight : 5,
	},{
	name : 'Next.js',
	weight : 3,
	}
	],
	},{
	name : 'D3',
	weight : 6,
	},{
	name : 'Three.js',
	weight : 3,
	},{
	name : 'Node.js',
	weight : 6,
	}
	],
	},{
	name : 'Java',
	weight : 6,
	children : [
	{
	name : 'spring',
	weight : 5,
	}
	]
	},{
	name : 'git',
	weight : 4,
	},{
	name : 'TDD',
	weight : 8,
	children : [
	{
	name : 'Trello',
	weight : 3,
	},{
	name : 'Agile programming',
	weight : 5,
	},{
	name : 'Pomodoro Technique',
	weight : 3,
	}
	],
	}
	//}}}
	]
	}
	const constellation3D = new constellation3d.Constellation3D(setting)
	constellation3D.init()
	.then(() => {
	constellation3D.explode()
	constellation3D.animate()
	})
	</script>
	<body>
	<div id='container' />
	</body>
	</html>