Page

[HTML5]基于three.js的炫酷Canvas 3D线条动画特效

3316Anson16-05-25


正如博客背景所展示的线条动画效果,随着鼠标移动而移动,这里主要涉及three.js库以及html5的相关内容

大概就是下图的效果,把鼠标放上去线条会随着移动

QQ截图20160525124112.jpg

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>基于three.js的炫酷Canvas 3D线条动画特效</title>

<style>

            #canvas{
                width:100%;
                height:500px;
                overflow: hidden;
                position:absolute;
                top:0;
                left:0;
                background-color: gray;               
            }

        </style>

</head>
<body>

      <div id="canvas"></div>
      
    
    <script src="js/three.min.js"></script>
    
    <script src="js/projector.js"></script>
    
    <script src="js/canvas-renderer.js"></script>
    
    <script src="js/3d-lines-animation.js"></script>
    
    <script src="js/jquery-2.1.1.min.min.js" type="text/javascript"></script>



</body>
</html>

线条的颜色在3d-lines-animation.js文件中修改color = 0xFF1493,要将RGB颜色的#号替换成0x。


下面是代码附件

HTML5_canvas+three.js.zip