原生js实现立体粒子三维拖拽旋转效果代码

代码语言:html

所属分类:粒子

代码描述:原生js实现立体粒子三维拖拽旋转效果代码

代码标签: 立体 粒子 三维 拖拽 旋转 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html {
  height: 100%;
  background-image: radial-gradient(ellipse farthest-corner at center top, #000d4d 0%, #000105 100%);
  cursor: move;
}

body {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
</style>



</head>

<body>


<canvas id="canv"></canvas>

  
      <script >
var num = 200;
var w = window.innerWidth;
var h = window.innerHeight;
var max = 100;
var _x = 0;
var _y = 0;
var _z = 150;
var dtr = function (d) {
  return d * Math.PI / 180;
};

var rnd = function () {
  return Math.sin(Math.floor(Math.random() * 360) * Math.PI / 180);
};
var dist = function (p1, p2, p3) {
  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) + Math.pow(p2.z - p1.z, .........完整代码请登录后点击上方下载按钮下载查看

网友评论0