生成专属于你的人工智能书3D生成器

生成这么一本 3D 的书籍,涉及3维引擎、图案生成、文字排版等内容。本文选取了 A-frame 作为3维引擎,图案生成及文字排版部分使用原生的 canvas 操作。完成此项目的要求具备设计能力及代码能力。

https://aframe.io/

1

A-frame 的使用指南

a-frame 是基于 threejs 的 web AR 库,也可以当 threejs 的简化版本使用,a-frame 只需写 html 标签就可以实现3维空间的操作,非常适合快速新手上手。下面介绍几个本文使用到的知识点。

1.1 vr-mode-ui组件

仅适用于 元素,控制是否显示进入 VR 模式的 UI。这边我们关闭下,代码:

1.2 相机相关的设置

camera 组件

fov 视野角越大,场景中的物体越小;

fov 视野角越小,场景中的物体越大。

look-controls 组件

添加上去可以触屏移动摄像机视角。

position 组件

在 position 里设置相机的位置,例如:

1.3 坐标系

注意 position 组件里的坐标写法与对应的空间关系,这块建议多调整坐标试验几次熟悉。

完整的示例代码,更多请参考官方api文档:

中场休息下♨️

2

书籍封面生成

此部分采用的是 canvas 的原生开发,通过 canvas 生成图案,后导出 base64 作为模型的贴图。

需要先定义几个函数:

书名生成getTitle

书籍难度生成 getLevel

配色生成 getColors

此处采用的逻辑都是随机从库里数据(随机是最好的方法),例如配色的生成代码:

介绍下背景图的生成逻辑:

1 根据封面的尺寸,等分,生成网格

2 随机生成几个六边形五边形

3 计算生成的六边形及五边形按照正态分布随机摆放的位置及大小

4 微调六边形及五边形的位置,避让文字内容

5 生成背景图

比较重要的算法就是按照正态分布产生随机数的算法,代码:

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180504G1CLP400?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注腾讯云开发者

领取腾讯云代金券