JavaScript+canvas实现一个旋转的3D球动画效果

已于 2023-11-23 09:30:57 修改
阅读量2.2k 收藏 9
点赞数 12
分类专栏： JavaScript 文章标签： javascript 3d
于 2023-11-22 17:14:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hjd2018/article/details/134554095
版权

效果

在这里插入图片描述

实现过程

1. 获取Canvas元素和设置初始参数

// 获取Canvas元素
const canvas = document.querySelector('#scene');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
const ctx = canvas.getContext('2d');

// 针对高DPI屏幕进行缩放
if (window.devicePixelRatio > 1) {
    canvas.width = canvas.clientWidth * 2;
    canvas.height = canvas.clientHeight * 2;
    ctx.scale(2, 2);
}

// Canvas的宽度和高度
let width = canvas.clientWidth;
let height = canvas.clientHeight;
// 球体旋转的角度
let rotation = 0;
// 存储所有点的数组
let dots = [];

这部分代码主要是获取Canvas元素，并根据设备的DPI进行缩放。然后，定义了一些全局变量，包括Canvas的宽度、高度、球体旋转的角度和存储所有点的数组。

2. 定义一些常量

// 一些常量
const DOTS_AMOUNT = 1000; // 点的数量
const DOT_RADIUS = 2; // 点的半径
let GLOBE_RADIUS = width * 0.7; // 球半径
let GLOBE_CENTER_Z = -GLOBE_RADIUS; // 球心的Z坐标
let PROJECTION_CENTER_X = width / 2; // 画布HTML的X中心
let PROJECTION_CENTER_Y = height / 2; // 画布HTML的Y中心
let FIELD_OF_VIEW = width * 0.8;

这部分代码定义了一些常量，如点的数量、点的半径、球半径等。

3.定义点（Dot）类

// Dot类表示每个点的属性
class Dot {
    constructor(x, y, z, color) {
        this.x = x;
        this.y = y;
        this.z = z;
        this.color = color; // 添加颜色属性

        this.xProject = 0;
        this.yProject = 0;
        this.sizeProjection = 0;
    }

    // 将三维坐标映射到二维画布上
    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(sin, cos) {
        this.project(sin, cos);
        ctx.beginPath();
        ctx.arc(this.xProject, this.yProject, DOT_RADIUS * this.sizeProjection, 0, Math.PI * 2);
        ctx.fillStyle = this.color; // 使用粒子的颜色属性
        ctx.closePath();
        ctx.fill();
    }
}

这部分代码定义了一个Dot类，表示球体上的每个点的属性和方法。包括构造函数、将三维坐标映射到二维画布上的project方法，以及在画布上绘制点的draw方法

4.创建和渲染球体的函数

// 创建所有点的函数
function createDots() {
    // 清空粒子数组
    dots.length = 0;

    // 创建一半蓝色粒子
    for (let i = 0; i < DOTS_AMOUNT / 2; i++) {
        const theta = Math.random() * 2 * Math.PI;
        const phi = Math.acos((Math.random() * 2) - 1);
        const x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
        const y = GLOBE_RADIUS * Math.sin(phi) * Math.sin(theta);
        const z = (GLOBE_RADIUS * Math.cos(phi)) + GLOBE_CENTER_Z;
        dots.push(new Dot(x, y, z, '#981898'));
    }

    // 创建一半红色粒子
    for (let i = 0; i < DOTS_AMOUNT / 2; i++) {
        const theta = Math.random() * 2 * Math.PI;
        const phi = Math.acos((Math.random() * 2) - 1);
        const x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
        const y = GLOBE_RADIUS * Math.sin(phi) * Math.sin(theta);
        const z = (GLOBE_RADIUS * Math.cos(phi)) + GLOBE_CENTER_Z;
        dots.push(new Dot(x, y, z, '#E71751'));
    }
}

这部分代码定义了createDots函数，用于生成一定数量的点，并分别将一半标记为蓝色，一半标记为红色。这里可以根据需求改动，

// 渲染函数，不断更新球体的旋转
function render(a) {
   ctx.clearRect(0, 0, width, height);
   rotation = a * 0.0004;
   const sineRotation = Math.sin(rotation);
   const cosineRotation = Math.cos(rotation);

   // 遍历所有点并绘制
   for (var i = 0; i < dots.length; i++) {
       dots[i].draw(sineRotation, cosineRotation);
   }

   window.requestAnimationFrame(render);
}

这部分代码定义了render函数，用于在每一帧更新球体的旋转角度，并循环绘制所有的点，产生连续的旋转效果。

5.监听窗口大小变化事件

// 当用户调整窗口大小时重新计算参数
function afterResize() {
    width = canvas.offsetWidth;
    height = canvas.offsetHeight;
    if (window.devicePixelRatio > 1) {
        canvas.width = canvas.clientWidth * 2;
        canvas.height = canvas.clientHeight * 2;
        ctx.scale(2, 2);
    } else {
        canvas.width = width;
        canvas.height = height;
    }
    GLOBE_RADIUS = width * 0.7;
    GLOBE_CENTER_Z = -GLOBE_RADIUS;
    PROJECTION_CENTER_X = width / 2;
    PROJECTION_CENTER_Y = height / 2;
    FIELD_OF_VIEW = width * 0.8;

    createDots(); // 重新生成所有点
}

// 变量用于存储用户调整窗口大小时的超时
let resizeTimeout;

// 当用户调整窗口大小时触发的函数
function onResize() {
    resizeTimeout = window.clearTimeout(resizeTimeout);
    resizeTimeout = window.setTimeout(afterResize, 500);
}

// 监听窗口大小变化事件
window.addEventListener('resize', onResize);

这部分代码用于监听窗口大小变化事件，并在用户调整窗口大小时重新计算参数，以保持效果的稳定性。

最后初始化一下就好了

// 初始化点数组
createDots();

// 渲染场景
window.requestAnimationFrame(render);

完整代码

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

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>3D旋转球体</title>
   <style>
       body {
           height: 100vh;
           display: flex;
           justify-content: center;
           align-items: center;
           background: #000;
           margin: 0;
       }

       canvas {
           width: 500px;
           height: 500px;
       }
   </style>
</head>

<body>
   <canvas id="scene"></canvas>
   <script>
       // 获取Canvas元素
       const canvas = document.querySelector('#scene');
       canvas.width = canvas.clientWidth;
       canvas.height = canvas.clientHeight;
       const ctx = canvas.getContext('2d');

       // 针对高DPI屏幕进行缩放
       if (window.devicePixelRatio > 1) {
           canvas.width = canvas.clientWidth * 2;
           canvas.height = canvas.clientHeight * 2;
           ctx.scale(2, 2);
       }

       // Canvas的宽度和高度
       let width = canvas.clientWidth;
       let height = canvas.clientHeight;
       // 球体旋转的角度
       let rotation = 0;
       // 存储所有点的数组
       let dots = [];

       // 一些常量
       const DOTS_AMOUNT = 1000; // 点的数量
       const DOT_RADIUS = 2; // 点的半径
       let GLOBE_RADIUS = width * 0.7; // 球半径
       let GLOBE_CENTER_Z = -GLOBE_RADIUS; // 球心的Z坐标
       let PROJECTION_CENTER_X = width / 2; // 画布HTML的X中心
       let PROJECTION_CENTER_Y = height / 2; // 画布HTML的Y中心
       let FIELD_OF_VIEW = width * 0.8;

       // Dot类表示每个点的属性
       class Dot {
           constructor(x, y, z, color) {
               this.x = x;
               this.y = y;
               this.z = z;
               this.color = color; // 添加颜色属性

               this.xProject = 0;
               this.yProject = 0;
               this.sizeProjection = 0;
           }

           // 将三维坐标映射到二维画布上
           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(sin, cos) {
               this.project(sin, cos);
               ctx.beginPath();
               ctx.arc(this.xProject, this.yProject, DOT_RADIUS * this.sizeProjection, 0, Math.PI * 2);
               ctx.fillStyle = this.color; // 使用粒子的颜色属性
               ctx.closePath();
               ctx.fill();
           }
       }

       // 创建所有点的函数
       function createDots() {
           // 清空粒子数组
           dots.length = 0;

           // 创建一半蓝色粒子
           for (let i = 0; i < DOTS_AMOUNT / 2; i++) {
               const theta = Math.random() * 2 * Math.PI;
               const phi = Math.acos((Math.random() * 2) - 1);
               const x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
               const y = GLOBE_RADIUS * Math.sin(phi) * Math.sin(theta);
               const z = (GLOBE_RADIUS * Math.cos(phi)) + GLOBE_CENTER_Z;
               dots.push(new Dot(x, y, z, '#981898'));
           }

           // 创建一半红色粒子
           for (let i = 0; i < DOTS_AMOUNT / 2; i++) {
               const theta = Math.random() * 2 * Math.PI;
               const phi = Math.acos((Math.random() * 2) - 1);
               const x = GLOBE_RADIUS * Math.sin(phi) * Math.cos(theta);
               const y = GLOBE_RADIUS * Math.sin(phi) * Math.sin(theta);
               const z = (GLOBE_RADIUS * Math.cos(phi)) + GLOBE_CENTER_Z;
               dots.push(new Dot(x, y, z, '#E71751'));
           }
       }

       // 渲染函数，不断更新球体的旋转
       function render(a) {
           ctx.clearRect(0, 0, width, height);
           rotation = a * 0.0004;
           const sineRotation = Math.sin(rotation);
           const cosineRotation = Math.cos(rotation);

           // 遍历所有点并绘制
           for (var i = 0; i < dots.length; i++) {
               dots[i].draw(sineRotation, cosineRotation);
           }

           window.requestAnimationFrame(render);
       }

       // 当用户调整窗口大小时重新计算参数
       function afterResize() {
           width = canvas.offsetWidth;
           height = canvas.offsetHeight;
           if (window.devicePixelRatio > 1) {
               canvas.width = canvas.clientWidth * 2;
               canvas.height = canvas.clientHeight * 2;
               ctx.scale(2, 2);
           } else {
               canvas.width = width;
               canvas.height = height;
           }
           GLOBE_RADIUS = width * 0.7;
           GLOBE_CENTER_Z = -GLOBE_RADIUS;
           PROJECTION_CENTER_X = width / 2;
           PROJECTION_CENTER_Y = height / 2;
           FIELD_OF_VIEW = width * 0.8;

           createDots(); // 重新生成所有点
       }

       // 变量用于存储用户调整窗口大小时的超时
       let resizeTimeout;

       // 当用户调整窗口大小时触发的函数
       function onResize() {
           resizeTimeout = window.clearTimeout(resizeTimeout);
           resizeTimeout = window.setTimeout(afterResize, 500);
       }

       // 监听窗口大小变化事件
       window.addEventListener('resize', onResize);

       // 初始化点数组
       createDots();

       // 渲染场景
       window.requestAnimationFrame(render);
   </script>
