Skip to content

Instantly share code, notes, and snippets.

@dadiorchen
Last active Jun 5, 2019
Embed
What would you like to do?
demo for constellation-3d
<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>
@dadiorchen
Copy link
Author

dadiorchen commented Jun 5, 2019

grid_2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment