vue3使用echarts和Pixi.js打造一个令人惊叹的3D图在线展示

news2024/10/6 4:02:35

Alt

本文由ScriptEcho平台提供技术支持

项目地址:传送门

基于 Pixi.js 的动态图形渲染技术

应用场景介绍

Pixi.js 是一款功能强大的 2D 渲染引擎,可用于创建交互式图形、游戏和动画。它因其高性能、可扩展性和跨平台兼容性而受到开发者的欢迎。本代码示例展示了如何在 Vue.js 应用程序中使用 Pixi.js 加载和渲染动态图形。

代码基本功能介绍

本代码主要实现了以下功能:

  • 使用 Pixi.js 加载和渲染图像资源
  • 创建 Sprite 对象并将其添加到舞台
  • 设置 Sprite 对象的锚点和位置
  • 根据屏幕大小调整应用程序尺寸

功能实现步骤及关键代码分析说明

1. 加载 Pixi.js 和相关资源
let jsUrls = [
  'https://registry.npmmirror.com/pixi.js/8.1.1/files/dist/pixi.min.js',
]
let styleUrls = [
  'https://registry.npmmirror.com/jsxgraph/1.8.0/files/distrib/jsxgraph.css',
]

await Promise.all(styleUrls.map((styleUrl) => loadStyle(styleUrl)))
await Promise.all(jsUrls.map((jsUrl) => loadJavascript(jsUrl)))

这段代码使用 loadJavascriptloadStyle 函数加载 Pixi.js JavaScript 库和相关的 CSS 样式表。Promise.all 函数确保所有资源都加载完毕后再继续执行。

2. 创建 Pixi.js 应用程序
const app = new PIXI.Application()
app
  .init({
    background: '#1099bb',
    resizeTo: window,
    preserveDrawingBuffer: true,
  })
  .then(() => {
    // Append the application canvas to the document body
    document.getElementById('canvas').appendChild(app.canvas)
  })

这段代码创建一个新的 Pixi.js 应用程序,并对其进行初始化。它设置背景颜色、将应用程序大小调整为窗口大小,并启用绘图缓冲区保留。然后,它将应用程序的画布附加到 DOM 中。

3. 加载和渲染图像资源
PIXI.Assets.add({
  alias: 'flowerTop',
  src: 'https://pixijs.com/assets/flowerTop.png',
})
PIXI.Assets.add({
  alias: 'eggHead',
  src: 'https://pixijs.com/assets/eggHead.png',
})

const texturesPromise = PIXI.Assets.load(['flowerTop', 'eggHead'])

这段代码使用 Pixi.js 的资产管理器加载图像资源。它添加了两个别名,分别指向两张图片的 URL。然后,它加载这些资产并返回一个 Promise,该 Promise 在资源加载完毕后解析。

4. 创建 Sprite 对象并添加到舞台
texturesPromise.then((textures) => {
  const flower = PIXI.Sprite.from(textures.flowerTop)
  flower.anchor.set(0.5)
  flower.x = app.screen.width * 0.25
  flower.y = app.screen.height / 2
  app.stage.addChild(flower)

  const egg = PIXI.Sprite.from(textures.eggHead)
  egg.anchor.set(0.5)
  egg.x = app.screen.width * 0.75
  egg.y = app.screen.height / 2
  app.stage.addChild(egg)
})

这段代码使用从资产管理器加载的纹理创建两个 Sprite 对象。它设置了 Sprite 对象的锚点(即旋转和缩放的中心点)和位置。然后,它将 Sprite 对象添加到应用程序的舞台,使其在画布上可见。

总结与展望

开发这段代码的过程让我深入了解了 Pixi.js 的基本概念和功能。我学会了如何加载和渲染图像资源、创建 Sprite 对象并将其添加到舞台。

未来,该代码可以进一步扩展和优化,例如:

  • 添加交互性,允许用户拖动或旋转 Sprite 对象

  • 创建动画,使 Sprite 对象移动或改变大小

  • 使用粒子系统创建复杂的效果

    更多组件:

    在这里插入图片描述


    在这里插入图片描述

    获取更多Echos

    本文由ScriptEcho平台提供技术支持

    项目地址:传送门

    扫码加入AI生成前端微信讨论群:

扫码加入群聊

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1898855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

博奥龙/2024年部分高分文献及引用试剂展示

01IF:50.5标题7-Dehydrocholesterol dictates ferroptosis sensitivityDOI10.1038/s41586-023-06983-9期刊Nature引用试剂BF03008HRP-山羊抗兔IgG(HL)02IF:14.7标题Aggresome formation promotes ASK1/JNK signaling activation and stemness maintenanc…

海南云亿商务咨询有限公司专业电商团队值得信赖

在当今数字化浪潮下,电商行业蓬勃发展,抖音作为短视频领域的佼佼者,更是为电商行业带来了全新的机遇。海南云亿商务咨询有限公司凭借对市场的敏锐洞察和丰富的经验积累,专注于抖音电商服务,致力于为广大企业和个人提供…

【24年一博研讨会总结】BJ0705

1.工艺边据PCB边缘 >5mm. 2.IPC-A-600G Pitch < 1.25mm H<0.025mm,小于0.4mm,取消丝印框&#xff0c;防止锡膏不匀虚焊&#xff1b; 3.表面镀金与镍厚度 金厚度 um镍厚度 um0.0192.7830.0213.3610.0453.6640.0314.378 4.多层板&#xff0c;层间距>20mil 可以认…

国内外AI大模型价格一览

海外AI大模型&#xff0c;以OpenAI、Google等大厂商为主。 国内AI大模型的价格 海外较国内还是一个量级的价格差&#xff0c;相信年底还会有一波降价&#xff0c;至到达到普惠的条件。

