<!DOCTYPE html>
|
<html lang="ja">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<title>instancing │ sketch of three.js</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
|
<meta name="description" content="study of Instancing with three.js">
|
<meta name="keywords" content="undefined, Yoichi Kobayashi, WebGL, three.js">
|
<meta name="theme-color" content="#111111">
|
<meta name="msapplication-TileImage" content="/sketch-threejs/img/common/ms_tileimage.png">
|
<meta name="msapplication-TileColor" content="#111111">
|
<link rel="shortcut icon" href="img/common/icon.ico">
|
<link rel="apple-touch-icon" sizes="180x180" href="img/common/app_icon.png">
|
<link rel="stylesheet" href="css/main.min.css">
|
<style>
|
#sidebar{
|
/*定位*/
|
position: absolute;
|
top: 50%;
|
right: 1%;
|
transform: translateY(-50%);
|
width: 20%;
|
height: 90%;
|
/*特效*/
|
background: rgba(255,255,255,0.7);
|
border-radius: 5px;
|
color: #ffffff;
|
z-index: 99;
|
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
|
}
|
|
.login-contain {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.login-box {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
.login-input {
|
background:none;
|
outline:none;
|
padding: 2px 5px;
|
border: 1px solid #ffffff;
|
border-radius: 15px;
|
}
|
.login-input:focus{
|
/*border:none;*/
|
}
|
|
</style>
|
</head>
|
<body>
|
<div class="l-page l-page--white" data-id="instancing">
|
<div class="p-sketch-outline">
|
<h2 class="p-sketch-outline__title">instancing</h2>
|
<p class="p-sketch-outline__date">posted: 2017.4.11 / update: 2017.4.18
|
</p>
|
<p class="p-sketch-outline__description">study of Instancing with three.js</p>
|
</div>
|
<canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>
|
</div>
|
<!-- 侧边栏 -->
|
<div id="sidebar">
|
<div class="login-contain">
|
<div class="login-box">
|
<div class="login-item">
|
<div class="login-label"></div>
|
<input type="text" class="login-input">
|
</div>
|
<div class="login-item">
|
<div class="login-label"></div>
|
<input type="text" class="login-input">
|
</div>
|
</div>
|
</div>
|
|
</div>
|
<script src="js/main.min.js"></script>
|
<script>
|
</script>
|
</body>
|
</html>
|
