Testing

by LovingApathy

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

	<body class="model-container" style="width:1024px;height:768px">
		<div class="head-container"></div>
		<div class="model-frame">
			<section id="loading-screen">
				<div class="loading"></div>
			</section>

		<script>
			let container, scene, clock, camera, renderer, model, raycaster, mouse;
			
			function init(){
/* Container */
				container = document.querySelector('.model-frame');
/* Scene */
				scene = new THREE.Scene();
/* Clock */
				clock = new THREE.Clock();
				const loadingManager = new THREE.LoadingManager( () => {
				const loadingScreen = document.getElementById('loading-screen');
					loadingScreen.classList.add('fade-out');
					loadingScreen.addEventListener('transitionend',onTransitionEnd);
				});
/* Camera */
				const fov = 35
				const aspect = container.clientWidth/container.clientHeight;
				const macro = 0.1;
				const tele = 1000;
          camera = new THREE.PerspectiveCamera(fov,aspect,macro,tele);
          camera.position.set(15,0,25);
          camera.rotation.y = .55;
/* Lights */
				const kelvin = 0xc4c4c4;
				const watt = 2;
          primeLight = new THREE.PointLight(kelvin,watt);
          primeLight.position.set(0,30,50);
          rightRim = new THREE.PointLight(kelvin,watt);
          rightRim.position.set(50,10,0);
          leftRim = new THREE.PointLight(kelvin,watt);
          leftRim.position.set(0,10,-50);
          backRim = new THREE.PointLight(kelvin,watt);
          backRim.position.set(-50,30,0);
          am = new THREE.DirectionalLight(0xb9e4ee,2);				
          pm = new THREE.DirectionalLight(0x444444,3);
          am.position.set(0,2,0);
          pm.position.set(0,-2,0);
          am.castShadow = true;
          pm.castShadow...

CSS

@font-face {
  font-family: "Arial Black";
  font-style: normal;
  font-weight: 900;
  src: url("../font/Arial-Black.ttf");
}

@font-face {
  font-family: Arial;
  font-style: normal;
  font-weight: bold;
  src: url("../font/Arial-BoldMT.ttf");
}

@font-face {
  font-family: Arial;
  font-style: normal;
  font-weight: normal;
  src: url("../font/ArialMT.ttf");
}

@font-face {
  font-family: "Arial Narrow";
  font-style: normal;
  font-weight: normal;
  font-stretch: condensed;
  src: url("../font/ArialNarrow.ttf");
}

@font-face {
  font-family: "Arial Narrow";
  font-style: normal;
  font-weight: bold;
  font-stretch: condensed;
  src: url("../font/ArialNarrow-Bold.ttf");
}

body,
div,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
code,
blockquote {
  margin: 0;
  padding: 0;
  border-width: 0;
  text-rendering: optimizeSpeed;
}
/******************************************************************************/
/**Neu Menu**/

#neuMenu {
  position: fixed;
  width: 100%;
  z-index: 9;
}

.nav-toggle {
  display: none;
}

.nav-ellipsis {
  -webkit-transform: translate(289px, -28.000px) rotate(0.000deg) skew(0.000deg) scale(1.000, 1.000);
  -webkit-transform-origin: 0% 0%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 21.23px;
  width: 23.23px;
  left: 0px;
  top: 0px;
  transform: translate(289.000px, -28.000px) rotate(0.000deg) skew(0.000deg) scale(1.000, 1.000);
  transform-origin: 0% 0%;
  cursor: pointer;
}

.nav-ellipsis span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85%;
  height: 2.75px;
  border-radius: 20px;
  background: #000;
}

.nav-ellipsis span::before,
.nav-ellipsis span::after {
  content: '';
  position: absolute;
  top: -6px;
  height: 2.75px;
  width: 100%;
  border-radius: 2px;
  background: inherit;
  z-index: 1;
}

.nav-ellipsis span::after {
  top: 6px;
}

.nav-toggle:checked ~ label span::before,
.nav-toggle:checked ~ label span::after...

JavaScript

var modal = document.getElementById('modal');
var close = document.getElementById('modal-close');
var open = document.getElementById('hierarchy');
var modalWidth = modal.clientWidth/2, modalHeight = modal.clientHeight/2;
var isMouseDown = false,
mouseX,mouseY,modalTop,modalLeft,diffX,diffY,newModalTop,newModalLeft,rightEdge,bottomEdge;

function mouseDown(e){
    isMouseDown = true;mouseX = e.clientX;mouseY = e.clientY;
    modalTop = modal.offsetTop;modalLeft = modal.offsetLeft;
    diffX = mouseX - modalLeft;diffY = mouseY - modalTop;
}
function mouseUp(){isMouseDown = false;
}
function mouseMove(e){
    if (!isMouseDown)return;
    var newMouseX = e.clientX;var newMouseY = e.clientY;

    newModalTop = newMouseY - diffY;newModalLeft = newMouseX - diffX;

    rightEdge = window.innerWidth - modalWidth;bottomEdge = window.innerHeight - modalHeight;

    if (newModalLeft < 0)newModalLeft = modalWidth;
    if (newModalTop < 0)newModalTop = modalHeight;
    if (newModalLeft > window.innerWidth - modalWidth)newModalLeft = window.innerWidth - modalWidth;
    if (newModalTop > window.innerHeight - modalHeight)newModalTop = window.innerHeight - modalHeight;

    modal.style.top = newModalTop + 'px';modal.style.left = newModalLeft + 'px';
}

document.addEventListener('pointermove', mouseMove);
modal.addEventListener('pointerup', mouseUp);
modal.addEventListener('pointerdown', mouseDown);

open.addEventListener('click', ()=>{modal.style.display = 'block';});
close.addEventListener('click', ()=>{modal.style.display = 'none';});