html特效粒子隧道,three.js基于canvas绘制3D粒子穿越隧道动画特效

特效描述：three.js 基于canvas绘制 3D粒子 穿越隧道动画。canvas绘制3D粒子穿越隧道动画特效

代码结构

1. 引入JS

2. HTML代码

//Get window size

var ww = window.innerWidth,

wh = window.innerHeight;

//Create a WebGL renderer

var renderer = new THREE.WebGLRenderer({

canvas: document.querySelector("canvas")

});

renderer.setSize(ww, wh);

//Create an empty scene

var scene = new THREE.Scene();

scene.fog = new THREE.Fog(0x000000, 30, 150);

//Create a perpsective camera

var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.1, 150);

camera.position.y = 400;

camera.position.z = 400;

//Array of points

var points = [

[68.5, 185.5],

[1, 262.5],

[270.9, 281.9],

[345.5, 212.8],

[178, 155.7],

[240.3, 72.3],

[153.4, 0.6],

[52.6, 53.3],

[68.5, 185.5]

];

//Con