@zym-com/three-checkwall
v0.0.3
Published
3D签到墙
Downloads
5
Readme
Install
npm install @zym-com/three-checkwallor
yarn add @zym-com/three-checkwallImport
import ThreeCheckwall from "@zym-com/three-checkwall";
import "@zym-com/three-checkwall/dist/style.css";Usage
import ThreeCheckwall from "@zym-com/three-checkwall";
import "@zym-com/three-checkwall/dist/style.css";
function App() {
const options ={
"configuration": {
"fovNumber": 40,
"nearNumber": 1,
"farNumber": 10000,
"cameraPositionNear": {
"x": 0,
"y": 0,
"z": 3000
},
"sceneBgcolor": "rgba(2, 9, 36,1)",
"fogColor": "rgba(2, 9, 36,1)",
"fogNearNumber": 200,
"fogFarNumber": 10000,
"enableDamping": true,
"enablePan": true,
"enableRotate": true,
"enableZoom": true,
"autoRotation": true,
"rotationAngle": {
"x": 0,
"y": 0.001,
"z": 0
},
"autoSwitching": false,
"autoSwitchTransformType": [
"ring",
"sphere",
"helix",
"grid",
"pyramid"
],
"autoSwitchtime": 6000,
"transformType": "sphere",
"cssSpriteShow": false,
"planeGeometrySize": {
"x": 1400,
"y": 1800
},
"planeGeoSegments": 11,
"ringGeometrySize": {
"x": 1000,
"y": 50
},
"sphereRadius": 800,
"helixRadius": 900,
"helixLRSpacing": 0.175,
"helixTBSpacing": {
"x": 8,
"y": 450
},
"gridXconfig": {
"x": 360,
"y": 5,
"z": 800
},
"gridYconfig": {
"x": 360,
"y": 5,
"z": 700
},
"gridZconfig": {
"x": 700,
"y": 25,
"z": 0
},
"pyramidSize": {
"x": 140,
"y": 180
},
"layersNumber": 5,
"pyramidBottom": {
"x": 4,
"y": 4,
"z": 2,
"s": 9
},
"domContainerSize": {
"x": 120,
"y": 160
},
"bgColorSelect": "solidBgColor",
"solidBgColor": "rgba(0,127,127,1)",
"bgAnamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"solidBgColorA": true,
"bgimage": "",
"bgimageSize": "cover",
"bgtransparency": 1,
"borderStyle": "solid",
"borderWidthName": 1,
"borderColor": "rgba(127, 255, 255, 0.25)",
"bgborderRadiusName": 0,
"boxShadow": {
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 12,
"shadowColor": "rgba( 0, 255, 255, 0.5 )"
},
"contentSeries": [
{
"domType": "text",
"contentMapping": "name",
"domSize": {
"x": "auto",
"y": "auto"
},
"domItemPosition": {
"x": "50%",
"y": "50%"
},
"colorSelect": "solidColor",
"solidColor": "rgba(255,255,255,1)",
"anamorphism": {
"startVal": "rgba(255,68,68,1)",
"endVal": "rgba(0,0,0,1)",
"direction": 180
},
"textStyle": {
"fontFamily": "Microsoft Yahei",
"fontSize": 18,
"fontWeight": "normal",
"letterSpacing": 0,
"lineHeight": 18,
"fontStyle": "normal"
},
"levelalignment": "center",
"paragraphspacing": 0,
"transparency": 1,
"shadow": {
"shadowOffsetX": 0,
"shadowOffsetY": 0,
"shadowBlur": 0,
"shadowColor": "rgba(255,255,255,1)"
},
"objectFit": "contain",
"borderRadius": "5px",
"objectFitVideo": "contain",
"opacityVideo": 1,
"autoPlayVideo": true,
"controlsVideo": true,
"loopVideo": false,
"mutedVideo": false,
"textShadow": false
}
],
"sceneParamsBg": false,
"fogParams": true,
"backgroundStyleChild": true,
"borderStyleChild": true,
"boxShadowConfig": true
},
"base": {
"width": 1920,
"height": 1080
},
"dataSource": [
{
"name": "H",
"enName": "Hydrogen",
"quality": "1.00794",
"order": 1,
"extra": 1
},
{
"name": "He",
"enName": "Helium",
"quality": "4.002602",
"order": 18,
"extra": 1
},
{
"name": "Li",
"enName": "Lithium",
"quality": "6.941",
"order": 1,
"extra": 2
},
{
"name": "Be",
"enName": "Beryllium",
"quality": "9.012182",
"order": 2,
"extra": 2
},
{
"name": "B",
"enName": "Boron",
"quality": "10.811",
"order": 13,
"extra": 2
},
{
"name": "C",
"enName": "Carbon",
"quality": "12.0107",
"order": 14,
"extra": 2
},
{
"name": "N",
"enName": "Nitrogen",
"quality": "14.0067",
"order": 15,
"extra": 2
},
{
"name": "O",
"enName": "Oxygen",
"quality": "15.9994",
"order": 16,
"extra": 2
},
{
"name": "F",
"enName": "Fluorine",
"quality": "18.9984032",
"order": 17,
"extra": 2
},
{
"name": "Ne",
"enName": "Neon",
"quality": "20.1797",
"order": 18,
"extra": 2
},
{
"name": "Na",
"enName": "Sodium",
"quality": "22.98976...",
"order": 1,
"extra": 3
},
{
"name": "Mg",
"enName": "Magnesium",
"quality": "24.305",
"order": 2,
"extra": 3
},
{
"name": "Al",
"enName": "Aluminium",
"quality": "26.9815386",
"order": 13,
"extra": 3
},
{
"name": "Si",
"enName": "Silicon",
"quality": "28.0855",
"order": 14,
"extra": 3
},
{
"name": "P",
"enName": "Phosphorus",
"quality": "30.973762",
"order": 15,
"extra": 3
},
{
"name": "S",
"enName": "Sulfur",
"quality": "32.065",
"order": 16,
"extra": 3
},
{
"name": "Cl",
"enName": "Chlorine",
"quality": "35.453",
"order": 17,
"extra": 3
},
{
"name": "Ar",
"enName": "Argon",
"quality": "39.948",
"order": 18,
"extra": 3
},
{
"name": "K",
"enName": "Potassium",
"quality": "39.948",
"order": 1,
"extra": 4
},
{
"name": "Ca",
"enName": "Calcium",
"quality": "40.078",
"order": 2,
"extra": 4
},
{
"name": "Sc",
"enName": "Scandium",
"quality": "44.955912",
"order": 3,
"extra": 4
},
{
"name": "Ti",
"enName": "Titanium",
"quality": "47.867",
"order": 4,
"extra": 4
},
{
"name": "V",
"enName": "Vanadium",
"quality": "50.9415",
"order": 5,
"extra": 4
},
{
"name": "Cr",
"enName": "Chromium",
"quality": "51.9961",
"order": 6,
"extra": 4
},
{
"name": "Mn",
"enName": "Manganese",
"quality": "54.938045",
"order": 7,
"extra": 4
},
{
"name": "Fe",
"enName": "Iron",
"quality": "55.845",
"order": 8,
"extra": 4
},
{
"name": "Co",
"enName": "Cobalt",
"quality": "58.933195",
"order": 9,
"extra": 4
},
{
"name": "Ni",
"enName": "Nickel",
"quality": "58.6934",
"order": 10,
"extra": 4
},
{
"name": "Cu",
"enName": "Copper",
"quality": "63.546",
"order": 11,
"extra": 4
},
{
"name": "Zn",
"enName": "Zinc",
"quality": "65.38",
"order": 12,
"extra": 4
},
{
"name": "Ga",
"enName": "Gallium",
"quality": "69.723",
"order": 13,
"extra": 4
},
{
"name": "Ge",
"enName": "Germanium",
"quality": "72.63",
"order": 14,
"extra": 4
},
{
"name": "As",
"enName": "Arsenic",
"quality": "74.9216",
"order": 15,
"extra": 4
},
{
"name": "Se",
"enName": "Selenium",
"quality": "78.96",
"order": 16,
"extra": 4
},
{
"name": "Br",
"enName": "Bromine",
"quality": "79.904",
"order": 17,
"extra": 4
},
{
"name": "Kr",
"enName": "Krypton",
"quality": "83.798",
"order": 18,
"extra": 4
},
{
"name": "Rb",
"enName": "Rubidium",
"quality": "85.4678",
"order": 1,
"extra": 5
},
{
"name": "Sr",
"enName": "Strontium",
"quality": "87.62",
"order": 2,
"extra": 5
},
{
"name": "Y",
"enName": "Yttrium",
"quality": "88.90585",
"order": 3,
"extra": 5
},
{
"name": "Zr",
"enName": "Zirconium",
"quality": "91.224",
"order": 4,
"extra": 5
},
{
"name": "Nb",
"enName": "Niobium",
"quality": "92.90628",
"order": 5,
"extra": 5
},
{
"name": "Mo",
"enName": "Molybdenum",
"quality": "95.96",
"order": 6,
"extra": 5
},
{
"name": "Tc",
"enName": "Technetium",
"quality": "(98)",
"order": 7,
"extra": 5
},
{
"name": "Ru",
"enName": "Ruthenium",
"quality": "101.07",
"order": 8,
"extra": 5
},
{
"name": "Rh",
"enName": "Rhodium",
"quality": "102.9055",
"order": 9,
"extra": 5
},
{
"name": "Pd",
"enName": "Palladium",
"quality": "106.42",
"order": 10,
"extra": 5
},
{
"name": "Ag",
"enName": "Silver",
"quality": "107.8682",
"order": 11,
"extra": 5
},
{
"name": "Cd",
"enName": "Cadmium",
"quality": "112.411",
"order": 12,
"extra": 5
},
{
"name": "In",
"enName": "Indium",
"quality": "114.818",
"order": 13,
"extra": 5
},
{
"name": "Sn",
"enName": "Tin",
"quality": "118.71",
"order": 14,
"extra": 5
},
{
"name": "Sb",
"enName": "Antimony",
"quality": "121.76",
"order": 15,
"extra": 5
},
{
"name": "Te",
"enName": "Tellurium",
"quality": "127.6",
"order": 16,
"extra": 5
},
{
"name": "I",
"enName": "Iodine",
"quality": "126.90447",
"order": 17,
"extra": 5
},
{
"name": "Xe",
"enName": "Xenon",
"quality": "131.293",
"order": 18,
"extra": 5
},
{
"name": "Cs",
"enName": "Caesium",
"quality": "132.9054",
"order": 1,
"extra": 6
},
{
"name": "Ba",
"enName": "Barium",
"quality": "132.9054",
"order": 2,
"extra": 6
},
{
"name": "La",
"enName": "Lanthanum",
"quality": "138.90547",
"order": 4,
"extra": 9
},
{
"name": "Ce",
"enName": "Cerium",
"quality": "140.116",
"order": 5,
"extra": 9
},
{
"name": "Pr",
"enName": "Praseodymium",
"quality": "140.90765",
"order": 6,
"extra": 9
},
{
"name": "Nd",
"enName": "Neodymium",
"quality": "144.242",
"order": 7,
"extra": 9
},
{
"name": "Pm",
"enName": "Promethium",
"quality": "(145)",
"order": 8,
"extra": 9
},
{
"name": "Sm",
"enName": "Samarium",
"quality": "150.36",
"order": 9,
"extra": 9
},
{
"name": "Eu",
"enName": "Europium",
"quality": "151.964",
"order": 10,
"extra": 9
},
{
"name": "Gd",
"enName": "Gadolinium",
"quality": "157.25",
"order": 11,
"extra": 9
},
{
"name": "Tb",
"enName": "Terbium",
"quality": "158.92535",
"order": 12,
"extra": 9
},
{
"name": "Dy",
"enName": "Dysprosium",
"quality": "162.5",
"order": 13,
"extra": 9
},
{
"name": "Ho",
"enName": "Holmium",
"quality": "164.93032",
"order": 14,
"extra": 9
},
{
"name": "Er",
"enName": "Erbium",
"quality": "167.259",
"order": 15,
"extra": 9
},
{
"name": "Tm",
"enName": "Thulium",
"quality": "168.93421",
"order": 16,
"extra": 9
},
{
"name": "Yb",
"enName": "Ytterbium",
"quality": "173.054",
"order": 17,
"extra": 9
},
{
"name": "Lu",
"enName": "Lutetium",
"quality": "174.9668",
"order": 18,
"extra": 9
},
{
"name": "Hf",
"enName": "Hafnium",
"quality": "178.49",
"order": 4,
"extra": 6
},
{
"name": "Ta",
"enName": "Tantalum",
"quality": "180.94788",
"order": 5,
"extra": 6
},
{
"name": "W",
"enName": "Tungsten",
"quality": "183.84",
"order": 6,
"extra": 6
},
{
"name": "Re",
"enName": "Rhenium",
"quality": "186.207",
"order": 7,
"extra": 6
},
{
"name": "Os",
"enName": "Osmium",
"quality": "190.23",
"order": 8,
"extra": 6
},
{
"name": "Ir",
"enName": "Iridium",
"quality": "192.217",
"order": 9,
"extra": 6
},
{
"name": "Pt",
"enName": "Platinum",
"quality": "195.084",
"order": 10,
"extra": 6
},
{
"name": "Au",
"enName": "Gold",
"quality": "196.966569",
"order": 11,
"extra": 6
},
{
"name": "Hg",
"enName": "Mercury",
"quality": "200.59",
"order": 12,
"extra": 6
},
{
"name": "Tl",
"enName": "Thallium",
"quality": "204.3833",
"order": 13,
"extra": 6
},
{
"name": "Pb",
"enName": "Lead",
"quality": "207.2",
"order": 14,
"extra": 6
},
{
"name": "Bi",
"enName": "Bismuth",
"quality": "208.9804",
"order": 15,
"extra": 6
},
{
"name": "Po",
"enName": "Polonium",
"quality": "(209)",
"order": 16,
"extra": 6
},
{
"name": "At",
"enName": "Astatine",
"quality": "(210)",
"order": 17,
"extra": 6
},
{
"name": "Rn",
"enName": "Radon",
"quality": "(222)",
"order": 18,
"extra": 6
},
{
"name": "Fr",
"enName": "Francium",
"quality": "(223)",
"order": 1,
"extra": 7
},
{
"name": "Ra",
"enName": "Radium",
"quality": "(226)",
"order": 2,
"extra": 7
},
{
"name": "Ac",
"enName": "Actinium",
"quality": "(227)",
"order": 4,
"extra": 10
},
{
"name": "Th",
"enName": "Thorium",
"quality": "232.03806",
"order": 5,
"extra": 10
},
{
"name": "Pa",
"enName": "Protactinium",
"quality": "231.0588",
"order": 6,
"extra": 10
},
{
"name": "U",
"enName": "Uranium",
"quality": "238.02891",
"order": 7,
"extra": 10
},
{
"name": "Np",
"enName": "Neptunium",
"quality": "(237)",
"order": 8,
"extra": 10
},
{
"name": "Pu",
"enName": "Plutonium",
"quality": "(244)",
"order": 9,
"extra": 10
},
{
"name": "Am",
"enName": "Americium",
"quality": "(243)",
"order": 10,
"extra": 10
},
{
"name": "Cm",
"enName": "Curium",
"quality": "(247)",
"order": 11,
"extra": 10
},
{
"name": "Bk",
"enName": "Berkelium",
"quality": "(247)",
"order": 12,
"extra": 10
},
{
"name": "Cf",
"enName": "Californium",
"quality": "(251)",
"order": 13,
"extra": 10
},
{
"name": "Es",
"enName": "Einstenium",
"quality": "(252)",
"order": 14,
"extra": 10
},
{
"name": "Fm",
"enName": "Fermium",
"quality": "(257)",
"order": 15,
"extra": 10
},
{
"name": "Md",
"enName": "Mendelevium",
"quality": "(258)",
"order": 16,
"extra": 10
},
{
"name": "No",
"enName": "Nobelium",
"quality": "(259)",
"order": 17,
"extra": 10
},
{
"name": "Lr",
"enName": "Lawrencium",
"quality": "(262)",
"order": 18,
"extra": 10
},
{
"name": "Rf",
"enName": "Rutherfordium",
"quality": "(267)",
"order": 4,
"extra": 7
},
{
"name": "Db",
"enName": "Dubnium",
"quality": "(268)",
"order": 5,
"extra": 7
},
{
"name": "Sg",
"enName": "Seaborgium",
"quality": "(271)",
"order": 6,
"extra": 7
},
{
"name": "Bh",
"enName": "Bohrium",
"quality": "(272)",
"order": 7,
"extra": 7
},
{
"name": "Hs",
"enName": "Hassium",
"quality": "(270)",
"order": 8,
"extra": 7
},
{
"name": "Mt",
"enName": "Meitnerium",
"quality": "(276)",
"order": 9,
"extra": 7
},
{
"name": "Ds",
"enName": "Darmstadium",
"quality": "(281)",
"order": 10,
"extra": 7
},
{
"name": "Rg",
"enName": "Roentgenium",
"quality": "(280)",
"order": 11,
"extra": 7
},
{
"name": "Cn",
"enName": "Copernicium",
"quality": "(285)",
"order": 12,
"extra": 7
},
{
"name": "Nh",
"enName": "Nihonium",
"quality": "(286)",
"order": 13,
"extra": 7
},
{
"name": "Fl",
"enName": "Flerovium",
"quality": "(289)",
"order": 14,
"extra": 7
},
{
"name": "Mc",
"enName": "Moscovium",
"quality": "(290)",
"order": 15,
"extra": 7
},
{
"name": "Lv",
"enName": "Livermorium",
"quality": "(293)",
"order": 16,
"extra": 7
},
{
"name": "Ts",
"enName": "Tennessine",
"quality": "(294)",
"order": 17,
"extra": 7
},
{
"name": "Og",
"enName": "Oganesson",
"quality": "(294)",
"order": 18,
"extra": 7
}
],
bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}
return (
<>
<ThreeCheckwall {...options} />
</>
);
}
export default App;