多特征线性回归

目录 一、多特征符号意义说明&#xff1a;二、多特征模型表示&#xff1a;三、Numpy向量表示、内积计算&#xff1a;1.向量表示&#xff1a;2.内积计算&#xff1a; 四、多元线性回归梯度下降算法&#xff1a; 一、多特征符号意义说明&#xff1a; x下标j&#xff1a;表示第j个…

c++ 构造,析构,拷贝,移动构造函数

文章目录 概述1.构造函数2. 拷贝构造函数3.移动构造函数4.析构函数 例子QTUE4/5 c 小结 概述 对于c来说&#xff0c;最基础的是类。对于一个类来说&#xff0c;主要由以下函数构成。如下&#xff1a; 构造函数拷贝构造函数移动构造函数析构函数 当然&#xff0c;还有一个操作…

API字符串

API&字符串 文章目录 API&字符串API&#xff08;Application Programming Interface&#xff09;&#xff1a;简单理解&#xff1a;已经学习过的APIAPI帮助文档 字符串String&#xff0c;StringBuilder&#xff0c;StringJonierString概述注意点创建String对象的两种方…

项目一 nfs 共享服务器 Haproxy 代理 Keepalive 高可用集群

深入理解程序的数据存储 配置NFS服务器 配置ansible环境

Chatopera 聊天机器人讲师班 第一季,传授制作有趣有用的聊天机器人 | Chatopera

课程亮点 传授制作有趣有用的聊天机器人 课程直播时间 2024 年 07 月 03 日 ~ 07 月 09 日 上课形式 使用腾讯会议直播授课&#xff0c;可回放观看视频。 课程大纲 时间课程07 月 03 日 10:00 AM ~ 11:00 AM第一章 为什么要学习定制聊天机器人&#xff1f;07 月 03 日 1…

Robot Framework

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;…

微信小程序的校园点餐系统-计算机毕业设计源码56979

摘 要 近年来&#xff0c;随着移动互联网的迅猛发展&#xff0c;微信小程序作为一种轻量级应用形式逐渐受到人们的关注和喜爱。在此背景下&#xff0c;各行各业开始向微信小程序上线他们的服务&#xff0c;其中包括餐饮行业&#xff0c;在校园内&#xff0c;学生、教职工和访客…

基于docker的prometheus+grafana+altermanager+prometheus-webhook-dingtalk钉钉报警

一、各软件功能简介 prometheus&#xff1a;Prometheus(是由go语言(golang)开发)是一套开源的监控&报警&时间序列数 据库的组合。主要优点&#xff1a;外部依赖安装使用超简单、系统集成 多等 grafana&#xff1a;Grafana 是一款采用 go 语言编写的开源应用&#xff0…

redis学习(005 java客户端 RedisTemplate学习)

黑马程序员Redis入门到实战教程&#xff0c;深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 总时长 42:48:00 共175P 此文章包含第16p-第p23的内容 文章目录 java客户端jedisSpringDataRedis项目实现hash哈希操作 java客户端 jedis 测试 ps:如果连接不上&…

PLC基础知识

1.PLC中的数据寄存器地址D表示存数据的地方。 2.PLC的物理存储器的规定&#xff1a;PLC存储器以字节为单位&#xff08;Byte&#xff09;&#xff0c;存储单元以位&#xff08;Bit&#xff09;、字节&#xff08;B&#xff0c;8Bit&#xff09;、字&#xff08;W&#xff0c;1…

jenkins搭建部署前端工程 ,从0到1

一.java环境配置 1 安装tomcatjdk17 这个也行 3 安装maven3.3.9 安装教程参考 4 安装Jenkins 下载地址 参考教程 二、相关配置 1 访问http://localhost:8080/jenkins&#xff0c;进入Jenkins初始化页面&#xff0c;第一次启动时间可能有点长&#xff0c;耐心等待。进入成功后会…

软考《信息系统运行管理员》-2.5信息系统运维管理系统与专用工具

2.5信息系统运维管理系统与专用工具 信息系统运维管理系统功能框架 信息系统运维管理系统是站在运维管理的整体视角&#xff0c;基于运维流程&#xff0c;以服务为导向的业务 服务管理和运维管理支撑平台&#xff0c;提供统一管理门户&#xff0c;最终帮助运维对象实现信息系…

(2024)KAN: Kolmogorov–Arnold Networks:评论

KAN: Kolmogorov–Arnold Networks: A review 公和众与号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 1. MLP 也有可学习的激活函数 2. 标题的意义 3. KAN 是具有样条基激活函数的 M…

代码随想录算法训练营第四十四天|188.买卖股票的最佳时机IV、309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费

188.买卖股票的最佳时机IV 题目链接&#xff1a;188.买卖股票的最佳时机IV 文档讲解&#xff1a;代码随想录 状态&#xff1a;不会 思路&#xff1a; 在股票买卖1使用一维dp的基础上&#xff0c;升级成二维的即可。 定义dp[k1][2]&#xff0c;其中 dp[j][0] 表示第j次交易后持…

[C++]——继承 深继承

一、继承概念 (1)、定义 继承(inheritance)机制是面向对象程序设计使代码复用最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能。继承呈现了面向对象程序设计的层次结构&#xff0c;体现了由简单到复杂的认知过程&#xff0c;是类…

Hudi 写入流程(图)

前言 主要为之前总结的源码文章补充流程图。总结一下整体流程说明 之前以Java Client为例,总结了 Insert 源码的整体流程及部分源码,由于各种原因,没有总结完。长时间不看这方面的源码,容易忘记,之前没有总结流程图,现在回忆起来比较麻烦,不如看流程图方便快捷。所以先补…