DIY AvatARs!
12MAY 2017
DIY AvatARs!
** posted in: AR, The Body, Tutorials | ** 0
在这个月的晚些时候，我们将参加蒙特利尔社会艺术技术(http://sat.qc.ca/)的IX(浸入式体验)研讨会(http://ix.sat.qc.ca/)。
我们被要求在“身体年”的主题上运行一个基于web的AR或虚拟现实工作室，所以我们决定举办一个“DIY阿凡达”工作室！我们很兴奋地尝试了一场研讨会，将你的身体和身体动作作为输出的一部分，制作个性化的AR化身似乎很合适。此外，支持网络的AR为那些想要学习AR的人打开了可能性，他们可以使用他们可能已经拥有的设备，比如笔记本电脑和非ios智能手机。如果您想尝试一下我们的研讨会的版本，请遵循下面的说明。请随时与我们分享关于工作坊如何运作(或不工作！)的反馈意见。AvatAR-ing快乐!
现在你已经准备好自己的空白网页了，你已经准备好制作你的第一个AR应用了！
- 简单的基于“增大化现实”技术的例子点击编辑 index . html文件
将此HTML代码粘贴到您的文件中:<html>
<head>
<title>My First AR App</title>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded artoolkit="sourceType: webcam;">
<a-marker preset="hiro">
<a-box position="0 0 0" scale="2.5 2.5 2.5" color="blue"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
点击,然后单击视图,点击允许相机,点击一个打印的宏标记(点击这里(https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg)自己打印):
Screen Shot 2017-05-11 at 1.13.47 PM
将你的宏标记放在笔记本电脑前，你应该看到一个蓝色方块出现在标记前:
simple
恭喜!你现在有了一些基本的AR工作！现在让我们尝试改变代码。第9-16行，定义您的图形场景。第11行指定我们要找的是宏标记。第12行了。在第12行，试着改变盒子的位置、大小或颜色。对于颜色,您可以使用Hexidecimal颜色值too.For示例中,如果你改变规模1.5 1.5 1.5,颜色# FA83F7,您应该看到一个小,粉红色的盒子:
simple-modified
让我们试试其他的形状吧！在第12行替换a-box线，其中一个是:<a-cone radius-bottom="0.5" radius-top="0" height="1" color="tomato"></a-cone>or…<a-sphere color="yellow" radius="1.5"></a-sphere>
Screen Shot 2017-05-11 at 2.58.52 PM
或者用两种(或者更多)的线条来代替线条来组合形状:
<a-cone position="0 1 0" radius-bottom="0.5" radius-top="0" height="1" color="tomato"></a-cone>
<a-sphere position="0 -1 0" color="yellow" radius="1.5"></a-sphere>
注意，位置属性有新的值来放置相对于其他的形状。
…如果你想尝试其他的形状或属性，请检查 A-Frame primitive shapes documentation page.
试着在你的额头上用小记号笔记录下。
- 添加3d模型
现在你已经有了一些基本的AR形状作为化身，让我们尝试一些尺寸的3D模型吧！
去你的仪表盘Neocities 点击编辑index . html文件。将此HTML代码粘贴到您的文件中:<html>
<head>
<title>My First AR App</title>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded artoolkit="sourceType: webcam;">
<a-assets>
<a-asset-item id="obj1" src="rijks-buddha.obj"></a-asset-item>
<a-asset-item id="mtl1" src="rijks-buddha.mtl"></a-asset-item>
</a-assets>
<a-marker preset="hiro">
<a-obj-model src="#obj1" mtl="#mtl1" position="0 0 0" rotation="-90 0 0" scale="0.3 0.3 0.3">
</a-obj-model>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
注意，第10-13行和第16-17行是不同的。他们负载.obj和。mtl资产，然后有一个新的a-frame类型，一个应用了。obj的a-objmodel。mtl资源到一个3D模型。
将这三个文件下载到您的桌面上:rijks-buddha.objrijks-buddha.mtlrijks-buddha.jpg
在您的仪表板中，单击上传按钮并上传三个文件
你的* 仪表板 应该是这个样子:
Screen Shot 2017-05-11 at 6.11.34 PM
单击你的编辑指数。html文件然后点击视图按钮你现在应该看到一个3D模型佛头！Rijksmuseum Head of the Buddha model courtesy of Thomas Flynn
buddha
如果你想使用你自己的3D模型，上传你自己的。obj和。mtl和相应的纹理文件，并编辑第11行和第12行中的文件名。需要帮助寻找或创建3D模型吗?我们建议以下应用和存储库网站:
Sketchfab to download freely available models
3dc.io 创建自己的模型
SculptGL 雕刻自己的模型
Scann3D 用安卓手机扫描你自己的模型
Trnio用iOS手机扫描你自己的模型
或者任何你选择的三维建模方法！
使用你自己的3D模型时要记住的重要提示 obj,.collada和。gltf模型是目前支持
确保你的文件是10MB或更少
如果你看不到你的模型，那就等一两分钟吧
如果你仍然看不到你的模型，那就检查一下你的文件拼写。
如果你仍然看不到你的模型，试着改变旋转或缩放比例
为了帮助定位，请确保您的模型最初以0 0 0为中心！centered**
蛋糕面:蛋糕模型index*
cake
a
c
d
f
g
复制此代码并粘贴到您的index.html文件:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded artoolkit="sourceType: webcam;">
<a-marker preset="hiro">
<a-box position="0 0 0" scale="2.5 2.5 2.5" color="blue"></a-box>
</a-marker>
<a-marker preset="kanji">
<a-box position="0 0 0" scale="1.5 1.5 1.5" color="red"></a-box>
</a-marker>
<a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.a" size="1">
<a-box position="0 0 0" scale="1.5 1.5 1.5" color="red"></a-box>
</a-marker>
<a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.b" size="1">
</a-marker>
<a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.c" size="1">
</a-marker>
<a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.d" size="1">
</a-marker>
<a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.f" size="1">
</a-marker>
<a-marker type="pattern" url="https://raw.githubusercontent.com/jeromeetienne/AR.js/master/data/multimarkers/multi-abcdef/patt.g" size="1">
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
simple
无论它说什么，都要填充你自己的对象
- 试着在移动设备上查看你的头像！
animation
🤔
故障排除技巧
如果您根本没有看到任何几何图形，那么请确保您的代码都在标签中。
如果你没有在3D模型上看到一种材料，请确保使用mtlat贡。mtl文件和纯色值的材质属性
如果你没有看到你的3D模型，那就确保它在原来的三维建模软件中以0,0,0为中心
尝试不同的，更大的尺度，也许原来的是很小的?
确保文件大小为10MB或更少，以提高加载时间
如果你需要帮助旋转你的模型，在0处开始所有的旋转并一次改变它们
🔗
有用的链接
A-Frame
AR.js
Neocities
Hexadecimal Colors
A-Frame Documentation – Shapes
A-Frame Documentation – Animations
Sketchfab
3dc.io
SculptGL
Scann3D
TrnioThat’s it!Hope you enjoyed the tutorial, please share with us any AvatARs you make!– Evelyn
网友评论