three.js - rotation geometry, css2d

tistory.html

<style>
  .label {
    background-color: lavender;
    opacity: 1;
    border-radius: 1em;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 5px 5px 20px -5px #000000;
  }

  .fade-in {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn s;
    opacity: 1;
  }

  .fade-out {
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeOut 1s;
    opacity: 0;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
</style>

<div id="three.js" style="overflow: hidden; position: relative; ">
  <div id="container"></div>
  <div id="css2label"></div>
</div>
<script type="module">
  import * as THREE from "https://tistory2.daumcdn.net/tistory/3334478/skin/images/three.module.js";

  import { OrbitControls } from "https://tistory3.daumcdn.net/tistory/3334478/skin/images/OrbitControls.js";
  var controls;
  import {
    CSS2DRenderer,
    CSS2DObject
  } from "https://tistory3.daumcdn.net/tistory/3334478/skin/images/CSS2DRenderer.js";

  var container, labelContainer;

  var camera, scene, renderer, labelRenderer;

  var mesh;

  const flagLabel = [
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false,
    false
  ];

  const labelData = [
    "JaeSeoKim",
    "Coding",
    "Security",
    "Hacking",
    "Web",
    "Devlop",
    "Study",
    "HI!",
    "TeamMODU",
    "Kshield JR",
    "Github",
    "Reversing"
  ];

  const labelPosition = [
    [
      0,
      110,
      180,
      (x, y, z) => {
        if (z < Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    [
      0,
      -110,
      180,
      (x, y, z) => {
        if (z < Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    [
      0,
      110,
      -180,
      (x, y, z) => {
        if (z > Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    [
      0,
      -110,
      -180,
      (x, y, z) => {
        if (z > Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    [
      110,
      -180,
      0,
      (x, y, z) => {
        if (y < Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    [
      -110,
      -180,
      0,
      (x, y, z) => {
        if (y > Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    [
      -110,
      180,
      0,
      (x, y, z) => {
        if (y > Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    [
      110,
      180,
      0,
      (x, y, z) => {
        if (y < Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    //8
    [
      180,
      0,
      -110,
      (x, y, z) => {
        if (z > Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    //9
    [
      180,
      0,
      110,
      (x, y, z) => {
        if (y < Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    //10
    [
      -180,
      0,
      -110,
      (x, y, z) => {
        if (y > Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ],
    //11
    [
      -180,
      0,
      110,
      (x, y, z) => {
        if (z < Math.PI / 110) {
          return true;
        } else {
          return false;
        }
      }
    ]
  ];
  var mouseX = 0,
    mouseY = 0;

  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;

  init();
  animate();

  function init() {
    container = document.getElementById("container");
    labelContainer = document.getElementById("css2label");

    camera = new THREE.PerspectiveCamera(
      20,
      windowHalfX / windowHalfY,
      1,
      10000
    );
    camera.position.z = 1500;

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);

    var light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, 0, 2);
    scene.add(light);

    var light2 = new THREE.DirectionalLight(0xffffff);
    light2.position.set(0, 10, -12);
    scene.add(light2);

    //

    //var axesHelper = new THREE.AxesHelper(500);
    //scene.add(axesHelper);

    // shadow

    var canvas = document.createElement("canvas");
    canvas.width = 128;
    canvas.height = 128;

    var context = canvas.getContext("2d");
    var gradient = context.createRadialGradient(
      canvas.width / 2,
      canvas.height / 2,
      0,
      canvas.width / 2,
      canvas.height / 2,
      canvas.width / 2
    );
    gradient.addColorStop(0.1, "rgba(210,210,210,1)");
    gradient.addColorStop(1, "rgba(255,255,255,1)");

    context.fillStyle = gradient;
    context.fillRect(0, 0, canvas.width, canvas.height);

    var shadowTexture = new THREE.CanvasTexture(canvas);

    var shadowMaterial = new THREE.MeshBasicMaterial({
      map: shadowTexture
    });
    var shadowGeo = new THREE.PlaneBufferGeometry(300, 300, 1, 1);

    var shadowMesh;

    shadowMesh = new THREE.Mesh(shadowGeo, shadowMaterial);
    shadowMesh.position.y = -250;
    shadowMesh.rotation.x = -Math.PI / 2;
    scene.add(shadowMesh);

    //geometry

    var radius = 200;

    var geometry = new THREE.IcosahedronBufferGeometry(radius);

    var material = new THREE.MeshNormalMaterial({
      vertexColors: true,
      shininess: 50
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    //

    labelPosition.map((position, index) => {
      var toplabel = document.createElement("div");
      toplabel.className = "label";
      toplabel.id = `label${index}`;
      toplabel.textContent = labelData[index];
      toplabel.style.marginTop = "-0.5em";
      var toplabel = new CSS2DObject(toplabel);
      toplabel.position.set(position[0], position[1], position[2]);
      mesh.add(toplabel);
    });

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(windowHalfX, windowHalfY);
    container.appendChild(renderer.domElement);

    labelRenderer = new CSS2DRenderer();
    labelRenderer.setSize(windowHalfX, windowHalfY);
    labelRenderer.domElement.style.position = "absolute";
    labelRenderer.domElement.style.top = 0;
    labelContainer.appendChild(labelRenderer.domElement);

    document.addEventListener("mousemove", onDocumentMouseMove, false);

    //

    window.addEventListener("resize", onWindowResize, false);

    controls = new OrbitControls(camera, labelRenderer.domElement);
  }

  function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(windowHalfX, windowHalfY);
    labelRenderer.setSize(windowHalfX, windowHalfY);
  }

  function onDocumentMouseMove(event) {
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
  }

  //

  function animate() {
    requestAnimationFrame(animate);

    const x = camera.rotation.x;
    const y = camera.rotation.y;
    const z = camera.position.z;

    labelPosition.map((position, index) => {
      if (
        position[3](x, y, z) &&
        document.getElementById(`label${index}`) &&
        !flagLabel[index]
      ) {
        document.getElementById(`label${index}`).classList.remove("fade-in");
        document.getElementById(`label${index}`).classList.add("fade-out");
        flagLabel[index] = true;
      } else if (
        !position[3](x, y, z) &&
        document.getElementById(`label${index}`) &&
        flagLabel[index]
      ) {
        document.getElementById(`label${index}`).classList.remove("fade-out");
        document.getElementById(`label${index}`).classList.add("fade-in");
        flagLabel[index] = false;
      }
    });

    controls.update();

    render();
  }

  function render() {
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
  }
</script>

궁금하거나 코드에 문제점이 있다면 알려주세요!!!