Canvas——3D旋转小球

已于 2024-09-23 19:52:53 修改
阅读量266 收藏
点赞数
分类专栏： 前端有趣的小案例 文章标签： 3d javascript 前端
于 2023-01-18 16:03:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/128727442
版权

文章目录

单个球体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: black;
        overflow: hidden;
      }
      canvas {
        /* background: lightgoldenrodyellow; */
        display: block;
        margin: auto;
        position: absolute;

        /* 绝对定位设置居中 */
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas1" width="500" height="500"></canvas>
    <script>
      var canvas = document.querySelector("canvas");
      var ctx = canvas.getContext("2d");
      var cw = canvas.width,
        cx = cw / 2;

      var ch = canvas.height,
        cy = ch / 2;

      //  存放球的所有点
      var balls = [];
      var fl = 250; //所绘制圆形放大缩小的控制变量

      // 在球体上获取一个随机点
      function spherePointPicking(R) {
        //https://math.stackexchange.com/questions/1585975/how-to-generate-random-points-on-a-sphere#1586185
        var u1 = Math.random();
        var u2 = Math.random();
        // acos反余弦函数
        var s = Math.acos(2 * u1 - 1) - Math.PI / 2;
        var t = 2 * Math.PI * u2;

        return {
          x: R * Math.cos(s) * Math.cos(t),
          y: R * Math.cos(s) * Math.sin(t),
          z: R * Math.sin(s),
        };
      }

      function oGrd(r, h) {
        // 径向渐变
        grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);

        // hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
        grd.addColorStop(0, "hsla(" + h + ",95%,95%, 1)");
        grd.addColorStop(0.4, "hsla(" + h + ",95%,45%,.5)");
        grd.addColorStop(1, "hsla(" + h + ", 95%, 45%, 0.1)");

        return grd;
      }

      function Ball(R) {
        // 所画圆的半径
        this.r = 3;
        // 所在球体的半径
        this.R = R;

        // 在球体上获取一个随机点(坐标有正有负，球心是（0，0）)
        this.pos = spherePointPicking(this.R);

        // 获取所要绘制的圆的圆心
        this.x = this.pos.x + cx;
        this.y = this.pos.y + cy;
        // 所要绘制圆的缩放比例
        this.scale = { x: 1, y: 1 };

        // 根据3d的位置设置圆的缩放和可见性
        this.draw3D = function () {
          //设置缩放控制圆的大小
          if (this.pos.z > -fl) {
            var scale = fl / (fl - this.pos.z);
            this.scale = { x: scale, y: scale };
            // 更新圆心的坐标
            this.x = cx + this.pos.x * scale;
            this.y = cy + this.pos.y * scale;
            this.visible = true;
          } else {
            this.visible = false;
          }
        };

        // 画2d圆
        this.draw2D = function () {
          ctx.save();
          //将坐标轴移动到所要画的圆的圆心的位置，再进行绘制，（不知道为什么将坐标轴移动到画布中心再根据圆心的坐标进行绘制绘制出的圆比较模糊）
          ctx.translate(this.x, this.y);
          ctx.scale(this.scale.x, this.scale.y);
          ctx.beginPath();
          ctx.arc(0, 0, this.r, 0, 2 * Math.PI);
          ctx.fillStyle = oGrd(this.r, 210);
          ctx.fill();
          ctx.restore();
        };

        // 绕x轴旋转
        this.rotateX = function (angle) {
          var cos = Math.cos(angle);
          var sin = Math.sin(angle);
          var y1 = this.pos.y * cos - this.pos.z * sin;
          var z1 = this.pos.z * cos + this.pos.y * sin;

          this.pos.y = y1;
          this.pos.z = z1;
        };
        // 绕y轴旋转
        this.rotateY = function (angle) {
          var cos = Math.cos(angle);
          var sin = Math.sin(angle);
          var x1 = this.pos.x * cos - this.pos.z * sin;
          var z1 = this.pos.z * cos + this.pos.x * sin;

          this.pos.x = x1;
          this.pos.z = z1;
        };
      }

      for (let i = 0; i < 1000; i++) {
        //一个球面上随机1000个点
        balls.push(new Ball(150));
        balls.push(new Ball(75));
      }

      // 动画帧
      var frames = 0;
      //   中间变量
      var m = { x: 0, y: 0 };
      //
      var target = { x: 0, y: 0 };
      //   移动的速度，变量1
      var speed = 0.0005;
      //   移动的速度，变量2
      var easing = 0.9;

      // 画球体
      function Draw() {
        // 渲染动画帧
        window.requestAnimationFrame(Draw);
        ctx.clearRect(0, 0, cw, ch);

        frames += 0.1;

        // 根据时间随机取定下次移动的位置
        t = new Date().getTime() / 127;
        m.x = cx + Math.cos(t / 43 + Math.cos(t / 47 + frames)) * 50;
        m.y = cy + Math.sin(t / 31 + Math.cos(t / 37 + frames)) * 50;
        target.x = (m.y - cy) * speed * easing;
        target.y = (m.x - cx) * speed * easing;

        balls.map((b) => {
          // 设置圆的缩放和可见性
          b.draw3D();
        });
        balls.sort((a, b) => {
          return a.pos.z - b.pos.z;
        });

        balls.map((b) => {
          b.rotateX(target.x);
          b.rotateY(target.y);

          if (b.visible) {
            b.draw2D();
          }
        });
      }

      Draw();
    </script>
  </body>
