效果:
代码:
注:input标签不能与OrbitControls.js共同使用
<html lang="en">
<head>
<title>three.js canvas - text - sprites</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
a {
color: #0078ff;
}
@media screen and (max-width: 600px) {
html {
font-size: 6px;
}
}
html {
font-size: 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.controls {
width: 40rem;
height: 20rem;
border: 0.2rem solid #88f;
border-radius: 0.5rem;
position: fixed;
bottom: 1rem;
left: 50%;
margin-left: -20rem;
background-color: rgba(155, 155, 255, 0.1);
}
#danmuInput {
width: 30rem;
font-size: 2rem;
text-align: center;
background-color: rgba(155, 155, 255, 0.6);
color: white;
height: 3.8rem;
line-height: 3.8rem;
margin: 4rem 0 0 5rem;
border: 0.1rem solid rgba(200, 200, 255, 0.3);
}
#danmuInput:focus {
border: 0.1rem solid rgba(200, 200, 255, 0.9);
box-shadow: none;
outline: none;
box-shadow: 0 0 0.2rem 0.1rem rgba(200, 200, 255, 0.9);
}
.controls button {
position: absolute;
width: 20rem;
height: 4rem;
bottom: 2rem;
left: 50%;
margin-left: -10rem;
background-color: rgba(0, 0, 0, 0);
color: white;
font-size: 2rem;
text-shadow: 0 0 5px #fff;
}
.controls button:hover {