</body>

</html>
HJD2018
关注
  • 12
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript+HTML5的Canvas实现Lab单车动画效果
10-23
主要介绍了javascript+HTML5的Canvas实现Lab单车动画效果,涉及javascript使用Canvas配合数学运算实现自行车动画效果,需要的朋友可以参考下
使用JavaScript+canvas实现图片裁剪
12-11
canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通过标签属性或者脚本来设置，默认为300*150; 好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码： 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) {     var c
鸿蒙--canvas实现球面运动动画
最新发布
yihanss的博客
05-08 972
众所周知，我们在手机或者平板上看到的 3D 动画只是在二维的投影，我们只需要计算好运动物体的大小和位置的对应关系，就可以实现类似 3D 的效果。想要了解具体的算法以及映射关系，可以阅读原文。根据参考文章中的计算方式，我们只需要移植一下就行。这里是根据总结中的代码实现的 原文中的关键代码。
26、《每周一点canvas动画》——3D旋转与碰撞
river、的博客
04-17 1899
各位同学实在不好意思，最近忙着面试找工作，耽搁了一个星期。由于前一篇文章的关注的量比较多，让我决定以后的文章尽量多加一些高质量的DEMO和配图。可能这比较耗费时间，但质量才是王道，希望大家给点时间。 上一节我们介绍了重力和屏幕环绕在三维环境下的物理效果。其实三维环境中物体的运动状态，基本上与二维环境一样，主要的运动状态无非也就是那么几个：匀速运动，加速运动，碰撞，旋转等。再往后如果想要制作更加复...
分享7款超炫的HTML5 Canvas 3D动画效果
caobihole
11-19 2183
在以前，想要在浏览器中实现3D动画效果是非常困难的，但是自从HTML5诞生之后，这就变得十分简单了。遗憾的是，目前的浏览器对3D渲染效果还不是非常理想，尤其是渲染速度，可能用chrome和safari会比较理想。下面给大家推荐几个比较炫丽的HTML5 Canvas 3D动画效果，应该能让你眼前一亮。 1、HTML5 3D旋转地球 这是一个使用HTML5 Canvas画布实现的3D旋转的地球模型...
React canvas 抽奖转盘
宏斌的博客
12-03 1021
文章目录地址实现代码仓库代码片段添加选项canvas绘制转盘 地址 实现 思路 颜色对应选项 从选项列表中随机选中一个 根据索引生成相应的选装角度 在完成动画后弹出蒙版显示结果 代码仓库 代码片段 添加选项 const addOption = () => { const input = inputRef.current; if (input) { const content = input.value; if (content) { //
canvas 3D demo
weiweiweb888的博客
12-29 738
canvas
css3加js 3d旋转动画 围绕旋转 根据请求后台的数据动态渲染
weixin_46124693的博客
05-26 1563
3d 围绕旋转3d旋转动画 返回的数据
图片3D旋转(js)
m0_49378755的博客
01-22 1219
图片3D旋转
three.js旋转的球体js特效
ICode联盟
07-01 411
下载地址使用three.js实现的html5旋转的球体特效dd:
可视化2D动画—cavas旋转的圈
牟云飞的博客
10-26 2135
可视化2D动画 1.1 RotatingCircle 介绍 Cavas动画组件RotatingCircle是一个能够自定义颜色、半径、排序方式的圆形组件，具有2D动画效果，可以单独使用也可以与echarts结合。组件由五个圆形图组成，每个部分是独立的参数控制，可以自定义图形宽度、长度、颜色以及半径等。 1.1.1 示例 控件独立使用： echarts组合使用： 1.1.2 代码示例 （1）创建html文件，引入js文件 <script src="js/fatterRotat.
3D地球旋转代码_3D地球旋转代码_
10-02
HTML 3D地球旋转代码，地球顺时针旋转动画。
超炫酷HTML5 Canvas 3D旋转地球动画
08-23
这是一款基于HTML5 Canvas的3D地球模拟动画，动画以太空作为背景，地球在太空中旋转，同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画，记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画，请看这里。
原生js实现3d旋转
11-08
用原生js实现3d旋转,有需要的欢迎下载学习..
3D圆形球体滚动flash动画
07-24
3D圆形球体滚动flash动画是一款滚动的圆球倒影动画下载。
基于Three.js和HTML5 Canvas的3D水晶球体
02-19
Canvas 3D动画，它同样是一个基于Three.js制作的动画特效。在Canvas上有一个用许多长度各异的水晶柱形组成的球体，我们还可以用鼠标拖拽球体来从不同角度观察球面，还可以用鼠标滚轮来缩放球面。还有一个特性就是，双击球面可以改变水晶面的颜色，同时水晶面上会随着旋转的角度出现亮光，更加凸显出其3D立体的视觉效果。
JavaScript canvas实现围绕旋转动画
11-28
使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针 代码demo链接地址：代码demo链接地址 html文件 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <...
Html5+CSS3实现3D旋转效果
04-16
在JavaScript中，我们可以利用`requestAnimationFrame`来动态改变旋转角度，实现动画效果。通过周期性地更新元素的`transform`样式，我们可以看到元素在3D空间中的连续旋转。 结合HTML5的`<button>`或其他交互元素...
three.js+canvas实现酷炫的液态星球旋转动画特效源码.zip
11-01
在本项目中，我们主要探讨的是使用three.js库与HTML5 Canvas元素来创建一个酷炫的液态星球旋转动画特效。这个技术栈结合了JavaScript的强大功能以及WebGL的图形渲染能力，为用户提供了沉浸式的3D体验。接下来，我们...
canvas实现的动态3d旋转球体
05-28
要实现一个动态的3D旋转球体，可以使用HTML5的Canvas和JavaScript来实现。下面是一个简单的实现思路： 1. 首先创建一个Canvas元素，并设置它的宽度和高度。然后获取Canvas的2D上下文对象。 2. 使用JavaScript创建一个球体模型，可以使用Three.js等库来简化这一步骤。 3. 在Canvas上绘制球体。可以使用Canvas的API来绘制球体，或者使用CanvasTexture将球体模型转换为纹理贴图，然后通过Canvas绘制纹理贴图。 4. 使用JavaScript实现球体的旋转动画。可以使用requestAnimationFrame来实现平滑的动画效果。 下面是一个示例代码，可以参考一下： ```html <canvas id="canvas"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight; // 创建球体模型 const geometry = new THREE.SphereGeometry(200, 32, 32); const material = new THREE.MeshBasicMaterial({ color: 0xffffff, map: new THREE.CanvasTexture(ctx.canvas), }); const sphere = new THREE.Mesh(geometry, material); // 添加球体到场景中 const scene = new THREE.Scene(); scene.add(sphere); // 创建相机 const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.position.z = 500; // 创建渲染器 const renderer = new THREE.WebGLRenderer({ canvas }); renderer.setSize(width, height); // 实现球体的旋转动画 function animate() { requestAnimationFrame(animate); sphere.rotation.x += 0.01; sphere.rotation.y += 0.01; // 绘制球体纹理贴图 ctx.clearRect(0, 0, width, height); ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; ctx.fillRect(0, 0, width, height); ctx.drawImage(renderer.domElement, 0, 0); material.map.needsUpdate = true; renderer.render(scene, camera); } animate(); </script> ``` 这段代码使用Three.js创建了一个球体模型，并在Canvas上绘制了这个球体的纹理贴图。然后使用requestAnimationFrame实现了球体的旋转动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值