html海洋动态效果图,利用HTML5实现3D海洋粒子动画特效

特效描述：利用HTML5实现 3D海洋粒子 动画特效。利用HTML5实现3D海洋粒子动画特效

代码结构

1. HTML代码

/**

*3D海洋效应与 Canvas2D

* 您可以更改注释 "效果属性" 下的属性

*/

// Init Context

let c = document.createElement('canvas').getContext('2d')

let postctx = document.body.appendChild(document.createElement('canvas')).getContext('2d')

let canvas = c.canvas

let vertices = []

// Effect Properties

let vertexCount = 7000

let vertexSize = 3

let oceanWidth = 204

let oceanHeight = -80

let gridSize = 32;

let waveSize = 16;

let perspective = 100;

// Common variables

let depth = (vertexCount / oceanWidth * gridSize)

let frame = 0

let { sin, cos, tan, PI } = Math

// Render loop

let loop = () =&