Skip to content

Instantly share code, notes, and snippets.

@mzyy94

mzyy94/honda-3d.css

Last active September 21, 2015 03:23
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mzyy94/8974444 to your computer and use it in GitHub Desktop.
Save mzyy94/8974444 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
honda-3d.css
* {
margin: 0;
padding: 0;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
body {
font-family: 'Lato' !important;
font-style: normal;
cursor: default;
width: 100%;
height: 100%;
background-color: #000;
}
a {
text-decoration: none;
color: #ccc;
}
iframe#bgmovie {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -5;
border: none;
}
#license {
padding: 0 1em;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: block;
color: #fff;
z-index: 5;
line-height: 1rem;
}
#license img {
display: inline-block;
}
#display {
position: absolute;
width: 10000px;
text-align: center;
z-index: 0;
}
.box {
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: linear;
font-size: 14px;
display: inline-block;
text-align: left;
width: 800px;
padding: 50px 0;
height: 300px;
background-color: rgba(200,200,200,0.6);
color: #fff;
margin: 0 20px;
}
.box.right:first-child {
animation: movein 0.2s linear 0 1 normal;
-webkit-animation: movein 0.2s linear 0 1 normal;
}
.box.left:first-child {
animation: moveout 0.2s linear 0 1 normal;
-webkit-animation: moveout 0.2s linear 0 1 normal;
}
@keyframes movein {
0% { margin-left: -1640px;}
100% { margin-left: 20px;}
}
@-webkit-keyframes movein {
0% { margin-left: -1640px;}
100% { margin-left: 20px;}
}
@keyframes moveout {
0% { margin-left: 1640px;}
100% { margin-left: 20px;}
}
@-webkit-keyframes moveout {
0% { margin-left: 1640px;}
100% { margin-left: 20px;}
}
@-webkit-keyframes fadein {
0% { opacity: 0;}
100% { opacity: 1;}
}
@-webkit-keyframes fadeout {
0% { opacity: 1;}
100% { opacity: 0;}
}
.box:not(.active):hover {
cursor: pointer;
background-color: rgba(220,220,220,0.9);
}
.box img {
display: inline-block;
width: 300px;
height: 300px;
border-radius: 150px;
margin: 0 50px;
}
.box section {
display: inline-block;
width: 370px;
height: 300px;
text-align: justify;
}
.box section h1 {
font-weight: 700;
font-size: 56px;
}
.box section div {
font-weight: 100;
height: 140px;
margin: 20px 10px 40px 0;
}
.button {
display: inline-block;
align-items: flex-start;
box-sizing: border-box;
font-weight: 300;
text-transform: uppercase;
white-space: nowrap;
width: 180px;
height: 40px;
background-color: #eee;
border: 1px solid transparent;
color: #888;
font-size: 18px;
line-height: 40px;
text-align: center;
cursor: pointer;
outline: none;
}
#back {
position: absolute;
top: 30px;
left: 50px;
}
#loading {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background-color: #000;
text-align: center;
}
#floatingCirclesG {
margin: auto;
}
a.button[href="http://honda-3d.com/"] {
position: absolute;
top: 20px;
right: 20px;
}
Raw
honda-3d_webgl.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Honda 3D - WebGL Demo (Beta)</title>
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,700" rel="stylesheet" type="text/css">
<link href="stylesheets/honda-3d.css" rel="stylesheet" type="text/css">
<script src="scripts/three.js"></script>
<script src="scripts/Detector.js"></script>
<script src="scripts/OrbitControls.js"></script>
<script src="/javascripts/jquery-2.0.3.min.js"></script>
<link href="stylesheets/cssload.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="scripts/model-view.js"></script>
<!-- license -->
<div id="license">
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Honda 3D - WebGL Demo</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://mzyy94.com" property="cc:attributionName" rel="cc:attributionURL">mzyy94</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/deed.en_US">Creative Commons Attribution-NonCommercial 4.0 International License</a>.
</div>
<!-- end license -->
<!-- back to main page in 3D view -->
<button id="back" style="display: none;" class="button"> Back </button>
<!-- end button -->
<a class="button" href="http://honda-3d.com/">Original Site</a>
<!-- 3D model loading view -->
<div id="loading" style="display: none;">
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01">
</div>
<div class="f_circleG" id="frotateG_02">
</div>
<div class="f_circleG" id="frotateG_03">
</div>
<div class="f_circleG" id="frotateG_04">
</div>
<div class="f_circleG" id="frotateG_05">
</div>
<div class="f_circleG" id="frotateG_06">
</div>
<div class="f_circleG" id="frotateG_07">
</div>
<div class="f_circleG" id="frotateG_08">
</div>
</div>
</div>
<!-- end loading view -->
<!-- display box -->
<div id="display">
<div class="box" id="puyo">
<img src="images/puyo.png" />
<section>
<h1>PUYO</h1>
<div>As a conceptual expression of pure friendliness, nothing tops our 2007 Puyo concept car. With a soft gel-like body, it helps protect occupants and pedestrians alike from collision injury, and can communicate its current running status to other drivers via illuminated body panels. Safe, fun, and easy to drive, it represents an ideal fusion of people-friendly design technologies.</div>
<a href="http://honda-3d.com/data/puyo.zip" class="button"> Download </a>
<a href="#3Dview" class="button"> View in 3D </a>
</section>
</div>
<div class="box next" id="nsx_concept">
<img src="images/nsx_concept.png" />
<section>
<h1>NSX Concept</h1>
<div>Announced in 2013, this next-generation supercar sets a new standard in performance and environmentally friendly design. Low and wide, it hugs the road of Sport Hybrid Super Handling All-Wheel Drive (SH-AWD) technology that uses a pair of electric motors to independently adjust front-wheel torque. Inside, the cockpit is an intimate cocoon of pure control, wheel driver and machine can function as one.</div>
<a href="http://honda-3d.com/data/nsx_concept.zip" class="button"> Download </a>
<a href="#3Dview" class="button"> View in 3D </a>
</section>
</div>
<div class="box active" id="fuya-jo">
<img src="images/fuya-jo.png" />
<section>
<h1>FUYA-JO</h1>
<div>Announced in 1999, the Fuya-Jo was born of crazy desire to cruise the streets with the freedom of a skateboader.
Unconventional in every sense, it features unique semi-standing seats, a turntable-motif steering wheel, and a cockpit that evokes the DJ booth at an upscale club. With a high driver's vantage point that provides a clear view of the road ahead, it's a fun and functional vehicle for a new generation.</div>
<a href="http://honda-3d.com/data/fuya-jo.zip" class="button"> Download </a>
<a href="#3Dview" class="button"> View in 3D </a>
</section>
</div>
<div class="box prev" id="fsr_concept">
<img src="images/fsr_concept.png" />
<section>
<h1>FSR Concept</h1>
<div>Announced in 1994, the FSR Concept dramatically envisions the convergence of intelligent technology and automobile safety. Using an onboard navigation system capable of realtime data analysis, it is designed to help preventaccidents byalerting the driver to any potential danger. It is this concept of intelligent safety that lives on in our cars today.</div>
<a href="http://honda-3d.com/data/fsr_concept.zip" class="button"> Download </a>
<a href="#3Dview" class="button"> View in 3D </a>
</section>
</div>
<div class="box" id="kiwami">
<img src="images/kiwami.png" />
<section>
<h1>KIWAMI</h1>
<div>Announced in 2003, the Kiwami wraps advanced fuel cell technology in a body that reflects Japan's unique cultural heritage and aesthetic sensibility. Offering a full measure of safety features and driving pleasure, it has distinctively flat side windows and a wide, low silhouette that evokes the simplicity of traditional Japanese architecture and landscape design.</div>
<a href="http://honda-3d.com/data/kiwami.zip" class="button"> Download </a>
<a href="#3Dview" class="button"> View in 3D </a>
</section>
</div>
</div>
<!-- end display box -->
<script src="scripts/main.js"></script>
<!-- background movie -->
<iframe id="bgmovie" width="1920" height="1080" src="http://www.youtube.com/embed/MJWzLm91Hmg?html5=1&playlist=kdOVr4Tqdoc&autoplay=1&disablekb=1&controls=0&showinfo=0&vq=hd1080&modestbranding=1&rel=0&loop=1" >Background Movie Is Not Loadable.</iframe>
<!-- end movie -->
</body>
</html>
Raw
main.js
$(function(){
function fitWindow() {
$('#floatingCirclesG').css('margin-top', ($(window).height() - 128) / 2 + 'px');
$('#display').offset({top: ($(window).height() - $('#display').height())/2, left: ($(window).width() - $('#display').width())/2});
$('iframe').offset({top: ($(window).height() - $('iframe').height())/2});
}
fitWindow();
function shiftBoxes(opt){
var disp = $('#display');
if (opt === 'left') {
var target = disp.children().eq(0);
target.remove();
disp.append(target);
} else if (opt === 'right') {
var target = disp.children().eq(4);
target.remove();
disp.prepend(target);
}
$('.box').removeClass().addClass('box');
disp.children().eq(0).addClass(opt);
disp.children().eq(1).addClass('next');
disp.children().eq(2).addClass('active');
disp.children().eq(3).addClass('prev');
}
$(document).on('click', '.next', function(){shiftBoxes('right')});
$(document).on('click', '.prev', function(){shiftBoxes('left')});
$(document).on('click', '#display .active a[href="#3Dview"]', function(){
modelView($(this).parent().parent()[0].id);
$('.box:first').removeClass().addClass('box');
$('#display').hide();
$('#bgmovie').hide();
$('#back').show();
$('#loading').show();
});
$('#back').click(function(){
//location.href="#";
cancelAnimationFrame($('canvas').attr('class'));
$('canvas').html('');
//$('canvas').empty();
$('canvas').remove();
$('#display').show();
$('#bgmovie').show();
$('#back').hide();
$('#loading').hide();
});
$(window).resize(fitWindow);
});
Raw
model-view.js
if(!Detector.webgl) Detector.addGetWebGLMessage();
function modelView(objName){
var path = 'models/';
var suffix = '_LOW';
var extension = '.js';
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false, premultipliedAlpha: false });
var s_x = window.innerWidth;
var s_y = window.innerHeight;
renderer.setSize(s_x, s_y);
renderer.setClearColor(0x000000, 1.0);
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(15, s_x / s_y);
camera.position = new THREE.Vector3(-270, 230, 290);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
var light1 = new THREE.DirectionalLight(0xcccccc);
light1.position = new THREE.Vector3(0.577, 0.577, 0.577);
scene.add(light1);
var light2 = new THREE.DirectionalLight(0xcccccc);
light2.position = new THREE.Vector3(-0.577, -0.577, -0.577);
scene.add(light2);
var ambient = new THREE.AmbientLight(0x333333);
scene.add(ambient);
var controls = new THREE.OrbitControls(camera);
controls.center = new THREE.Vector3(0, 0, 0);
function render() {
var id = requestAnimationFrame(render);
controls.update();
renderer.render(scene, camera);
document.getElementsByTagName('canvas')[0].className = id;
};
var loader = new THREE.JSONLoader();
var fullpath = path + objName + suffix + extension;
loader.load(fullpath, function(geometry) {
var material = new THREE.MeshPhongMaterial();
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.position.x = -20;
document.body.appendChild(renderer.domElement);
render();
});
window.addEventListener('resize', function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}, false );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment