AFrame内置了很多很酷的东西,比如对Gamepad等控制器的支持。
在他们的文档中,他们建议使用该组件,该组件将根据浏览器可用的内容选择正确的设备组件。在Frame v1.0.4的桌面模式下,这对我来说似乎根本不起作用
我正在使用
Chrome v81.0.4044.122(windows)
xbox游戏机
aframe v1.0.4(撰写本文时的最新npm包)
我可以在直接查询浏览器gamepad api时找到gamepad
我这样声明我的实体:在桌面模式下,并且存在组件跟踪控件web
我在研究A-Frame、A-Frame物理学和超级高手。我有一个简单的场景,我可以放置一个对象(现在只是一个盒子)和一些控制器。当我在虚拟现实中查看这个场景时,我可以抓取盒子,四处移动,调整大小,但我不能旋转或旋转对象
我希望旋转与握住对象的手的旋转相匹配。因此,如果我用右手抓住一个物体,然后转动那只手,物体应该旋转相同的量
```
对于旋转,超高使用帧物理系统约束
要在手和目标对象之间绑定约束,它们都需要是物理实体
在手上添加一个静态身体组件就足以让这一切正常工作
例如
因此,完整的手形实体
在A帧场景中,当用户单击enter VR按钮时,如何重置相机位置
我为桌面wasd控件用户设置了一个很好的摄像头位置,但想在Vive用户进入VR时重置位置和旋转
我按照的模式开始设置相机:
<!-- Player -->
<a-entity id='cameraWrapper' position='1 1.8034 1' rotation='-35 40 0'>
<a-entity camera look-controls wasd-controls
我对虚拟现实一无所知,我正在为一个班级项目在AFrame中开发一个虚拟现实空间射手,我想知道在AFrame中是否有TDD的文档/标准。谁能给我指一下正确的方向吗 几乎完全在A-Frame组件中构建应用程序:
然后测试组件。A帧代码库中几乎每个组件都有单元测试:
angle中的组件模板也有单元测试设置。(npm安装-g angle&&angle initcomponent用于独立组件)
测试使用Karma启动真正的浏览器并执行代码。它将实体附加到DOM,附加具有不同属性值的组件,并断言值。一个基本
我有一个立体声组件和新的aframe版本的问题,它就是不工作。我正在做一些立体图片画廊。所以我需要一种方法让它们工作。立体声组件不会在左/右方向拆分。它要么根本不加载,要么只为两只眼睛提供左眼图像。
是否有其他方法可以实现立体图片?
此外,对于未来来说,最好是先用立体图片制作背景,然后加入场景元素。我认为有很多潜在的好风景
感谢您的帮助!:)
干杯,麦克斯
附言:我使用了立体声组件中的所有代码示例,但根本不起作用。如果需要我的代码,我可以稍后发布。尝试向立体声组件回购公司提交问题或询问维护人员。
我正在使用更新的a帧。我复制了文档中的基本示例(见下文)
最基本的超级双手示例
但是,考虑到可能会抓取影响其位置的对象,我想知道是否可以修改基本示例以更改旋转,而不是位置(理想情况下,我可以选择是影响位置,旋转,还是两者兼而有之)。我想我可能正在想象创建另一个组件,比如rotatable,或者在grabbable组件上构建一个可以添加到目标对象的组件,比如grabbable=“property:rotation”
我想知道这在一般情况下是否可行,因为我想更好地了解组件,以便有更多的控制。然而,
我在文档中没有看到关于a-scene元素上的色调映射属性的任何内容。是通过自定义代码(如renderer.toneMapping=THREE.ACESFilmicToneMapping)设置色调映射的唯一方法吗
如何在帧中使用纸板相机360图像
纸板相机的分辨率不是2:1。是否可以使用img标记参数更正此问题?首先,您可以通过任何照片应用程序预览图像,然后使用共享功能将图像保存到您的电子邮件或其他可以获取图像的位置。纸板相机创建的360图像文件名为IMG_yyyymmdd-xxxxxx.vr.jpg
对于360图像,您可以尝试将其渲染到a曲线图像上。a曲线图像将在圆柱体上渲染图像
a-CurveImage的默认设置不用于Carboard camera 360图像。为了在默认a-sky上获得渲染结果,我使
在人字架中。我需要在移动视图时输出横摇、俯仰和偏航。您可以执行文档。querySelector('a-videosphere')。getAttribute('rotation')。结果将是一个{x,y,z}对象,单位为度
如果您想要以弧度表示的directTHREE.Vector3对象,可以执行document.querySelector('a-videosphere').object3D.rotation
我想抓住一个盒子,用vive控制器沿Y轴旋转,但不启用任何重力或其他物理。我试图启用一个框架物理系统,但它需要重力。如果我将重力设置为0,所有动态物体都会飞到天花板。刚刚找到了我要找的东西:还可以尝试“超级手”组件,该组件具有抓取、拖放、拉伸功能,并与Don的物理功能配合使用 请张贴你尝试过的内容。
我在尝试一些可能是疯狂的事情。想法是,鼠标悬停在球体上,用图像更改立体相机。默认的摄像机是立体摄像机,所以点击鼠标,我所要做的就是将主摄像机设置为活动状态并关闭辅助摄像机。是否可以将相机设置为运行时间?有什么帮助吗?提前谢谢
<a-assets>
<img id="image1" src="image1.png"/>
<img id="image2" src="image2.jpg"/>
</a-asset
我试着让相机跟随高度地图的轮廓
我添加了一个指向下方的光线投射器,但它不会报告交叉点的任何变化
我必须将光线投射器与相机分离,因为相机会旋转光线投射器
有人能告诉我我做错了什么吗
如何获得从光线投射器到地形的距离
完整代码:
//自定义跟随地形组件
//
//这个想法是使用一个向下指向的光线投射器来计算相机和地形之间的距离
//然后相应地调整摄影机的z值
AFRAME.registerComponent('collider-check'{
依赖项:['raycaster'],
init:函数
我的用例如下所示:
在循环中,实体正在创建,组件正在设置。这是通过传递给函数的json对象实现的。我的问题是如何最好地获得一个事件,即整个实体集及其组件正在初始化。代码是这样的
var parent = document.querySelector('#parent');
var ent = document.createElement('a-entity');
parent.appendChild(ent);
for(var i =0; i = components.length; i++)
我有一个附加了gltf模型组件的元素。在内部,我想使用具有组件级范围的变量(即模式属性)来引用一些材料。我注意到(在aframe文档中)schema对象的类型是“string”或“number”,我想存储对THREE.js material的引用(不确定这是否有效)。我试过了,它可以工作,但范围仅限于侦听器函数,所以显然,它不起作用。如何存储对组件中任何位置都可以访问的THREE.Object的引用?最后,我希望存储对各种材质的许多引用,并在('model-loaded')侦听器函数之外的其他侦
我的要求是在一个帧中的一个平面上播放一个视频(json文件中的url)。我在html中创建了视频实体,如下所示
<a-video id="video_1" position="0 0 2" geometry="width:2.4;height:1.4"></a-video>
我的控制台日志显示为json文件中提到的路径
"mouseenter assets/img/movies/videos/video1.mp4"
在“网络”选项卡中,我可以看到我的文件以媒体类型和状
我正在使用MagicaVoxel构建场景,通过文件>导出>obj导出并通过
<a-assets>
<a-asset-item id="sceneObj" src="assets/scene.obj"></a-asset-item>
<a-asset-item id="sceneMtl" src="assets/scene.mtl"></a-asset-item>
</a-assets>
<a-entit
我使用mesh.renderder和material.colorwrite找到了关于对象遮挡的有趣信息
我找不到直接用a型架或检查员设置这些的方法。有办法吗
是的,我知道如何直接用javascript设置它们。以声明的方式这样做是很好的。A-Frame中没有内置声明的方式:由材质组件提供的唯一属性是,并且不包括colorWrite
由于您已经知道如何使用JavaScript(根据链接问题中的答案)声明性地设置它们,因此您当然可以为您想要做的事情创建声明性语法,并根据需要重用该语法。除了colo
我有一个包装器实体,其中包含子实体和网格:
<a-entity id="parent" dynamic-body="shape: none">
<a-entity id="box" geometry="primitive: box" position="1 2 3"></a-entity>
<a-entity geometry="primitive: sphere" position="3 4 5"></a-entity>
&l
我正在使用aframe 0.8.2加载此Collada(DAE)模型,并使用aframe ar在Hiro标记上显示它:
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></scri
我是A型架的初学者。有没有人能帮你解决这个问题,
在浏览器中WebVR A-Frame启动6秒后,我一直在生成对象
我可以在浏览器中看到对象,但无法设置从WebVR开始时间晚6秒的生成时间。您可以使用document.createElement在js中创建对象:
小提琴
对于6秒位,使用setTimeoutfunction{},ms。您还可以向场景添加事件侦听器,在加载场景或启动渲染器循环时侦听
scene.addEventListener("loaded", (e)=>{....
sce
标签: Aframe
virtual-realityheadset
有谁知道Oculus Rift/Vive的廉价替代品吗?它有控件并且与浏览器/a-Frame兼容?不幸的是,在桌面上,浏览器支持的唯一耳机是Firefox/Chrome/Supermedium上的Oculus Rift和HTC Vive,以及Microsoft Edge上的Windows混合现实耳机
移动耳机目前仅支持一个3DOF控制器。您可以选择适用于Gear VR的三星互联网和Oculus浏览器,以及适用于Daydream耳机的Oculus Go和Chrome
定期检查最新的兼容性表。Ocu
我想用光线投射器在飞机上画画
我知道当光线投射器和平面相交时如何得到通知,但之后我不知道当光线投射器在平面上移动时如何获得交叉点的更新坐标 AFRAME.registerComponent('raycaster-listen'{
AFRAME.registerComponent('raycaster-listen', {
init: function () {
this.raycaster = document.querySelector('#myRay');
},
tic
我正在将一个gltf模型加载到一个框架中,一些对象上的一些材质需要调整。我试图通过直接访问包含gltf组件的实体的object3D属性来隔离和操作它们。我需要访问的object3D树的一部分是.children数组。当我将该部分记录到控制台时,它是一个空数组,但我可以在控制台中向下旋转它,并查看所需的对象属性。我如何在脚本中访问它?.children属性正在返回空数组
您可以在此处看到我的项目:
带有光斑纹理的黑色小矩形是gltf的许多平面之一。背景中的大光斑是我在一个框架中用我想要的材料制作的
我试图让一个视频自动播放,但它不工作,我不知道为什么。我按照指导原则,将视频设置为自动播放。该视频在拆分屏幕中查看实时站点时有效,但在新窗口中打开站点或通过链接访问站点时无效
这是代码:如果有人知道出了什么问题,请告诉我。您的id中不应该有空格,也不应该有括号()。它不是无效的,但可能会引起问题,正如我相信的那样,发生在您的示例中
我保存了这个:
致:
还有:
在播放声音/视频之前,您需要与页面进行任何类型的交互
一个简单的按钮来播放元素就可以了,你也可以把它作为你的起始页。这不是一个优雅
我已经阅读了A-Frame文档并直接从中复制了代码,但是我在以.obj和.mtl格式显示3D对象时遇到了问题。这就是我所拥有的:
<a-assets>
<a-asset-item id="chair-obj" src="obj/chair1.obj"></a-asset-item>
<a-asset-item id="chair-mtl" src="obj/chair1.mtl"></a-asset-item>
</a-asset
我想使用“text”属性显示中文字符,但字符无法显示。例如:
您需要获取包含汉字的字体文件。然后使用()生成SDF字体
或者,该过程与的类似,您可以使用Use()生成包含汉字的字体集
我正在尝试在a帧中添加固定文本。我可以添加一个a-text标记,如下所示:
<a-camera wasd-controls-enabled="true" position="0 1 0" look-controls>
<a-text position="0 0 -1" value="Test" color="#fff"></a-text>
</a-camera>
但是这种方法不会使文本固定在屏幕的一侧,因此当我更改屏幕大小时,文本将溢出。
我是A型架的新手,仍在努力解决所有问题!我目前正在构建一个3D空间,并希望通过在地板上提供点,让游客点击并移动到该位置,为游客创造一种引导体验。我在网上找到了完美的,但我无法让它工作。
以下是我关于Glitch的项目的链接:
这是我相机的代码:
<a-entity position="1.8 -1.1 3" rotation="0 90 0" id="pov">
<a-camera universal-controls="movementControls: ch
通过桌面查看时,全屏模式的图标(看起来大致像一套护目镜,可能为50%透明灰色和纯白)始终位于浏览器屏幕的右下角
这种定位方式使得,尽管存在潜在的破坏性行为,如改变窗口大小、按下以打开控制台或fov改变摄像机角度,图标的位置是固定的
这是如何实现的
我想构造一个类似的元素(矩形就可以了),并将其放置在稳定的位置(可能是底部中心),当应用程序在“桌面”模式下运行时,可以通过鼠标单击它,而不是通过visor或纸板查看。该应用程序显示360张照片
编辑:(为了清晰起见,删除了原始问题的一部分,扩展了问
我不得不动态添加光标
const cursorMaterial = {
color: darkViolet,
shader: 'flat',
opacity: 0.9,
}
const cursorAttributes={
fuse: true,
fuseTimeout: cursorFuseTimeout,
objects: '.clickable',
}
export const cursorFuseTimeout = 2000
我最近开始使用A-frame开发虚拟现实体验。我的第一个项目是一个简单的虚拟城市之旅。框架似乎在桌面浏览器和iOS上运行良好,但有一个条件除外。当我在iOS上进入VR模式时,光标卡在加载位置
我的项目的一些细节是,我将我的a实体对象存储在JSON中,并通过elements.js呈现它们
你可以在网站上看到我的项目
我知道在aframe.io上对iOS的支持据说很奇怪,但我很好奇是否有解决这个问题的方法。我刚刚开始试验a-frame,所以如果您发现代码有任何问题,请随时告诉我
这是我的密码!任何帮
我一直在为一个小故障项目添加背景音乐。我按照Aframe.io文档创建了一个声音组件,并将其设置为在运行时自动播放,但是,当我尝试运行项目时,声音不会在我的笔记本电脑上自动播放。我必须打开Aframe inspector并取消暂停我的项目,音乐才能开始。出于某种原因,当我在手机上尝试相同的项目时,我没有遇到这个问题。程序启动并运行后按预期播放的声音。我不确定是什么原因导致声音出现故障,但非常感谢您的帮助。以下是我正在进行的项目:大多数现代浏览器上的自动播放音频在启用音频之前需要用户交互。您可以在
使用帧VR是否可以“单击”VR场景中的链接
我们正在尝试建立一个观众可以注视对象的世界,这将在当前选项卡中打开一个URL,并在其中显示另一个VR世界
这些URL都将位于同一个域上
谢谢。看起来我们可以用这个:
e、 g
看起来我们可以使用:
e、 g
您也可以使用Mozilla超链接演示中的Javascript:
只要将它复制到您的项目中,您就可以像他们在演示中一样使用它。您也可以使用Mozilla的hyperlink演示中的Javascript:
只要将它复制到您的项目中,您就可以像他们在
我试图将gltf模型导入到我的场景中,但即使有正确的路径和引用,控制台也声称“core:propertyTypes:warn”#model“asset not found.+0ms”。
尝试使用我从Blender导出的gltf模型以及下载的工作模型。我对场景中的任何.obj文件都没有这个问题。对我可以尝试改变什么有什么建议吗
<a-assets>
<a-asset-item id="monster" src="/monster.gltf"></a-asset-ite
我们正在为三星Gear的一款VR应用程序使用框架。为此,我们需要一些从3ds max studio创建的3d模型。不管我们创建的是哪种模型,它都无法在帧上正确渲染。它不显示材质颜色,也不显示某些顶点。
我已附上我的样本mtl和obj文件。
这是我们需要在3ds Max studio中使用的任何特定设置吗
如果不提供示例或指向所用文件的链接来演示正在发生的事情,我们就无法很好地帮助您。然而,我最近回答了一个听起来很相似的问题。您可能想检查一下:
如果此答案中提到的内容对您没有帮助,您是否能够使用
使用帧如何手动更改相机旋转,使其在移动设备上工作,并且仍然使用外观控件
我已经尝试通过html属性进行如下操作:
document
.querySelector('[camera]')
.setAttribute('rotation', { x: 0, y: deg, z: 0 })
这在桌面上运行良好,但在移动设备上,“外观控制”组件似乎将相机旋转重置为以前的值
我已经在这里为这个问题设置了一个演示,它改变了旋转并禁用了外观控件。然后我设置了一个超时,在1秒后重新启用look控件
按
如果我想构建一个包含多个场景的游戏,如何使用a-Frame实现这一点?将元素封装在具有不同页面id的空实体中是否可行?
谢谢大家! 您可以使用JS切换场景:
下面是一个工作示例:
您好,非常感谢,我现在已经成功实现了场景切换,但我也有一个顾虑。由于我们通过控制可见属性来实现,这是否意味着浏览器将同时加载不同场景中的所有元素?这会不会导致浏览受阻?是的,会。因此,我不会把这些场景做得太大。还要记住,只有在需要保持VR模式时,才需要切换此场景。在任何其他情况下,您只需加载另一个页面即可。另外,我听
我使用了中的示例代码,并将其插入样板页:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World! • A-Frame</title>
<meta name="description" content="Hello, World! • A-Frame">
<script src="
我引用了这篇文章:
我有一个点击事件供用户进入体验,我想确保在用户点击时加载所有资产
我有此代码,但控制台中从未出现“确定加载”:
AFRAME.registerComponent('loadscene', {
init: function () {
this.el.addEventListener("click", (e)=> {
document.querySelector('a-assets').addEventListener('loaded', function ()
当使用OculusGO或OculusQuest时,当您从一个虚拟环境超链接到另一个虚拟环境时,会显示Oculus浏览器,并且在我上次检查超时时,它也会显示Firefox Reality。你进入下一个场景;但是被踢出虚拟现实,这是不可取的
我很好奇是否有其他人遇到过这个问题,他们是否能够绕过这个问题,或者对如何度过这个问题有什么想法
此时,在WebVR中出现了事件控制VR模式的问题;但也许有一个创造性的解决方案:
不久前,我做了一个公关,看起来“大多数时候”都很有效,但在我上次检查Mozilla
我正在a帧中创建一个场景,但是摄影机wasd的移动太快了,有没有办法减慢移动速度?旧版本0.4.0指定了加速属性,但现在它不存在了
我尝试了旧代码,但没有成功
<a-entity camera look-controls wasd-controls position="0 1.6 0" acceleration="5"></a-entity>
这对加速不起作用
我使用的是0.9.0版,加速代码是0.4.0版。加速必须是wasd控件的属性
加速配置不影响最高速度。如果您正
向videosphere添加视频控件的最佳方法是什么?
播放、暂停、音量、当前时间从响应中获得答案
有用于A帧的视频控制组件
从以下人员的回复中获得答案
有用于A帧的视频控制组件
根据标题,我想知道什么是衡量仅在A-Frame中创建的应用程序消耗多少内存的最佳方法。我有一个超过6MB的collada模型,图像分散,在这座建筑中移动似乎占用了大量内存,几乎无法在移动设备中使用。你可以使用浏览器的内存工具:你可以使用浏览器的内存工具:嗯,这应该有这些标签吗?我不确定是什么使A-Frame与浏览器中运行的任何其他内容不同?是什么让你用three.js来标记这个问题?对于A-Frame/web开发人员来说,如果他们不知道有不可知的浏览器内存工具可用,那么searchable可能会
我需要把我的相机放在后面一点。但每次我在智能手机中进入虚拟现实模式时,相机总是向前移动。如何解决这个问题
这是我使用的相机代码
<a-entity camera look-controls wasd-controls position="0 1 2">
<a-cursor
fuse="false"
geometry="primitive: ring; radiusInner: 0.01; radiusOuter:
如果将“阴影”组件应用于实体,且其材质设置为,则可以使用的材质具有three.js.shadowSide属性
el.getObject3D(“网格”).material.shadowSide=3.FrontSide
我正在尝试定位HTML元素,以便在a-Frame顶部构建一个UI,可以在桌面和移动设备上单击或触摸。任何HTML元素都可以通过适当的样式覆盖在a-Frame顶部。您至少需要设置位置:绝对和z-index:9999因此它在顶部渲染。下面是在a帧画布上渲染的简单示例:
.button {
width: 200px;
height: 100px;
position: absolute;
top: calc(50% - 300px);
left: calc(50% - 50px);
我使用A-frame在我的演示中上传360个视频。
如何在VR模式下通过分屏观看视频
欢迎任何反馈,谢谢:)您好,Stack overflow在您尝试东西时效果最好,向我们展示您的尝试,然后我们对其进行评论
有没有一种方法可以以更漂亮的方式重用相同的动画
<a-entity channel-selection class="channels" mixin="fontplane" material="opacity:0.6">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
<a-animation attribute="material.opac
我可以将多用户合并到A帧中的选项有哪些
下面是我希望黑色球体代表每个玩家的示例代码:
随着社区和团队继续进行实验,多用户仍在不断充实。网络物理需要很好地实现,游戏行业有一些方法可以移植到Web上。在撰写本文时,有几个初始选项:
-Hayden Lee的网络化A-Frame,使用WebRTC和服务器。这里有一个小故障,我们可以重新混音开始:
函数onConnect(){
NAF.entities.createAvatar(“#avatar模板”,“0 1.6 0”,“0 0 0”);
}
我是webvr新手,需要一点帮助,所以我建立了一个虚拟现实室,内部细节很少,现在我希望用户只移动到特定的点,例如,用户悬停在窗口上,而不是相机/视图应该跳转到该窗口/点,而不需要在外部进行一点查看,这是为了避免用户穿过墙壁和对象。那么如何解决这个问题呢?提前感谢。由于JavaScript,相机现在可以将位置更改为您用光标指向的特定点,而不是旋转。函数windowCameraChange(){var curt=document.getElementById(“MainCamera”);curt.s
上一页 1 2 3 4 5 6 ...
下一页 最后一页 共 16 页