feat: new

src/views/Home/data.ts

@@ -0,0 +1,170 @@
+export const tableData = [
+    'H', 'Hydrogen', '1.00794', 1, 1,
+    'He', 'Helium', '4.002602', 2, 1,
+    'Li', 'Lithium', '6.941', 3, 1,
+    'Be', 'Beryllium', '9.012182', 4, 1,
+    'B', 'Boron', '10.811', 13, 2,
+    'C', 'Carbon', '12.0107', 14, 2,
+    'N', 'Nitrogen', '14.0067', 15, 2,
+    'O', 'Oxygen', '15.9994', 16, 2,
+    'F', 'Fluorine', '18.9984032', 17, 2,
+    'Ne', 'Neon', '20.1797', 18, 2,
+    'Na', 'Sodium', '22.98976...', 1, 3,
+    'Mg', 'Magnesium', '24.305', 2, 3,
+    'Al', 'Aluminium', '26.9815386', 13, 3,
+    'Si', 'Silicon', '28.0855', 14, 3,
+    'P', 'Phosphorus', '30.973762', 15, 3,
+    'S', 'Sulfur', '32.065', 16, 3,
+    'Cl', 'Chlorine', '35.453', 17, 3,
+    'Ar', 'Argon', '39.948', 18, 3,
+    'K', 'Potassium', '39.948', 1, 4,
+    'Ca', 'Calcium', '40.078', 2, 4,
+    'Sc', 'Scandium', '44.955912', 3, 4,
+    'Ti', 'Titanium', '47.867', 4, 4,
+    'V', 'Vanadium', '50.9415', 5, 4,
+    'Cr', 'Chromium', '51.9961', 6, 4,
+    'Mn', 'Manganese', '54.938045', 7, 4,
+    'Fe', 'Iron', '55.845', 8, 4,
+    'Co', 'Cobalt', '58.933195', 9, 4,
+    'Ni', 'Nickel', '58.6934', 10, 4,
+    'Cu', 'Copper', '63.546', 11, 4,
+    'Zn', 'Zinc', '65.38', 12, 4,
+    'Ga', 'Gallium', '69.723', 13, 4,
+    'Ge', 'Germanium', '72.63', 14, 4,
+    'As', 'Arsenic', '74.9216', 15, 4,
+    'Se', 'Selenium', '78.96', 16, 4,
+    'Br', 'Bromine', '79.904', 17, 4,
+    'Kr', 'Krypton', '83.798', 18, 4,
+    'Rb', 'Rubidium', '85.4678', 1, 5,
+    'Sr', 'Strontium', '87.62', 2, 5,
+    'Y', 'Yttrium', '88.90585', 3, 5,
+    'Zr', 'Zirconium', '91.224', 4, 5,
+    'Nb', 'Niobium', '92.90628', 5, 5,
+    'Mo', 'Molybdenum', '95.96', 6, 5,
+    'Tc', 'Technetium', '(98)', 7, 5,
+    'Ru', 'Ruthenium', '101.07', 8, 5,
+    'Rh', 'Rhodium', '102.9055', 9, 5,
+    'Pd', 'Palladium', '106.42', 10, 5,
+    'Ag', 'Silver', '107.8682', 11, 5,
+    'Cd', 'Cadmium', '112.411', 12, 5,
+    'In', 'Indium', '114.818', 13, 5,
+    'Sn', 'Tin', '118.71', 14, 5,
+    'Sb', 'Antimony', '121.76', 15, 5,
+    'Te', 'Tellurium', '127.6', 16, 5,
+    'I', 'Iodine', '126.90447', 17, 5,
+    'Xe', 'Xenon', '131.293', 18, 5,
+    'Cs', 'Caesium', '132.9054', 1, 6,
+    'Ba', 'Barium', '132.9054', 2, 6,
+    'La', 'Lanthanum', '138.90547', 4, 9,
+    'Ce', 'Cerium', '140.116', 5, 9,
+    'Pr', 'Praseodymium', '140.90765', 6, 9,
+    'Nd', 'Neodymium', '144.242', 7, 9,
+    'Pm', 'Promethium', '(145)', 8, 9,
+    'Sm', 'Samarium', '150.36', 9, 9,
+    'Eu', 'Europium', '151.964', 10, 9,
+    'Gd', 'Gadolinium', '157.25', 11, 9,
+    'Tb', 'Terbium', '158.92535', 12, 9,
+    'Dy', 'Dysprosium', '162.5', 13, 9,
+    'Ho', 'Holmium', '164.93032', 14, 9,
+    'Er', 'Erbium', '167.259', 15, 9,
+    'Tm', 'Thulium', '168.93421', 16, 9,
+    'Yb', 'Ytterbium', '173.054', 17, 9,
+    'Lu', 'Lutetium', '174.9668', 18, 9,
+    'Hf', 'Hafnium', '178.49', 4, 6,
+    'Ta', 'Tantalum', '180.94788', 5, 6,
+    'W', 'Tungsten', '183.84', 6, 6,
+    'Re', 'Rhenium', '186.207', 7, 6,
+    'Os', 'Osmium', '190.23', 8, 6,
+    'Ir', 'Iridium', '192.217', 9, 6,
+    'Pt', 'Platinum', '195.084', 10, 6,
+    'Au', 'Gold', '196.966569', 11, 6,
+    'Hg', 'Mercury', '200.59', 12, 6,
+    'Tl', 'Thallium', '204.3833', 13, 6,
+    'Pb', 'Lead', '207.2', 14, 6,
+    'Bi', 'Bismuth', '208.9804', 15, 6,
+    'Po', 'Polonium', '(209)', 16, 6,
+    'At', 'Astatine', '(210)', 17, 6,
+    'Rn', 'Radon', '(222)', 18, 6,
+    'Fr', 'Francium', '(223)', 1, 7,
+    'Ra', 'Radium', '(226)', 2, 7,
+    'Ac', 'Actinium', '(227)', 4, 10,
+    'Th', 'Thorium', '232.03806', 5, 10,
+    'Pa', 'Protactinium', '231.0588', 6, 10,
+    'U', 'Uranium', '238.02891', 7, 10,
+    'Np', 'Neptunium', '(237)', 8, 10,
+    'Pu', 'Plutonium', '(244)', 9, 10,
+    'Am', 'Americium', '(243)', 10, 10,
+    'Cm', 'Curium', '(247)', 11, 10,
+    'Bk', 'Berkelium', '(247)', 12, 10,
+    'Cf', 'Californium', '(251)', 13, 10,
+    'Es', 'Einstenium', '(252)', 14, 10,
+    'Fm', 'Fermium', '(257)', 15, 10,
+    'Md', 'Mendelevium', '(258)', 16, 10,
+    'No', 'Nobelium', '(259)', 17, 10,
+    'Lr', 'Lawrencium', '(262)', 18, 10,
+    'Rf', 'Rutherfordium', '(267)', 4, 7,
+    'Db', 'Dubnium', '(268)', 5, 7,
+    'Sg', 'Seaborgium', '(271)', 6, 7,
+    'Bh', 'Bohrium', '(272)', 7, 7,
+    'Hs', 'Hassium', '(270)', 8, 7,
+    'Mt', 'Meitnerium', '(276)', 9, 7,
+    'Ds', 'Darmstadium', '(281)', 10, 7,
+    'Rg', 'Roentgenium', '(280)', 11, 7,
+    'Cn', 'Copernicium', '(285)', 12, 7,
+    'Uut', 'Unutrium', '(284)', 13, 7,
+    'Fl', 'Flerovium', '(289)', 14, 7,
+    'Uup', 'Ununpentium', '(288)', 15, 7,
+    'Lv', 'Livermorium', '(293)', 16, 7,
+    'Uus', 'Ununseptium', '(294)', 17, 7,
+    'Uuo', 'Ununoctium', '(294)', 18, 7
+]
+
+
+export const tableData2 = [
+    {
+       id:'1',
+       uid:'0002781821',
+       name:'黄飞虎',
+       department:'H',
+       other:'1.00794',
+        x:1,
+        y:1,
+    },
+    {
+        id:'2',
+        uid:'089281',
+        name:'欧阳飞剑',
+        department:'He',
+        other:'4.002602',
+        x:2,
+        y:1,
+    },
+    {
+        id:'3',
+        uid:'981721212',
+        name:'令狐冲',
+        department:'Li',
+        other:'6.941',
+        x:3,
+        y:1,
+    },
+    {
+        id:'4',
+        uid:'91888212',
+        name:'黄沾',
+        department:'Be',
+        other:9.012182,
+        x:4,
+        y:1,
+    },
+    {
+        id:'5',
+        uid:'918821212',
+        name:'林可致',
+        department:'B',
+        other:'10.811',
+        x:5,
+        y:1
+    }
+
+]

