js实现canvas三维空间粒子连线跟随鼠标旋转效果代码-html代码-BFW代码库

js实现canvas三维空间粒子连线跟随鼠标旋转效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas三维空间粒子连线跟随鼠标旋转效果代码

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

<html>

<head>
    <style>
        body {
          height: 100%;
        }
        
        body {
            align-items: center;
            background-color: #121212;
            color: #fff;
            display: flex;
            font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            font-weight: 100;
            justify-content: center;
            line-height: 1.5;
            text-align: center;
            -webkit-font-smoothing: antialiased;
        }
        
        canvas {
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
        
        .page-wrap {
          pointer-events: none;
        }
        
        .text-container {
          max-width: 420px;
          width: 90%;
        }
        
        h1 {
          font-size: 22px;
        }
        
        p {
          font-size: 13px;
        }
    </style>
   
</head>

<body><canvas id="canvas" ></canvas>
    <div class="page-wrap">
        <h1>3D Rotation Matrix</h1>
        <p>(move your mouse)</p>
    </div>
    <script>
        // Change the dot count
        const dotCount = 100
        
        // init global elements
        const canvas = document.getElementById('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        let pointsRange = Math.min(window.innerWidth, window.innerHeight)
        baseDotRadius = (pointsRange > 300) ? 3 : 1.5
        const maxLineDistance = pointsRange / 2
        let xcenter = ctx.canvas.width / 2
        let ycenter = (ctx.canvas.height / 2)
        let dots = []
        let alpha = 0
        let beta = 0
        let gamma = 0
        let betaScrollAddition = 0
        let gammaScrollAddition = 0
        let timedAngleAddition = 0
        
        // Helper function
        const randomRange = (min, max) => Math.random() * (max - min) + min
        
        // Dot Class
        function Dot (x = null, y = null, z = null) {
          this.radius = baseDotRadius,
          this.opacity = 1,
          this.position = {
            x: x || randomRange(-pointsRange, pointsRange),
            y: y || randomRange(-pointsRange, pointsRange),
            z: z || randomRange(-pointsRange, pointsRange),
          }
          this.initialPosition = {
            x: this.position.x,
            y: this.position.y,
            z: this.position.z
          }
        }
        Dot.prototype.update = function() {
          // z position
          let one = this.initialPosition.x * -Math.sin(beta)
          let two = this.initialPosition.y * Math.cos(beta) * Math.sin(gamma)
          let three = this.initialPosition.z * Math.cos(beta) * Math.cos(gamma)
          this.position.z = one + two + three
        
          // "Depth of field" variables based on z-position
          let zPercentage = this.position.z / pointsRange
          this.radius = baseDotRadius + ((baseDotRadius / 3) * zPercentage)
          this.opacity = 0.5 + ((zPercentage + 1) / 4)
          let depthOfFieldMultiplier = ((zPercentage + 1) / 2) + 0.5
        
          // x position
          one = this.initialPosition.x * Math.cos(alpha) * Math.cos(beta)
          two = this.initialPos.........完整代码请登录后点击上方下载按钮下载查看