发帖
雷达卡
Web虚拟现实：A框架（从图像创建3D模型）
虚拟现实是指由计算机生成的模拟，它允许用户使用特殊的耳机进行交互。简而言之，它是由计算机创建的替代现实，并且头戴式耳机使人沉浸在该现实中。据联合市场研究公司（Allied Market Research）称，到2026年，VR内容创作市场将超过450亿美元。
VR被广泛用于游戏和娱乐行业。它还在医学领域得到广泛应用（例如，帮助阿尔茨海默氏病患者的康复，治疗PTSD疾病）。VR模拟可轻松用于培训目的，教学，并为学习者提供身临其境的技能发展空间。建筑仿真，宇航员培训，教学解剖学或化学只是广泛使用VR的少数领域。
如今，借助各种可用的框架，开发VR应用程序非常容易。在本文中，我们将重点介绍webVR，这是一个开放式规范，可在您的浏览器中体验虚拟现实。您可以使用流行的耳机（例如Google Cardboard）轻松查看开发的应用程序。为了我们的目的，我们将使用一个称为A-frame的开源Web框架。A框架是一个非常不错且易于使用的Web框架，可用于创建VR和AR体验。
我们将使用Python和A框架从2D图像创建3D模型。 输入将是这样的图像：
一个框架
使用此图像，我们将创建可在webVR中查看的3D模型。
一个框架
我们还可以对此进行动画处理：
一个框架
另外，我在《星夜》中尝试了同样的方法。在VR中，我们的输出如下：
虚拟现实
Python魔术
现在，我们对输出确实有了一个清晰的想法。让我们用Python消磨时间。
Step1（加载图片）
import cv2 as cv
导入matplotlib.pyplot作为plt
aa = cv.imread（r'C：UsersJojoDesktopprojectsminecraftpik.png'）
＃您可以根据需要更改图像路径
aa = cv.resize（aa，（32，32），插值= cv.INTER_CUBIC）
aa = cv.rotate（aa，cv.ROTATE_90_CLOCKWISE）
此处的图像已调整大小，因为很难渲染具有数百万像素的3D模型。
虚拟现实
如果您在此处看到图像，除了皮卡丘（Pikachu）像素外，还有很多从灰白色到白色的像素，我们不需要它们。我们将其转换为gray（128
第二步（图像处理）
对于范围内的我（aa.shape [0]）：
对于范围（aa.shape [1]）中的j：
if aa[i
aa[i
aa[i
aa[i
#we are converting pixels with R
Step3(Virtual Reality)
The A-frame documentation is a very good place to start with A-frame and Virtual reality(https://aframe.io/). The idea here is to iterate through the whole image and select pixels that are not gray(128
The basic syntax for an a-box is: <a-box color=”blue” position=”2 2 2″ ></a-box>
ind = 1
strlis = []
for i in range(aa.shape[0]):
for j in range(aa.shape[1]):
if aa[i
str1 = '<a-box id="new" color="'
colo = '#%02x%02x%02x' % (aa[i
str2 = colo+'"'+' position='
str3 = '"'+str(i)+' '+str(j)+' '+str(ind)+'"'+'></a-box>'
strlis.append(str1+str2+str3)
ind = ind + 1
The list named strlis contains a-frame code for ‘a-box’es. We will write them to a new file.
myfile = open(r”C:UsersJojoDesktopprojectsminecraftpik2.txt”
for line in strlis:
myfile.write(“%sn” % line)
myfile.close()
The text file contains all the syntax for required ‘a-box’es. We should put them inside the a-scene tag.
A-Frame Visualization
虚拟现实
For instance
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component"></script>
</head>
<body>
<a-scene>
<a-box id="new" color="#7e6228" position="0 13 1" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
<a-box id="new" color="#040404" position="1 12 2" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
<a-box id="new" color="#040404" position="1 14 2" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
<a-box id="new" color="#050500" position="2 11 3" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
<a-box id="new" color="#fef600" position="2 12 3" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
<a-box id="new" color="#7d6426" position="2 14 3" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
<a-box id="new" color="#010404" position="3 10 4" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
......................
<a-box id="new" color="#080301" position="31 19 32" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
<a-box id="new" color="#040404" position="31 20 32" animation="property: position; to: 0 0 0; dur: 7000; easing: linear; loop: true"></a-box>
<a-sky color="#6EBAA7"></a-sky>
<a-camera><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
I have not included the whole code here though. But you can find it in my Github repo:
(https://github.com/jojo96/AFrame3D).
The same method can be used to create pixel art in A-Frame. An example:
To run WebVR in your favorite browser
A-Frame Code
How to get the A-Frame code?
The skeleton code is:
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@4.2.1/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component"></script>
</head>
<body>
<a-scene>
<a-camera><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
</html>
Run any one of the files in the notebook folder from my Github repo and copy the text from the resulting text file. Paste the text after opening <a scene> tag. The Github repo is here.
题库
提升卡
置顶卡
沉默卡
变色卡
抢沙发
千斤顶
显身卡
京公网安备 11010802022788号
