Communiqaid Logo 3D

(c) PvH

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<div id="viewport"></div>

	<svg id="logo_case" class="show" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 453.54 379.84" style="enable-background:new 0 0 453.54 379.84;" xml:space="preserve">
	<path id="handle" class="st0" d="M272.13,17.01c12.47,0,22.68,10.2,22.68,22.68c0,12.47-10.2,22.68-22.68,22.68h-90.71
		c-12.47,0-22.68-10.2-22.68-22.68c0-12.47,10.2-22.68,22.68-22.68H272.13 M272.13,0h-90.71c-21.88,0-39.68,17.8-39.68,39.69
		s17.8,39.69,39.68,39.69h90.71c21.88,0,39.69-17.8,39.69-39.69S294.01,0,272.13,0L272.13,0z"/>
	<path id="case" class="st1" d="M453.54,334.49c0,24.94-20.41,45.35-45.35,45.35H45.35C20.41,379.84,0,359.43,0,334.49V85.04
		c0-24.94,20.41-45.35,45.35-45.35h362.83c24.94,0,45.35,20.41,45.35,45.35V334.49z"/>
	<g id="bands">
		<rect x="56.69" y="39.69" class="st2" width="11.34" height="340.16"/>
		<rect x="385.51" y="39.69" class="st2" width="11.34" height="340.16"/>
	</g>
	<path id="bubble" class="st2" d="M255.12,124.72h-56.69c-46.97,0-85.04,38.07-85.04,85.04s38.07,85.04,85.04,85.04h28.35
		l30.69,30.69c2.05,2.05,4.89,3.32,8.02,3.32c6.26,0,11.34-5.08,11.34-11.34V292c36.45-9.6,63.33-42.77,63.33-82.23
		C340.16,162.8,302.08,124.72,255.12,124.72z M175.75,226.77c-9.39,0-17.01-7.61-17.01-17.01s7.61-17.01,17.01-17.01
		c9.39,0,17.01,7.61,17.01,17.01S185.14,226.77,175.75,226.77z M226.77,226.77c-9.39,0-17.01-7.61-17.01-17.01
		s7.61-17.01,17.01-17.01c9.39,0,17.01,7.61,17.01,17.01S236.16,226.77,226.77,226.77z M277.8,226.77c-9.39,0-17.01-7.61-17.01-17.01
		s7.61-17.01,17.01-17.01c9.39,0,17.01,7.61,17.01,17.01S287.19,226.77,277.8,226.77z"/>
	</svg>

	<div id="viewportcss">
	<div id="icons">
		<svg id="icon_eye" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;"...

SCSS

*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background: #dddddd;
}

#viewport, #viewportcss {
	position: fixed;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	outline: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.5s ease;
	
	& canvas {
		width: 100%;
		height: 100%;
		outline: none;
	}
	
	&.show {
		opacity: 1;
	}
}
#viewportcss {
	z-index: 2;
	pointer-events: none;
}

#logo_case {
	height: auto;
	width: 350px;
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 5;
	transform: translate(-50%, percentage(-74/134));
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;

	.st0 { fill: #AAAAAA; }
	.st1 { fill: #D12937; }
	.st2 { fill: #FFFFFF; }

	&.show {
		opacity: 1;
	}
}

#icons {
	width: 148px; // Sketchup unit
	height: 108px; // Sketchup unit
	//TODO: remove:
	//background: yellow;
	//opacity: 0.5;
}
#icon_eye, #icon_brush, #icon_mouse {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 36px; // Sketchup unit
	height: 36px; // Sketchup unit
	transform: translate(-50%, -50%);
	opacity: 1; //0;
	color: #AAAAAA;
	color: purple;
	
	path {
		fill: currentcolor;
	}
}
#icon_eye {
	left: 23.5px; // From Sketchup unit
}
#icon_brush {
	left: 50%;
}
#icon_mouse {
	transform: translate(50%, -50%);
	right: 23.5px; // From Sketchup unit
}

#viewportcss > div:not(:first-child) {
	display: none;
}
#viewportcss.show {
	//pointer-events: auto;
}

#viewportcss.reset {
	//transition: perspective 0s linear 10s;
	//perspective: -1 !important;

	#icons {
		transition: transform 3s cubic-bezier(.37,0,.36,.78);
		transform:
			//matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
			matrix3d(3, 0, 0, 0, 
               0, 3, 0, 0, 
               0, 0, 1, 0, 
               100, 100, 0, 1)
		!important;
	}
}

JavaScript

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
import { SVGLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/SVGLoader.js';
import { OBJLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'https://unpkg.com/[email protected]/examples/jsm/loaders/MTLLoader.js';
import { CSS3DRenderer, CSS3DObject } from 'https://unpkg.com/[email protected]/examples/jsm/renderers/CSS3DRenderer.js';


// Restore jQuery's swing as default easing
jQuery.easing.def = "jswing";

var renderer, camera, scene,
	scene2, renderer2, // For CSS transform
	manager, loader_obj, loader_mtl, loader_svg, loader_tex,
	case_scale = 1,
	case_width = 160,
	case_lid_height = 20,
	case_thickness = 40,
	the_case_wrapper = new THREE.Group(),
	the_case = new THREE.Group(),
	the_case_front = new THREE.Group(),
	the_case_back = new THREE.Group(),
	the_case_content = new THREE.Group(),
	the_materials = {},
	the_icons = [], do_align_main_icons = false,
	the_icon_1, the_icon_2, the_icon_3,
	the_other_icons = new THREE.Group(),
	//	'red': new THREE.MeshBasicMaterial({ color: 0xD12937, side: THREE.DoubleSide }),
	//	'dark_red': new THREE.MeshBasicMaterial({ color: 0x911C26, side: THREE.DoubleSide }),
	//	'white': new THREE.MeshBasicMaterial({ color: 0xFFFFFF, side: THREE.DoubleSide }),
	//	'grey': new THREE.MeshBasicMaterial({ color: 0xAAAAAA, side: THREE.DoubleSide }),
	//	'lightgrey': new THREE.MeshBasicMaterial({ color: 0xF7F7F7, side: THREE.DoubleSide }),
	//},
	width = 0, height = 0,
	controls,
	raycaster, intersects, intersect_object, enable_intersect = false,
	mouse = new THREE.Vector2(),
	mouse_real = new THREE.Vector2(),
	enable_shadows = false
	;

function onDocumentMouseMove( e ) {
	//e.preventDefault();
	mouse_real.x = e.clientX;
	mouse_real.y = e.clientY;
	mouse.x = ( e.clientX / width ) * 2 -...