</html>

多个球体

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: black;
        overflow: hidden;
      }
      canvas {
        /* background: lightgoldenrodyellow; */
        display: block;
        margin: auto;
        position: absolute;

        /* 绝对定位设置居中 */
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas1" width="1500" height="500"></canvas>
    <script>
      var canvas = document.querySelector("canvas");
      var ctx = canvas.getContext("2d");
      var cw = canvas.width,
        cx = cw / 2;

      var ch = canvas.height,
        cy = ch / 2;

      //  存放球的所有点
      const balls = {
        balls0: [],
        balls1: [],
        balls2: [],
        balls3: [],
        balls4: [],
        balls5: [],
      };

      var fl = 250; //所绘制圆形放大缩小的控制变量

      // 在球体上获取一个随机点
      function spherePointPicking(R) {
        //https://math.stackexchange.com/questions/1585975/how-to-generate-random-points-on-a-sphere#1586185
        var u1 = Math.random();
        var u2 = Math.random();
        // acos反余弦函数
        var s = Math.acos(2 * u1 - 1) - Math.PI / 2;
        var t = 2 * Math.PI * u2;

        return {
          x: R * Math.cos(s) * Math.cos(t),
          y: R * Math.cos(s) * Math.sin(t),
          z: R * Math.sin(s),
        };
      }

      function oGrd(r, h) {
        // 径向渐变
        grd = ctx.createRadialGradient(0, 0, 0, 0, 0, r);

        // hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
        grd.addColorStop(0, "hsla(" + h + ",95%,95%, 1)");
        grd.addColorStop(0.4, "hsla(" + h + ",95%,45%,.5)");
        grd.addColorStop(1, "hsla(" + h + ", 95%, 45%, 0.1)");

        return grd;
      }

      function Ball(R, circleX, circleY, color) {
        // 所画圆的半径
        this.r = 3;
        // 所在球体的半径
        this.R = R;

        // 在球体上获取一个随机点(坐标有正有负，球心是（0，0）)
        this.pos = spherePointPicking(this.R);

        // 获取所要绘制的圆的圆心
        this.x = this.pos.x + circleX;
        this.y = this.pos.y + circleY;
        // 所要绘制圆的缩放比例
        this.scale = { x: 1, y: 1 };

        // 根据3d的位置设置圆的缩放和可见性
        this.draw3D = function () {
          //设置缩放控制圆的大小
          if (this.pos.z > -fl) {
            var scale = fl / (fl - this.pos.z);
            this.scale = { x: scale, y: scale };
            // 更新圆心的坐标
            this.x = circleX + this.pos.x * scale;
            this.y = circleY + this.pos.y * scale;
            this.visible = true;
          } else {
            this.visible = false;
          }
        };

        // 画2d圆
        this.draw2D = function () {
          ctx.save();
          //将坐标轴移动到所要画的圆的圆心的位置，再进行绘制，（不知道为什么将坐标轴移动到画布中心再根据圆心的坐标进行绘制绘制出的圆比较模糊）
          ctx.translate(this.x, this.y);
          ctx.scale(this.scale.x, this.scale.y);
          ctx.beginPath();
          ctx.arc(0, 0, this.r, 0, 2 * Math.PI);
          ctx.fillStyle = oGrd(this.r, color);
          ctx.fill();
          ctx.restore();
        };

        // 绕x轴旋转
        this.rotateX = function (angle) {
          var cos = Math.cos(angle);
          var sin = Math.sin(angle);
          var y1 = this.pos.y * cos - this.pos.z * sin;
          var z1 = this.pos.z * cos + this.pos.y * sin;

          this.pos.y = y1;
          this.pos.z = z1;
        };
        // 绕y轴旋转
        this.rotateY = function (angle) {
          var cos = Math.cos(angle);
          var sin = Math.sin(angle);
          var x1 = this.pos.x * cos - this.pos.z * sin;
          var z1 = this.pos.z * cos + this.pos.x * sin;

          this.pos.x = x1;
          this.pos.z = z1;
        };
      }

      for (let i = 0; i < 1000; i++) {
        //一个球面上随机1000个点
        balls.balls0.push(new Ball(150, cx, cy, 210));
        balls.balls0.push(new Ball(75, cx, cy, 210));
      }
      for (let i = 0; i < 800; i++) {
        balls.balls1.push(new Ball(100, cx / 2, cy / 2, 225));
        balls.balls1.push(new Ball(50, cx / 2, cy / 2, 225));
      }
      for (let i = 0; i < 300; i++) {
        balls.balls2.push(new Ball(75, (cx / 2) * 3, cy / 2, 230));
        balls.balls2.push(new Ball(50, (cx / 2) * 3, cy / 2, 230));
      }
      for (let i = 0; i < 100; i++) {
        balls.balls3.push(new Ball(25, (cx / 3) * 4, (cy / 3) * 4, 255));
        balls.balls3.push(new Ball(20, (cx / 3) * 4, (cy / 3) * 4, 255));
      }
      for (let i = 0; i < 600; i++) {
        balls.balls4.push(new Ball(90, cx / 4, (cy / 3) * 4, 200));
        balls.balls4.push(new Ball(65, cx / 4, (cy / 3) * 4, 200));
      }
      for (let i = 0; i < 500; i++) {
        balls.balls4.push(new Ball(100, (cx / 5) * 9, (cy / 7) * 10, 190));
        balls.balls4.push(new Ball(75, (cx / 5) * 9, (cy / 7) * 10, 190));
      }

      // 动画帧
      var frames = 0;
      //   中间变量
      var m = { x: 0, y: 0 };
      //
      var target = { x: 0, y: 0 };
      //   移动的速度，变量1
      var speed = 0.0005;
      //   移动的速度，变量2
      var easing = 0.9;

      // 画球体
      function Draw() {
        // 渲染动画帧
        window.requestAnimationFrame(Draw);
        ctx.clearRect(0, 0, cw, ch);

        frames += 0.1;

        // 根据时间随机取定下次移动的位置
        t = new Date().getTime() / 127;
        m.x = cx + Math.cos(t / 43 + Math.cos(t / 47 + frames)) * 50;
        m.y = cy + Math.sin(t / 31 + Math.cos(t / 37 + frames)) * 50;
        target.x = (m.y - cy) * speed * easing;
        target.y = (m.x - cx) * speed * easing;

        Object.keys(balls).forEach((item) => {
          balls[item].map((b) => {
            // 设置圆的缩放和可见性
            b.draw3D();
          });
          balls[item].sort((a, b) => {
            return a.pos.z - b.pos.z;
          });

          const random = Math.random() + 0.5;
          console.log("123", random);
          balls[item].map((b, index) => {
            b.rotateX(target.x * random);
            b.rotateY(target.y * random);

            if (b.visible) {
              b.draw2D();
            }
          });
        });
      }

      Draw();
    </script>
  </body>
</html>
vpython 做圆周运动_《每周一点canvas动画》——圆周运动
weixin_29799175的博客
01-14 1077
接《每周一点canvas动画》——波形运动圆周运动可以分为两种基本的形式：正圆运动和椭圆运动。在讲解圆周运动之前，必不可少的数学公式即将袭来。so,各位骚年们，请护好自己的膝盖。听不懂没关系，只要明白其中的原理就行。当然，能懂是最好的，这对后面学习高级动画是很有帮助的。好吧，废话少说直接上菜。1.正圆运动一般情况下，圆的直角坐标方程可以表示为：x2+y2=R2，根据此公式可以得出圆在直角坐标中的轨...
three.js 物体3D模型——尺寸测量标注
u014291990的博客
01-29 4379
在开发一些物联网、数字孪生Web3D可视化项目的时候，比如一个工厂、化工厂、变电站、园区等场景，有时候，需要进行一些尺寸测量，比如属于鼠标点击选择模型表面上两点，然后计算两点之间尺寸距离，然后使用箭头和数字进行标注。( 先用鼠标点击按钮进入测量状态，在通过鼠标点击拾取模型任意两点，然后会自动标注 )
24、《每周一点canvas动画》——3D物理效果
river、的博客
04-17 887
在上一节《每周一点canvas动画》——3维环境搭建中，我们详细的介绍了要想在2D的画布上实现立体效果，需要做哪些事情。也就是我们所说的，怎样给画布中的物体搭建一个可以做三维运动的环境。这之后的所有知识和应用都是基于此环境来运行的。所以，务必弄懂。 到现在为止，你可能发现我们所搭建的三维环境只是针对物体的大小变化做了一定的处理。但是，除了物体的大小，三维环境中，物体的颜色，物体的在光源环境下所展...
Canvas 3D旋转地球
07-18
Canvas 3D旋转地球Canvas 3D旋转地球Canvas 3D旋转地球
点的旋转演示：通过 HTML5 和 JavaScript 实现数学旋转动画
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-13 279
这段 HTML 代码展示了一个点绕原点旋转的动画演示。通过使用<canvas>元素和 JavaScript 动态绘制图形，用户可以直观地看到点 P(-2, 4) 在 2 秒内顺时针旋转 45 度的过程，并计算旋转后的坐标。
JavaScript+canvas实现一个旋转的3D球动画效果
hjd2018的博客
11-22 3005
JavaScript+canvas实现一个旋转的3D球动画效果
HTML5 Canvas三维立体的旋转物体动画
12-29
HTML5 Canvas三维立体的旋转物体动画
canvas绘制3d球体
weixin_34326429的博客
01-30 1399
window.onload=function(){ var R_init=500 var Sum=360/10 //定义12个环形的圈圈 var Sumy=360/10 //纵向也有12个圈圈 var radius=2 //居中半径 var r_add=2 //半径增量 var scen=20 ...
Canvas实现3D效果
qq_46258819的博客
08-30 2124
【代码】Canvas实现3D效果。
安卓自定义3D旋转loading效果实现教程
本文件讨论的是一种特定类型的自定义View——一个带有3D效果的小球旋转的加载动画（loadding）。以下是对该技术实现中可能涉及的知识点的详细分析。 ### 安卓自定义View 在安卓开发中，自定义View是一种强大的技术...
unity3d 项目开发实践-runningball（小球竞速）
05-19
《Unity3D项目开发实践——RunningBall：小球竞速》 Unity3D是一款强大的跨平台游戏引擎，被广泛应用于游戏开发、虚拟现实(VR)、增强现实(AR)等领域。"RunningBall"是一个基于Unity3D的初学者项目，旨在帮助新手...
逼真的Canvas 3D地球旋转动画特效
06-11
一个非常逼真的Canvas 3D地球旋转动画特效，支持鼠标拖动缩放查看地球，右下角有全屏查看按钮，点击全屏模式查看地球旋转效果。
HTML5 Canvas 旋转的3D立方体动画.rar
07-10
HTML5 Canvas 旋转的3D立方体动画，有纵深感的旋转立方体，渲染的很不错，旋转的动画效果流畅，十分不错，是研究HTML5 Canvas技术的好范例。经测试，IE11兼容，火狐或Chrome、Opera等都有完美表现。
html5 canvas 三维旋转的水晶球特效.rar
07-10
html5 canvas 三维旋转的水晶球特效，除了使用CSS3技术外，还引用了一个regl.min.js特效库，类似jquery的插件库。其实这个球看上去更像是一个光棱球，能看到反射出的光线，另外背景的渲染也很到位，使整体的三维效果更强烈。
基于Three.js和HTML5 Canvas的3D水晶球体
02-19
Canvas 3D动画，它同样是一个基于Three.js制作的动画特效。在Canvas上有一个用许多长度各异的水晶柱形组成的球体，我们还可以用鼠标拖拽球体来从不同角度观察球面，还可以用鼠标滚轮来缩放球面。还有一个特性就是，双击球面可以改变水晶面的颜色，同时水晶面上会随着旋转的角度出现亮光，更加凸显出其3D立体的视觉效果。
超炫酷HTML5 Canvas 3D旋转地球动画
08-23
这是一款基于HTML5 Canvas的3D地球模拟动画，动画以太空作为背景，地球在太空中旋转，同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画，记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画，请看这里。
使用Canvas实现百度贴吧客户端loading动画
在本文中，我们将探讨如何使用HTML5的Canvas API来实现一个类似百度贴吧客户端的加载动画——小球旋转的loading效果。这个效果主要是通过在Canvas上绘制一系列动态变化的图形来实现，给人一种小球在围绕中心旋转的...
在canvas上实现3D效果
热门推荐
马永斌的博客
01-15 1万+
访问地址：http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html DOCTYPE html> html> head> meta charset="UTF-8"> title>lesson1-by-shawn.xietitle> 引入Three.js-->
android canvans 画3d,如何用Canvas做一个3D球
weixin_34236572的博客
05-28 2017
先前在博客园看过Waxes同学在博客园做的3D球的Demo，地址在这把他的Demo pull了下面，很多数学公式，即便在他的博客园里也有两个公式无法解释。因此，这里就写一篇自己思路的文章，教大家如何用canvas画一个3D球。效果如下第一步：画球如何设置球上的点？我的思路是: 给这个球画上经纬线。这里画一个草图需要注意的有经线和纬线之间的间隔必须是一致。最简单的方案就是以角度划分了。也就是A到B,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值