html5 canvas线条丝状波浪隧道动画效果

1、新建html文档。

2、书写hmtl代码。<div>html5 canvas线条丝状波浪隧道动画效果</div>

3、书写css代码。

<style>

html,body {

margin:0;

padding:0;

overflow:hidden;

background-color:#000;

}

</style>

4、书写并添加js代码。

<script src="js/three.min.js"></script>

<script>

THREE.TextureLoader.prototype.crossOrigin = '';

var renderer, scene, camera, geometry, material, mesh;

var pointLightPrimary, lightPrimaryDirection;

var pointLightSecondary, lightSecondaryDirection;

var lightDistance = 30;

var lightSpeed = 0.05;

init();

animate();

function init() {

// Renderer

renderer = new THREE.WebGLRenderer();

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight );

renderer.setClearColor (0x000000, 1);

document.body.appendChild( renderer.domElement );

5、代码整体结构。

6、查看效果。