cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
414 lines (413 loc) • 18.9 kB
JavaScript
import { defineComponent, ref, watch, nextTick, onMounted, toRefs, openBlock, createElementBlock, normalizeStyle, createCommentVNode, createElementVNode } from "vue";
import { PerspectiveCamera, Scene, Object3D, Vector3 } from "../../node_modules/_three@0.150.1@three/build/three.module.mjs";
import { TWEEN } from "../../node_modules/_three@0.150.1@three/examples/jsm/libs/tween.module.min.mjs";
import { TrackballControls } from "../../node_modules/_three@0.150.1@three/examples/jsm/controls/TrackballControls.mjs";
import { CSS3DObject, CSS3DRenderer } from "../../node_modules/_three@0.150.1@three/examples/jsm/renderers/CSS3DRenderer.mjs";
import "./index.vue_vue_type_style_index_0_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
name: "CoPeriodictableStd",
props: {
width: {
type: String
},
height: {
type: String
},
initState: {
type: String,
default: "table"
},
btnShow: {
type: Boolean,
default: true
},
tableData: {
type: Array,
default: [
{ title: "Hggg", text1: "Hydrogen", text2: "1.00794", x: 1, y: 1 },
{ title: "He", text1: "Helium", text2: "4.002602", x: 18, y: 1 },
{ title: "Li", text1: "Lithium", text2: "#6.941", x: 1, y: 2 },
{ title: "Be", text1: "Beryllium", text2: "9.012182", x: 2, y: 2 },
{ title: "B", text1: "Boron", text2: "#10.811", x: 13, y: 2 },
{ title: "C", text1: "Carbon", text2: "#12.0107", x: 14, y: 2 },
{ title: "N", text1: "Nitrogen", text2: "#14.0067", x: 15, y: 2 },
{ title: "O", text1: "Oxygen", text2: "#15.9994", x: 16, y: 2 },
{ title: "F", text1: "Fluorine", text2: "18.9984032", x: 17, y: 2 },
{ title: "Ne", text1: "Neon", text2: "#20.1797", x: 18, y: 2 },
{ title: "Na", text1: "Sodium", text2: "22.98976...", x: 1, y: 3 },
{ title: "Mg", text1: "Magnesium", text2: "#24.305", x: 2, y: 3 },
{ title: "Al", text1: "Aluminium", text2: "26.9815386", x: 13, y: 3 },
{ title: "Si", text1: "Silicon", text2: "#28.0855", x: 14, y: 3 },
{ title: "P", text1: "Phosphorus", text2: "30.973762", x: 15, y: 3 },
{ title: "S", text1: "Sulfur", text2: "#32.065", x: 16, y: 3 },
{ title: "Cl", text1: "Chlorine", text2: "#35.453", x: 17, y: 3 },
{ title: "Ar", text1: "Argon", text2: "#39.948", x: 18, y: 3 },
{ title: "K", text1: "Potassium", text2: "#39.948", x: 1, y: 4 },
{ title: "Ca", text1: "Calcium", text2: "#40.078", x: 2, y: 4 },
{ title: "Sc", text1: "Scandium", text2: "44.955912", x: 3, y: 4 },
{ title: "Ti", text1: "Titanium", text2: "#47.867", x: 4, y: 4 },
{ title: "V", text1: "Vanadium", text2: "#50.9415", x: 5, y: 4 },
{ title: "Cr", text1: "Chromium", text2: "#51.9961", x: 6, y: 4 },
{ title: "Mn", text1: "Manganese", text2: "54.938045", x: 7, y: 4 },
{ title: "Fe", text1: "Iron", text2: "#55.845", x: 8, y: 4 },
{ title: "Co", text1: "Cobalt", text2: "58.933195", x: 9, y: 4 },
{ title: "Ni", text1: "Nickel", text2: "#58.6934", x: 10, y: 4 },
{ title: "Cu", text1: "Copper", text2: "#63.546", x: 11, y: 4 },
{ title: "Zn", text1: "Zinc", text2: "#65.38", x: 12, y: 4 },
{ title: "Ga", text1: "Gallium", text2: "#69.723", x: 13, y: 4 },
{ title: "Ge", text1: "Germanium", text2: "#72.63", x: 14, y: 4 },
{ title: "As", text1: "Arsenic", text2: "#74.9216", x: 15, y: 4 },
{ title: "Se", text1: "Selenium", text2: "#78.96", x: 16, y: 4 },
{ title: "Br", text1: "Bromine", text2: "#79.904", x: 17, y: 4 },
{ title: "Kr", text1: "Krypton", text2: "#83.798", x: 18, y: 4 },
{ title: "Rb", text1: "Rubidium", text2: "#85.4678", x: 1, y: 5 },
{ title: "Sr", text1: "Strontium", text2: "#87.62", x: 2, y: 5 },
{ title: "Y", text1: "Yttrium", text2: "88.90585", x: 3, y: 5 },
{ title: "Zr", text1: "Zirconium", text2: "#91.224", x: 4, y: 5 },
{ title: "Nb", text1: "Niobium", text2: "92.90628", x: 5, y: 5 },
{ title: "Mo", text1: "Molybdenum", text2: "#95.96", x: 6, y: 5 },
{ title: "Tc", text1: "Technetium", text2: "(98)", x: 7, y: 5 },
{ title: "Ru", text1: "Ruthenium", text2: "#101.07", x: 8, y: 5 },
{ title: "Rh", text1: "Rhodium", text2: "#102.9055", x: 9, y: 5 },
{ title: "Pd", text1: "Palladium", text2: "#106.42", x: 10, y: 5 },
{ title: "Ag", text1: "Silver", text2: "#107.8682", x: 11, y: 5 },
{ title: "Cd", text1: "Cadmium", text2: "#112.411", x: 12, y: 5 },
{ title: "In", text1: "Indium", text2: "#114.818", x: 13, y: 5 },
{ title: "Sn", text1: "Tin", text2: "#118.71", x: 14, y: 5 },
{ title: "Sb", text1: "Antimony", text2: "#121.76", x: 15, y: 5 },
{ title: "Te", text1: "Tellurium", text2: "127.6", x: 16, y: 5 },
{ title: "I", text1: "Iodine", text2: "126.90447", x: 17, y: 5 },
{ title: "Xe", text1: "Xenon", text2: "#131.293", x: 18, y: 5 },
{ title: "Cs", text1: "Caesium", text2: "#132.9054", x: 1, y: 6 },
{ title: "Ba", text1: "Barium", text2: "#132.9054", x: 2, y: 6 },
{ title: "La", text1: "Lanthanum", text2: "138.90547", x: 4, y: 9 },
{ title: "Ce", text1: "Cerium", text2: "#140.116", x: 5, y: 9 },
{ title: "Pr", text1: "Praseodymium", text2: "140.90765", x: 6, y: 9 },
{ title: "Nd", text1: "Neodymium", text2: "#144.242", x: 7, y: 9 },
{ title: "Pm", text1: "Promethium", text2: "(145)", x: 8, y: 9 },
{ title: "Sm", text1: "Samarium", text2: "#150.36", x: 9, y: 9 },
{ title: "Eu", text1: "Europium", text2: "#151.964", x: 10, y: 9 },
{ title: "Gd", text1: "Gadolinium", text2: "#157.25", x: 11, y: 9 },
{ title: "Tb", text1: "Terbium", text2: "158.92535", x: 12, y: 9 },
{ title: "Dy", text1: "Dysprosium", text2: "162.5", x: 13, y: 9 },
{ title: "Ho", text1: "Holmium", text2: "164.93032", x: 14, y: 9 },
{ title: "Er", text1: "Erbium", text2: "#167.259", x: 15, y: 9 },
{ title: "Tm", text1: "Thulium", text2: "168.93421", x: 16, y: 9 },
{ title: "Yb", text1: "Ytterbium", text2: "#173.054", x: 17, y: 9 },
{ title: "Lu", text1: "Lutetium", text2: "#174.9668", x: 18, y: 9 },
{ title: "Hf", text1: "Hafnium", text2: "#178.49", x: 4, y: 6 },
{ title: "Ta", text1: "Tantalum", text2: "180.94788", x: 5, y: 6 },
{ title: "W", text1: "Tungsten", text2: "#183.84", x: 6, y: 6 },
{ title: "Re", text1: "Rhenium", text2: "#186.207", x: 7, y: 6 },
{ title: "Os", text1: "Osmium", text2: "#190.23", x: 8, y: 6 },
{ title: "Ir", text1: "Iridium", text2: "#192.217", x: 9, y: 6 },
{ title: "Pt", text1: "Platinum", text2: "#195.084", x: 10, y: 6 },
{ title: "Au", text1: "Gold", text2: "196.966569", x: 11, y: 6 },
{ title: "Hg", text1: "Mercury", text2: "#200.59", x: 12, y: 6 },
{ title: "Tl", text1: "Thallium", text2: "#204.3833", x: 13, y: 6 },
{ title: "Pb", text1: "Lead", text2: "207.2", x: 14, y: 6 },
{ title: "Bi", text1: "Bismuth", text2: "#208.9804", x: 15, y: 6 },
{ title: "Po", text1: "Polonium", text2: "(209)", x: 16, y: 6 },
{ title: "At", text1: "Astatine", text2: "(210)", x: 17, y: 6 },
{ title: "Rn", text1: "Radon", text2: "(222)", x: 18, y: 6 },
{ title: "Fr", text1: "Francium", text2: "(223)", x: 1, y: 7 },
{ title: "Ra", text1: "Radium", text2: "(226)", x: 2, y: 7 },
{ title: "Ac", text1: "Actinium", text2: "(227)", x: 4, y: 10 },
{ title: "Th", text1: "Thorium", text2: "232.03806", x: 5, y: 10 },
{ title: "Pa", text1: "Protactinium", text2: "#231.0588", x: 6, y: 10 },
{ title: "U", text1: "Uranium", text2: "238.02891", x: 7, y: 10 },
{ title: "Np", text1: "Neptunium", text2: "(237)", x: 8, y: 10 },
{ title: "Pu", text1: "Plutonium", text2: "(244)", x: 9, y: 10 },
{ title: "Am", text1: "Americium", text2: "(243)", x: 10, y: 10 },
{ title: "Cm", text1: "Curium", text2: "(247)", x: 11, y: 10 },
{ title: "Bk", text1: "Berkelium", text2: "(247)", x: 12, y: 10 },
{ title: "Cf", text1: "Californium", text2: "(251)", x: 13, y: 10 },
{ title: "Es", text1: "Einstenium", text2: "(252)", x: 14, y: 10 },
{ title: "Fm", text1: "Fermium", text2: "(257)", x: 15, y: 10 },
{ title: "Md", text1: "Mendelevium", text2: "(258)", x: 16, y: 10 },
{ title: "No", text1: "Nobelium", text2: "(259)", x: 17, y: 10 },
{ title: "Lr", text1: "Lawrencium", text2: "(262)", x: 18, y: 10 },
{ title: "Rf", text1: "Rutherfordium", text2: "(267)", x: 4, y: 7 },
{ title: "Db", text1: "Dubnium", text2: "(268)", x: 5, y: 7 },
{ title: "Sg", text1: "Seaborgium", text2: "(271)", x: 6, y: 7 },
{ title: "Bh", text1: "Bohrium", text2: "(272)", x: 7, y: 7 },
{ title: "Hs", text1: "Hassium", text2: "(270)", x: 8, y: 7 },
{ title: "Mt", text1: "Meitnerium", text2: "(276)", x: 9, y: 7 },
{ title: "Ds", text1: "Darmstadium", text2: "(281)", x: 10, y: 7 },
{ title: "Rg", text1: "Roentgenium", text2: "(280)", x: 11, y: 7 },
{ title: "Cn", text1: "Copernicium", text2: "(285)", x: 12, y: 7 },
{ title: "Uut", text1: "Unutrium", text2: "(284)", x: 13, y: 7 },
{ title: "Fl", text1: "Flerovium", text2: "(289)", x: 14, y: 7 },
{ title: "Uup", text1: "Ununpentium", text2: "(288)", x: 15, y: 7 },
{ title: "Lv", text1: "Livermorium", text2: "(293)", x: 16, y: 7 },
{ title: "Uus", text1: "Ununseptium", text2: "(294)", x: 17, y: 7 },
{ title: "Uuo", text1: "Ununoctium", text2: "(294)", x: 18, y: 7 }
]
}
},
setup(props) {
const table = ref([]);
ref([]);
const show = ref(true);
const containerDom = ref();
const conWidth = ref();
const conHeight = ref();
const containerId = ref();
const menuId = ref();
let camera, scene, renderer;
let controls;
const objects = ref([]);
const targets = { table: [], sphere: [], helix: [], grid: [] };
ref(false);
const dataFn = () => {
table.value = [];
for (let i = 0; i < props.tableData.length; i++) {
let newObj = props.tableData[i];
for (let key in newObj) {
table.value.push(newObj[key]);
}
}
};
dataFn();
const containerInit = () => {
conWidth.value = containerDom.value.offsetWidth;
conHeight.value = containerDom.value.offsetHeight;
};
const getId = () => {
const charset = `0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`;
const maxLen = charset.length;
let ret = "";
for (let i = 0; i < 8; i++) {
const randomIndex = Math.floor(Math.random() * maxLen);
ret += charset[randomIndex];
}
containerId.value = "container-" + ret;
menuId.value = "menu-" + ret;
};
getId();
function init() {
var _a;
objects.value = [];
targets.table = [];
targets.sphere = [];
targets.helix = [];
targets.grid = [];
camera = new PerspectiveCamera(38, conWidth.value / conHeight.value, 1, 1e4);
camera.position.z = 3e3;
scene = new Scene();
for (let i = 0; i < table.value.length; i += 5) {
let element = document.createElement("div");
element.className = "element";
element.style.backgroundColor = "rgba(0,127,127," + (Math.random() * 0.5 + 0.25) + ")";
let number = document.createElement("div");
number.className = "number";
number.textContent = `${i / 5 + 1}`;
element.appendChild(number);
let symbol = document.createElement("div");
symbol.className = "symbol";
symbol.textContent = `${table.value[i]}`;
element.appendChild(symbol);
let details = document.createElement("div");
details.className = "details";
details.innerHTML = table.value[i + 1] + "<br>" + table.value[i + 2];
element.appendChild(details);
let objectCSS = new CSS3DObject(element);
objectCSS.position.x = Math.random() * 4e3 - 2e3;
objectCSS.position.y = Math.random() * 4e3 - 2e3;
objectCSS.position.z = Math.random() * 4e3 - 2e3;
scene.add(objectCSS);
objects.value.push(objectCSS);
let object2 = new Object3D();
object2.position.x = table.value[i + 3] * 140 - 1330;
object2.position.y = -(table.value[i + 4] * 180) + 1070;
targets.table.push(object2);
}
var vector = new Vector3();
for (let i = 0, l = objects.value.length; i < l; i++) {
var phi = Math.acos(-1 + 2 * i / l);
var theta = Math.sqrt(l * Math.PI) * phi;
var object = new Object3D();
object.position.setFromSphericalCoords(800, phi, theta);
vector.copy(object.position).multiplyScalar(2);
object.lookAt(vector);
targets.sphere.push(object);
}
var vector = new Vector3();
for (let i = 0, l = objects.value.length; i < l; i++) {
let theta2 = i * 0.175 + Math.PI;
let y = -(i * 8) + 450;
let object2 = new Object3D();
object2.position.setFromCylindricalCoords(900, theta2, y);
vector.x = object2.position.x * 2;
vector.y = object2.position.y;
vector.z = object2.position.z * 2;
object2.lookAt(vector);
targets.helix.push(object2);
}
for (let i = 0; i < objects.value.length; i++) {
let object2 = new Object3D();
object2.position.x = i % 5 * 400 - 800;
object2.position.y = -(Math.floor(i / 5) % 5) * 400 + 800;
object2.position.z = Math.floor(i / 25) * 1e3 - 2e3;
targets.grid.push(object2);
}
renderer = new CSS3DRenderer();
renderer.setSize(conWidth.value, conHeight.value);
(_a = document.getElementById(`${containerId.value}`)) == null ? void 0 : _a.appendChild(renderer.domElement);
controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6e3;
controls.addEventListener("change", render);
const buttonTable = document.querySelector(`#${menuId.value} .table`);
buttonTable.addEventListener(
"click",
function() {
transform(targets.table, 2e3);
},
false
);
const buttonSphere = document.querySelector(`#${menuId.value} .sphere`);
buttonSphere.addEventListener(
"click",
function() {
transform(targets.sphere, 2e3);
},
false
);
const buttonHelix = document.querySelector(`#${menuId.value} .helix`);
buttonHelix.addEventListener(
"click",
function() {
transform(targets.helix, 2e3);
},
false
);
const buttonGrid = document.querySelector(`#${menuId.value} .grid`);
buttonGrid.addEventListener(
"click",
function() {
transform(targets.grid, 2e3);
},
false
);
transform(targets[props.initState], 2e3);
}
var list = ref([]);
function transform(targets2, duration) {
list.value.forEach((item) => {
TWEEN.remove(item);
});
list.value = [];
let a, b, c;
for (let i = 0; i < objects.value.length; i++) {
const object = objects.value[i];
const target = targets2[i];
a = new TWEEN.Tween(object.position).to(
{ x: target.position.x, y: target.position.y, z: target.position.z },
Math.random() * duration + duration
).easing(TWEEN.Easing.Exponential.InOut).start();
b = new TWEEN.Tween(object.rotation).to(
{ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z },
Math.random() * duration + duration
).easing(TWEEN.Easing.Exponential.InOut).start();
list.value.push(a);
list.value.push(b);
}
c = new TWEEN.Tween().to({}, duration * 2).onUpdate(render).start();
list.value.push(c);
}
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
controls.update();
}
function render() {
renderer.render(scene, camera);
}
watch(
() => props.initState,
() => {
show.value = false;
nextTick(() => {
show.value = true;
nextTick(() => {
init();
animate();
});
});
}
);
watch(
() => props.tableData,
() => {
show.value = false;
dataFn();
nextTick(() => {
show.value = true;
nextTick(() => {
init();
animate();
});
});
},
{ deep: true }
);
const RESET_VIEW = () => {
if (conWidth.value) {
containerInit();
camera.aspect = conWidth.value / conHeight.value;
camera.updateProjectionMatrix();
renderer.setSize(conWidth.value, conHeight.value);
render();
}
};
onMounted(() => {
nextTick(() => {
containerInit();
init();
animate();
});
});
return {
show,
containerDom,
containerId,
menuId,
RESET_VIEW,
...toRefs(props)
};
}
});
const _hoisted_1 = ["id"];
const _hoisted_2 = ["id"];
const _hoisted_3 = /* @__PURE__ */ createElementVNode("button", { class: "table" }, "\u8868\u9762", -1);
const _hoisted_4 = /* @__PURE__ */ createElementVNode("button", { class: "sphere" }, "\u7403\u4F53", -1);
const _hoisted_5 = /* @__PURE__ */ createElementVNode("button", { class: "helix" }, "\u87BA\u65CB", -1);
const _hoisted_6 = /* @__PURE__ */ createElementVNode("button", { class: "grid" }, "\u7F51\u683C", -1);
const _hoisted_7 = [
_hoisted_3,
_hoisted_4,
_hoisted_5,
_hoisted_6
];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: "co-periodictable-std",
ref: "containerDom",
style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" })
}, [
_ctx.show ? (openBlock(), createElementBlock("div", {
key: 0,
id: _ctx.containerId
}, null, 8, _hoisted_1)) : createCommentVNode("", true),
_ctx.btnShow ? (openBlock(), createElementBlock("div", {
key: 1,
id: _ctx.menuId,
class: "menuStyle"
}, _hoisted_7, 8, _hoisted_2)) : createCommentVNode("", true)
], 4);
}
var CoPeriodictableStd = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { CoPeriodictableStd as default };