专栏首页MixLab科技+设计实验室生成专属于你的人工智能书【3D生成器】

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

1

A-frame 的使用指南

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

1.1 vr-mode-ui组件

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

<a-scene vr-mode-ui="enabled: false" ></a-scene>

1.2 相机相关的设置

camera 组件

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

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

look-controls 组件

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

position 组件

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

<a-entity position="0 1.6 0" camera="fov:45" look-controls></a-entity>

1.3 坐标系

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

<a-sphere position="1 1.25 -6" radius="1.25" color="#EF2D5E"></a-sphere>

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

<html>

<head>

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>

</head>

<body>

<a-scene vr-mode-ui="enabled: false" >

<a-entity position="0 1.6 0" camera="fov:45" look-controls></a-entity>

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" ></a-box>

<a-sphere position="1 1.25 -6" radius="1.25" color="#EF2D5E"></a-sphere>

<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>

<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

<a-sky color="#ECECEC"></a-sky>

</a-scene>

</body>

</html>

中场休息下♨️

2

书籍封面生成

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

需要先定义几个函数:

书名生成 getTitle

书籍难度生成 getLevel

配色生成 getColors

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

function getColors() {

var colors = [
["#240041", "#900048"],
["#1C1124", "#684656"],
["#394A51", "#7FA99B"],
["#22559C", "#F27370"],
["#FF6D24", "#4E413B"],
["#F0CA6D", '#F7F2C1'],
["#A13939", "#E75151"],
["#657DC4","#838ED9"],
["#461B93","#6A3CBC"],
["#4A3333","#98D083"],
["#AD1457","#F06292"],
["#18587A","#FC624D"]
];

var index = Math.abs(Math.ceil(Math.random() * colors.length - 1));

return colors[index];

};

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

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

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

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

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

5 生成背景图

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

function mathNormal(x, mu, sigma) {

mu = mu || 0;
sigma = sigma || 1;

var res = (1 / (Math.sqrt(2 * Math.PI) * sigma)) * (Math.exp(-Math.pow(x - mu, 2) / (2 * Math.pow(sigma, 2))));

return res;

};

function randomStandardNormal() {

var isTarget = false,res;

while (!isTarget) {

var a = randomRange(-1, 1);
var b = randomRange(0, 1);

if (b <= mathNormal(a)) {

isTarget = true;
res = [a, b];

};

};

return res;

};

本文分享自微信公众号 - 无界社区mixlab(Design-AI-Lab),作者:shadow

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • DIY一个Sketch插件,生成猫猫狗狗的全家福

    最近朋友圈都在玩的全家福: ? 看了下是使用 cocos2D 引擎制作的, http://www.cocos.com/creator 主要是图片合成,利用前端...

    mixlab
  • 全民刷军装背后的AI技术及简单实现

    昨天有Design-AI-Lab用户后台留言,问为什么换军装的h5这么火,但没见到有技术文章分析如何实现。 我回复说,大概是比较简单吧,主要工作是图像合成。 ...

    mixlab
  • 【图像处理篇】自动识别手写数字web应用05

    往期的4篇已经把Docker+Keras+Flask+JS的全栈+深度学习介绍完整了: 自己动手做一个识别手写数字的web应用01 自己动手做一个识别手写数字的...

    mixlab
  • win10 uwp 使用 asp dotnet core 做图床服务器客户端 服务器端客户端

    本文告诉大家如何在 UWP 做客户端和 asp dotnet core 做服务器端来做一个图床工具

    林德熙
  • shell中的括号(小括号,中括号,大括号)

        ①命令组。括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用。括号中多个命令之间用分号隔开,最后一个命令可以没有...

    雪影
  • 同义词搜索是如何做到的?

    前面几个章节我们使用到了 Lucene 的中文分词器 HanLPAnalyzer,它并不是 Lucene 自带的中文分词器。Lucene 确实自带了一些中文分词...

    老钱
  • 利用MapabcAPI实现基于浏览器的地理定位

    现在互联网中有了越来越多的地理位置服务,正在制定中的HTML5规范也试图在浏览器中内置嵌入地理位置共享服务,而且幸运的是,我们已经能够在Firefox 3.5+...

    大江小浪
  • AsyncTask实现机制

    execute先调用onPreExecute()(可见,onPreExecute是自动调用的)然后调用exec.execute(mFuture)

    提莫队长
  • [UWP]用Win2D实现镂空文字

    后来试玩了Win2D,这次就用Win2D实现文字的镂空效果,配合PointLight做一个内敛不张扬的番茄钟。

    dino.c
  • Spring MVC介绍(三)之 Annotation解析以及完整的执行流程

    工作中对于Spring MVC我们最常用的还是使用注解的方式,那么对于注解Spring MVC的如何处理的?

    zoro

扫码关注云+社区

领取腾讯云代金券