页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

基于canvas & SVG网页版3D引擎Zdog

图像相册 HTML我帮您 22天前  次浏览

zdog是一个圆形、扁平、设计师友好的3D引擎。如果想做一个HTML网页版的电子游戏,需要一个3D引擎,但大多数引擎对很多人来说太强大和复杂了。ZDOG可以设计和显示简单的3D模型,而不需要太多开销。Zdog 灵感来自 Dogz ,Zdog 使用相同的原理。 它使用<canvas>或<svg>中的2D绘图API渲染所有形状。实际就是旋转一个球体的原理,这是一个简单而有效的技巧。

基于canvas & SVG网页版3D引擎Zdog

let isSpinning = true;

let illo = new Zdog.Illustration({
  element: '.zdog-canvas',
  zoom: 4,
  dragRotate: true,
  // stop spinning when drag starts
  onDragStart: function() {
    isSpinning = false;
  },
});

// circle
new Zdog.Ellipse({
  addTo: illo,
  diameter: 20,
  translate: { z: 10 },
  stroke: 5,
  color: '#636',
});

// square
new Zdog.Rect({
  addTo: illo,
  width: 20,
  height: 20,
  translate: { z: -10 },
  stroke: 3,
  color: '#E62',
  fill: true,
});

function animate() {
  illo.rotate.y += isSpinning ? 0.03 : 0;
  illo.updateRenderGraph();
  requestAnimationFrame( animate );
}
animate();


相关链接

发表评论