特效描述: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