2D和3D渲染、轻量、高效、MVVM模式的渐进式canvas渲染库

于 2022-11-11 21:13:07 发布
阅读量671 收藏
点赞数
分类专栏： 毕业设计 博客 源码分享 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MMKJSH/article/details/127813286
版权
源码分享 同时被 3 个专栏收录
291 篇文章 66 订阅
订阅专栏
毕业设计
223 篇文章 19 订阅
订阅专栏
博客
80 篇文章 2 订阅
订阅专栏

真正的大师,永远都怀着一颗学徒的心！

一、项目简介

2D和3D渲染、轻量、高效、MVVM模式的渐进式canvas渲染库

二、实现功能

  • 支持微信小游戏（插件）

  • 支持微信小程序（插件）

  • 支持各种3d模型（fbx模型、3ds模型、mmd模型等）

  • 支持粒子

  • 支持动画

  • 支持图片渲染预处理

  • 支持嵌套与继承

  • 支持事件、文本

  • 支持状态钩子

  • 支持各种组件

三、技术选型

  • webgl

  • typescript

  • javascript

  • canvas

四、界面展示

五、源码地址

私信回复：渲染库

程序员小美
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
light-mvvm：JavaScript 超轻量级 MVVM 双向数据绑定插件(迷你Vue)
王佳斌
02-08 1522
前言 Github 项目地址：https://github.com/GitHubwjb/light-mvvm，赠人 star ，手留余香噢~谢谢！ 你可以把 light-mvvm 看作是 Vue 框架中抽离出来的双向数据绑定解决方案，虽然这并不权威与完整，但确最简单易懂的描述方式。 它是一个仅有 9KB(未压缩) 的迷你 MVVM 架构思想的轻量级插件，light-mvvm 仅仅提供了视图(V...
Canvas 3D Javascript来在浏览器中直接显示3D场景的库
11-28
用来利用Javascript来在浏览器中直接显示3D场景的库
基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统
weixin_30480651的博客
01-22 189
前言 大家好，老郑我又回来了。这一期为大家带来一个非常好玩的 demo，我们制作一套自己的 3D 管道控制系统，运用了（http://www.hightopo.com）HT 的 Graph3dView 组件通过对 WebGL 底层技术的封装，与 HT 其他组件一样，基于 HT 统一的 DataModel 数据模型来驱动图形显示。 效果图 此为 2D 主界面： 此为 3D 界面的部分...
html5的canvas实现几何模型3D运动动画效果.zip
07-11
JS片段： [removed] var {atan2,sqrt,sin,cos,PI,acos} = Math; function project3D(x,y,z,vars){ x-=vars.camX,y-=vars.camY,z-=vars.camZ; p=atan2(x,z),d=sqrt(z*z x*x),x=sin(p-vars.yaw)*d,z=cos(p-vars.yaw)*d; p=atan2(y,z),d=sqrt(y*y z*z),y=sin(p-vars.pitch)*d,z=cos(p-vars.pitch)*d; n=-9,b=1,l=9,d=1,e=0,f=0,g=x,h=z,k=(h-f)*(l-n)-(g-e)*(d-b),m=((g-e)*(b-f)-(h-f)*(n-e))/k; return {x:vars.cx (n m*(l-n))*vars.scale,y:vars.cy y/z*vars.scale,d:sqrt(x*x y*y z*z)}; } function elevation(x,y,z){ return acos(z / sqrt(x*x y*y z*z)); } function subdivide(shape,subdivisions){ var t=shape.segs.length; for(var i=0;i<t; i){ var x1=shape.segs[i].a.x; var y1=shape.segs[i].a.y; var z1=shape.segs[i].a.z; var x2=(shape.segs[i].b.x-x1)/subdivisions; var y2=(shape.segs[i].b.y-y1)/subdivisions; var z2=(shape.segs[i].b.z-z1)/subdivisions; shape.segs[i].b.x=x1 x2; shape.segs[i].b.y=y1 y2; shape.segs[i].b.z=z1 z2; var x3=x2; var y3=y2; var z3=z2; for(var k=0;k<subdivisions-1; k){ shape.segs.push(new Seg(x1 x2,y1 y2,z1 z2,x1 x2 x3,y1 y2 y3,z1 z2 z3)); x2 =x3; y2 =y3; z2 =z3; } } } 这是一款很具空间感的基于html5 canvas实现的几何模型3D运动动画效果，好看的3D模型动画特效。
MyLittleCanvas
未来很长，但我会努力的走下去。
11-22 206
MyLittleCanvas 项目地址：florent37/MyLittleCanvas  简介：You find canvas hard to use ? try MyLittleCanvas :) Don't work with canvas methods, use objects instead ! 更多：作者   提 Bug    标签：  
超快的2d渲染引擎支持webgl和canvas渲染让游戏制作变得超级容易
08-10
本文将深入探讨“超快的2D渲染引擎”及其对游戏制作的显著影响，重点关注其对WebGL和Canvas的支持。 首先，让我们理解什么是2D渲染引擎。2D渲染引擎是一种软件，它允许开发者创建和管理2D图形，包括图像、动画和...
vue框架渐进性的理解和mvvm模式的理解
01-08
Vue框架的渐进性理解与MVVM模式解析 Vue.js是一个非常流行的前端JavaScript框架，尤其在中国...对于开发者来说，理解Vue的渐进式特性和MVVM模式的工作原理，有助于更好地利用这个框架来构建高性能、可维护的应用程序。
Unity-MVVM:适用于Unity3D的轻量级MVVM框架
05-04
适用于Unity3D的简单轻量级MVVM框架 有关MVVM的背景信息，请查看 这个项目的目标是实现我在开发WPF应用程序时了解和喜爱的一些概念，主要是它们构建起来非常快捷，并且易于维护。 它还尝试解决我在过去几年中使用...
avalon：小而美，轻量级前端MVVM框架
02-26
这几年，国内在造轮子上非常狂热，几乎每个大公司都有自己的框架，阿里的Kissy和Arale，腾讯的JX，百度的Tangram，360的QWrap，甚至每个部门每个小组都有自己的框架或库。但纵观它们在GitHub上极少的Star或Pull...
MVVM设计模式在Unity3D中的设计与实施
02-26
谈起MVVM设计模式，可能第一映像你会想到WPF/Sliverlight，他们提供了的数据绑定（DataBinding），命令（Command）等功能，这让MVVM模式得到很好的实现。MVVM设计模式顾名思义，通过分离关注点，各司其职。通过...
基于 HTML5 Canvas 的 3D 模型贴图问题
weixin_34029680的博客
12-06 298
之前注意到的一个例子，但是一直没有沉下心来看这个例子到底有什么优点，总觉得就是一个 list 列表，也不知道右边的 3d 场景放两个节点是要干嘛，今天突然想起来就仔细地看了一下这个例子的代码，实际操作中应该还是有用处的，就跟大家分享一下。 本例地址： http://hightopo.com/guide/gui... 实现图如下，看起来略有...
canvas组件的三种渲染模式
外星阳的地球
07-30 5586
canvas组件的Render mode属性中有三种渲染模式1.Screen Space-overlay : 将UI渲染到屏幕空间，是所有物体的最前面，同类canvas对象可以通过sort order属性来设置渲染顺序（值越大，越后渲染，也就显示在最前面）。2.Screen Space-camera : 将UI渲染到视距空间，此模式可以渲染3d模型，或者粒子特效。3.World Space :
使用QT的canvas3d来加载3d模型
SeeSun_go的博客
12-27 3263
需求：接到一个任务要写展示一个设备的3D模型。串口连接设备返回仰俯角等数据，目的让展示里的模型跟着设备转动。 确定开发框架： 我原本是做VS开发的，以前用开始用MFC框架-->C#Winform-->duilib做界面。在接触的这几个技术并没有发现有3D的，第一反应用MFC做这个这个软件可能要疯吧。Duilib吧百度也一下没有找到做3D的例子（还是一个没有详细文档的开源库用了之后发现各种坑）。好在最近要学习QT，QTCreator的例子里面就有个3D展示一个手机不停旋转的。对的我就要抄那个这个
在canvas上实现3D效果
马永斌的博客
01-15 9897
访问地址：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-->
吐血推荐一大波让你直呼哇塞的Canvas库
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-11 5679
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群Canvas技术的诞生可谓是让绘图技术如虎添翼，本文将推荐一系列Canvas图形绘制、流程图、组织图、甘特图、全景图...
推荐一大波让你直呼哇塞的Canvas库
前端程序猿的博客
02-23 5979
前言 Canvas技术的诞生可谓是让绘图技术如虎添翼，本文将推荐一系列Canvas图形绘制、流程图、组织图、甘特图、全景图、3D库、VR/AR、图像编辑等方面的库，希望助你在Canvas绘图时寻得一把趁手的利器。 同时，也将Canvas的相关资源进行的收录整理分类，更多的资源请关注awesome-canvas[1]，项目地址 github.com/chinaBerg/a…[2] 。目前该库持续维护中，已收录大约200+的Canvas库，以及资源网址、插件、书籍、博客等资源。 图形处理库 图..
js_canvas_3D库
HSJ0170的博客
12-25 1335
https://canvasjs.com/javascript-charts/ http://fabricjs.com/demos/ https://threejs.org/
MVVM模式下的轻量级UI库：Knockout应用开发详解
Knockout应用开发指南是一份详细介绍如何使用轻量级前端UI类库Knockout构建基于Model-View-ViewModel (MVVM)模式的JavaScript应用的教程。MVVM是一种软件设计模式，它将数据模型、视图和视图模型分离，使得前端开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员小美

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值