酷炫无比的无穷隧道特效,infinite-tunnel,three.js无限3D空间隧道效果
1、3d空间设计穿梭隧道演示http://www.bokequ.com/show/infinite-tunnel/
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>3d空间设计，超酷无限隧道动画效果图 - bokequ.com</title> <link rel="stylesheet" href="http://www.bokequ.com/show/infinite-tunnel/style.css"> </head> <body> <!-- partial:index.partial.html --> <!-- My scene --> <canvas id="scene"></canvas> <!-- partial --> <script src='http://www.bokequ.com/show/infinite-tunnel/three.min.js'></script> <script src="http://www.bokequ.com/show/infinite-tunnel/script.js"></script> </body> </html>
2、使用Three.js制作酷炫无比的无穷隧道特效
演示http://www.bokequ.com/show/infinite-tunnel/2.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超酷3d无限隧道动画效果图</title>
<meta name="description" content="" />
<meta name="keywords" content="酷炫无比的无穷隧道特效,infinite-tunnel,three.js无限3D空间隧道效果" />
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #000;
}
canvas {
top: 0;
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="js/vendor/three.min.js"></script>
<script src="js/vendor/OrbitControls.js"></script>
<script src="js/app.js"></script>
</body>
</html>
教程源文件https://github.com/imokya/threejs-tunnel-effect
评论