js实现canvas小黑点粒子组成的三维3d球形旋转动画效果代码-html代码-BFW代码库

js实现canvas小黑点粒子组成的三维3d球形旋转动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas小黑点粒子组成的三维3d球形旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          display: flex;
          margin: 0;
          align-items: center;
          justify-content: center;
          height: 100vh;
        }
        
        canvas {
          width: 98vmin;
          height: 98vmin;
        }
    </style>



</head>

<body>
    <canvas id="scene"></canvas>


    <script>
        console.clear();
        
        // Get the canvas element from the DOM
        const canvas = document.querySelector('#scene');
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
        // Store the 2D context
        const ctx = canvas.getContext('2d');
        
        if (window.devicePixelRatio > 1) {
          canvas.width = canvas.clientWidth * 2;
          canvas.height = canvas.clientHeight * 2;
          ctx.scale(2, 2);
        }
        
        /* ====================== */
        /* ====== VARIABLES ===== */
        /* ====================== */
        let width = canvas.clientWidth; // Width of the canvas
        let height = canvas.clientHeight; // Height of the canvas
        let rotation = 0; // Rotation of the globe
        let dots = []; // Every dots in an array
        
        /* ====================== */
        /* ====== CONSTANTS ===== */
        /* ====================== */
        /* Some of those constants may change if the user resizes their screen but I still strongly believe they belong to the Constants part of the variables */
        const DOTS_AMOUNT = 1000; // Amount of dots on the screen
        const DOT_RADIUS = 4; // Radius of the dots
        let GLOBE_RADIUS = width * 0.7; // Radius of the globe
        let GLOBE_CENTER_Z = -GLOBE_RADIUS; // Z value of the globe center
        let PROJECTION_CENTER_X = width / 2; // X center of the canvas HTML
        let PROJECTION_CENTER_Y = height / 2; // Y center of the canvas HTML
        let FIELD_OF_VIEW = width * 0.8;
        
        class Dot {
          constructor(x, y, z) {
            this.x = x;
            this.y = y;
            this.z = z;
        
            this.xProject = 0;
            this.yProject = 0;
            this.sizeProjection = 0;
          }
          // Do some math to project the 3D position into the 2D canvas
          project(sin, cos) {
            const rotX = cos * this.x + sin * (this.z - GLOBE_CENTER_Z);
            const rotZ = -sin * this.x + cos * (this.z - GLOBE_CENTER_Z) + GLOBE_CENTER_Z;
            this.sizeProjection = FIELD_OF_VIEW / (FIELD_OF_VIEW - rotZ);
            this.xProject = rotX * this.sizeProjection + PROJECTION_CENTER_X;
            this.yProject = this.y * this.sizeProjection + PROJECTION_CENTER_Y;
          }
          // Draw the dot on the canvas
          draw(sin, cos) {
            this.project(sin, cos);
            // ctx.fillRect(this.xProject - DOT_RADIUS, this.yProject - DOT_RADIUS, DOT_RADIUS * 2 * this.sizeProjection, DOT_RADIUS * 2 * this.sizeProjection);
            ctx.be.........完整代码请登录后点击上方下载按钮下载查看