src/views/Home/index.vue

@@ -1,70 +1,250 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import HelloWorld from '../../components/HelloWorld.vue';
-import useStore from '@/store/index';
-import { useRouter } from 'vue-router';
-import { IUser } from '@/types/user';
+import { ref, onMounted } from 'vue'
+// import { tableData2 as tableData } from './data'
+import * as THREE from 'three'
+import {
+    CSS3DRenderer, CSS3DObject
+} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
+import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
+import TWEEN from 'three/examples/jsm/libs/tween.module.js';
+import useStore from '@/store'
 
-import { getData } from '@/api/main';
-const store = useStore();
-const router = useRouter();
-const data = ref<any>(null);
-const fetchData = async () => {
-  const res = await getData({});
-  data.value = res;
-  console.log('😊data.value:', data.value);
-};
-store.user.setUserList();
-// eslint-disable-next-line no-undef
-let user = ref<IUser[]>([]);
-const getUser = () => {
-  user.value = store.user.getUserList;
-  console.log('😊user.value:', user.value);
-};
-const skip = (url: string) => {
-  router.push({
-    path: url,
-    query: { id: 1 },
-  });
+const personConfig=useStore().personConfig
+const {getAlreadyPersonList:alreadyPersonList,getNotPersonList:notPersonList,getTableRowCount:rowCount}=personConfig
+const tableData=ref(
+    alreadyPersonList.concat(notPersonList)
+)
+
+const containerRef = ref<HTMLElement>()
+
+const scene = ref()
+const camera = ref()
+const renderer = ref()
+const controls = ref()
+const objects = ref<any[]>([])
+
+const targets = {
+    grid: <any[]>[],
+    helix: <any[]>[],
+    table: <any[]>[],
+    sphere: <any[]>[]
 };
+
+const init = () => {
+    const felidView = 40;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    const aspect = width / height;
+    const nearPlane = 1;
+    const farPlane = 10000;
+    const WebGLoutput = containerRef.value
+
+    scene.value = new THREE.Scene();
+    camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
+    camera.value.position.z = 3000;
+
+    renderer.value = new CSS3DRenderer()
+    renderer.value.setSize(width, height)
+    renderer.value.domElement.style.position = 'absolute';
+    WebGLoutput!.appendChild(renderer.value.domElement);
+
+    controls.value = new TrackballControls(camera.value, renderer.value.domElement);
+    controls.value.rotateSpeed = 1;
+    controls.value.staticMoving = true;
+    controls.value.minDistance = 500;
+    controls.value.maxDistance = 6000;
+    controls.value.addEventListener('change', render);
+
+    const tableLen = tableData.value.length
+    for (let i = 0; i < tableLen; i++) {
+        const element = document.createElement('div');
+        element.className = 'element-card';
+        element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
+
+        const number = document.createElement('div');
+        number.className = 'card-id';
+        // number.textContent = (i / 5 + 1).toString();
+        number.textContent = tableData.value[i].uid;
+        element.appendChild(number);
+
+        const symbol = document.createElement('div');
+        symbol.className = 'card-name';
+        symbol.textContent = tableData.value[i].name;
+        element.appendChild(symbol);
+
+        const detail = document.createElement('div');
+        detail.className = 'card-detail';
+        detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
+        element.appendChild(detail);
+
+        const object = new CSS3DObject(element);
+        object.position.x = Math.random() * 4000 - 2000;
+        object.position.y = Math.random() * 4000 - 2000;
+        object.position.z = Math.random() * 4000 - 2000;
+        scene.value.add(object);
+
+        objects.value.push(object);
+    }
+
+    createTableVertices();
+    createSphereVertices();
+    createHelixVertices();
+
+    function createTableVertices() {
+        const tableLen = tableData.value.length;
+
+        for (let i = 0; i < tableLen; i++) {
+            const object = new THREE.Object3D();
+
+            object.position.x = tableData.value[i].x * 180 - rowCount*90;
+            object.position.y = -tableData.value[i].y * 200 + 1000;
+            object.position.z = 0;
+
+            targets.table.push(object);
+        }
+    }
+
+    function createSphereVertices() {
+        let i = 0;
+        const objLength = objects.value.length;
+        const vector = new THREE.Vector3();
+
+        for (; i < objLength; ++i) {
+            let phi = Math.acos(-1 + (2 * i) / objLength);
+            let theta = Math.sqrt(objLength * Math.PI) * phi;
+            const object = new THREE.Object3D();
+
+            object.position.x = 800 * Math.cos(theta) * Math.sin(phi);
+            object.position.y = 800 * Math.sin(theta) * Math.sin(phi);
+            object.position.z = -800 * Math.cos(phi);
+
+            // rotation object 
+
+            vector.copy(object.position).multiplyScalar(2);
+            object.lookAt(vector);
+            targets.sphere.push(object);
+        }
+    }
+    function createHelixVertices() {
+        let i = 0;
+        const vector = new THREE.Vector3();
+        const objLength = objects.value.length;
+        for (; i < objLength; ++i) {
+            let phi = i * 0.213 + Math.PI;
+
+            const object = new THREE.Object3D();
+
+            object.position.x = 800 * Math.sin(phi);
+            object.position.y = -(i * 8) + 450;
+            object.position.z = 800 * Math.cos(phi + Math.PI);
+
+            object.scale.set(1.1, 1.1, 1.1);
+
+            vector.x = object.position.x * 2;
+            vector.y = object.position.y;
+            vector.z = object.position.z * 2;
+
+            object.lookAt(vector);
+
+            targets.helix.push(object);
+        }
+    }
+    window.addEventListener('resize', onWindowResize, false);
+    transform(targets.table, 2000)
+    render();
+}
+
+const transform = (targets: any[], duration: number) => {
+    // TWEEN.removeAll();
+    const objLength = objects.value.length;
+    for (let i = 0; i < objLength; ++i) {
+        let object = objects.value[i];
+        let target = targets[i];
+        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();
+
+
+        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();
+    }
+
+    // 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
+    new TWEEN.Tween({})
+        .to({}, duration * 2)
+        .onUpdate(render)
+        .start();
+}
+function onWindowResize() {
+    camera.value.aspect = window.innerWidth / window.innerHeight
+    camera.value.updateProjectionMatrix();
+
+    renderer.value.setSize(window.innerWidth, window.innerHeight);
+    render();
+}
+
+/**
+* [animation update all tween && controls]
+*/
+function animation() {
+    TWEEN.update();
+    controls.value.update();
+    requestAnimationFrame(animation);
+}
+
+
+function render() {
+    renderer.value.render(scene.value, camera.value);
+}
+
+onMounted(() => {
+    init();
+    animation();
+});
+
 </script>
 
 <template>
-  <div class="flex justify-center">
-    <!-- <svg-icon :name="'menu'" class="cursor-pointer svgMenu"></svg-icon> -->
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="../../assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
-  </div>
-  <div class="flex justify-center gap-6">
-    <button class="btn btn-primary" @click="getUser">pinia test</button>
-    <button class="btn btn-outline btn-secondary" @click="skip('about')"> router test</button>
-    <button class="btn glass" @click="fetchData">fetch</button>
-
-  </div>
-  <HelloWorld
-    class="flex flex-col items-center mx-auto text-center flex-column"
-    msg="Vite + Vue"
-  />
+    <div id="container" ref="containerRef">
+        <!-- 选中菜单结构 start-->
+        <div id="menu">
+            <button id="table" @click="transform(targets.table, 2000)">TABLE</button>
+            <button id="sphere" @click="transform(targets.sphere, 2000)">SPHERE</button>
+            <button id="helix" @click="transform(targets.helix, 2000)">HELIX</button>
+        </div>
+        <!-- end -->
+    </div>
 </template>
 
 <style scoped lang="scss">
-
-
-.logo {
-  height: 10em;
-  padding: 1.5em;
-  will-change: filter;
-  z-index: 0;
+#menu {
+    position: absolute;
+    z-index: 100;
+    width: 100%;
+    bottom: 50px;
+    text-align: center;
+    font-size: 32px;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+
+button {
+    border: none;
+    background-color: transparent;
+    color: rgba(127, 255, 255, 0.75);
+    padding: 12px 24px;
+    cursor: pointer;
+    outline: 1px solid rgba(127, 255, 255, 0.75);
 }
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+
+button:hover {
+    background-color: rgba(127, 255, 255, 0.5);
+}
+
+button:active {
+    background-color: rgba(127, 255, 255, 0.75);
 }