我有一个360度的图像，我正在使用a帧来显示 我的问题是，是否有任何互动（如谷歌地图街景），我可以采取重叠箭头，并采取用户到另一个360度图像？有可能这样做吗？如果可能的话，我将如何添加这种类型的功能 是否可以在360图像上添加文本或html链接 我意识到这不仅仅是一个问题，但希望有人能帮我解决。我真的很喜欢A-Frame。有多种方法可以实现您的目标。 360画廊（如谷歌地图街景）： 最简单的方法是制作一个正在改变其源图像的球体/天空。示例，教程 基本上你可以做一个。如果你不喜欢它，你可以用al
考虑这一点： <a-entity id="player"> <a-entity id="camera" camera look-controls></a-entity> <a-entity id="leftHand" oculus-touch-controls="hand: left"></a-entity> <a-entity id="rightHand" oculus-touch-controls="h
我希望能够在视图端口的左上角放置实体。硬编码定位是很容易的，但当然这会因不同的屏幕尺寸而中断。有并没有一种方法可以获得相机中可见物体左上角的xy坐标。例如，从屏幕中心到边缘的x距离是多少，从中心到顶部的y距离是多少？这是我的解决方案，它允许您根据屏幕坐标在相机视图中固定一个帧元素 const visibleHeightAtZDepth = ( depth ) => { const camera = AFRAME.scenes[0].camera; // compensate for
我有一个A帧场景，我想放在一个页面上，但我只想在我告诉它时加载它。这意味着在我发出事件或调用方法之前，它不应该呈现或运行 <body> <!-- Don't play yet. --> <a-scene> </a-scene> </body> 目前没有内置+文档化的方式，但稍后会有一个功能。但是，有两种方法可以手动执行此操作： 创建 节点（每个继承自节点）将阻止场景加载，直到它调用.load（）事件 在场景中创建虚拟节点。
我想向球体添加渐变颜色，目前我正在设置颜色： <a-sphere position="1 1 0" color="#ef2d5e"> <a-animation attribute="rotation" to="0 360 0" dur="10000" easing="linear" repeat="indefinite"> </a-animation> </a-sphere> 如何向球体添加渐变？有办法吗。试试看 谢谢你的回答
我有以下资产定义： <a-asset-item id="DNA" crossorigin="anonymous" src="https://cdn.glitch.com/2dd120f4-5d77-403f-af9d-feb8e33ed767%2FAR_DNA.dae"> </a-asset-item> 为什么会发生这种情况？如果您没有在资产中声明，并通过collada model=“dna.dae”内联加载模型，是否会发生这种情况Piotr Adam
我在控制台中使用了2D图像，可以很好地显示，并且没有任何错误，但是当尝试使用gltf模型时，没有显示任何内容，我得到了以下错误“无法读取aframe.min.js:121处未定义的属性'slice' 这就是我得到模型的地方- 这是我试图遵循的文件- 这似乎与a-frame有关，而不是与AR有关。js帮助我解决了一个类似的问题。太好了，感谢您提供了可能的副本 <html> <head> <meta aframe-injected="" name="viewpor
我想在我的A-Frame项目中使用，但我想使用的方式是，一次抖动使传送线出现，另一次实际传送到您选择的位置 我看过文档，看到startEvents和endEvent属性，我想把它们映射到shake事件中。。。对我来说，听起来我必须创建一个自定义组件来完成这项工作，但我想先寻求帮助，看看不这样做是否可行 到目前为止，我已经创建了一些库，但到目前为止还没有成功（请注意，我还有一些其他库，它们利用了shake、mousedown和类似事件……我的计划是根据用户想要移动的方式来激活或停用它们） 谢谢
这是我的密码： 在哪里可以找到结果： 我不明白为什么我在第20行的纹理根本不显示。。。这可能只是一件我忘记的蠢事，但我真的搞不懂 如果你能检查一下，谢谢你 它不起作用，因为您要将材质组件分配给实体两次： 1） 在模板中 2） 内联（与纹理一起） 这很有趣，从未尝试过同时给一个实体提供两种材质：） 再生产 从模板中删除材质，或创建新组件，将纹理指定给材质，如： AFRAME.registerComponent("foo", { init: function() { this.el
我试图在点击时旋转一个对象，并使用光标侦听器捕捉触摸事件 目前，我正在使用动画对象。然而，即使我能够用loop:true设置按钮的动画，但是begin:click仍然不起作用 <a-entity cursor-listener id="butt" position="-.0.4 -0.1 0.5" obj-model="obj: #but" scale="1 1 1" rotation="0 0 0" animation__rotate="begin:click; property: r
我使用的是A-Frame（当前主构建），我的目标是确定在Oculus Go控制器上触摸的位置。（这不是为了移动相机，因此“运动控制”组件在这种情况下没有帮助。）我设置了一个包含文本对象的场景，以便在Oculus Go上测试时可以查看数据 现场的相关部分包括： <a-scene> <a-entity id="textArea" text="data will be displayed here"> </a-entity> <a-en
更新：这个插件解决了这个问题 新来的。我正在创建一个场景，我希望用户能够“单击”桌面浏览器上的对象，我不想费尽心思去弄乱现有的外观控件代码或创建一个新组件，因此我查看了源代码，并设计了一个解决方案，在该解决方案中，我尝试使鼠标的位置跟随鼠标的移动： // code for moving the cursor var mouse = { x: 0, y: 0 }; var camera = document.querySelector('#camera').components.camer
我有一个类似于下面代码的html模板 <a-entity id="id1"> <a-entity template="src: t1.template;type:nunjucks"> </a-entity> </a-entity> t1.template <a-entity id="id2"> {% for i in 4 %} <a-entity template="src: t2.temp
我们正在建立一个家居装饰的三维视图工具，客户可以点击沙发，它将显示或隐藏在三维视图中 它们为我提供了家庭背景的全景图像，以及除沙发部分外大小相同但透明的沙发图像 我试过： <a-sky src='background.jpg' /> <a-sky src='sofa.jpg' /> 期望它们覆盖。但沙发图像虽然是透明的，但会阻挡背景。更具体地说，结果是一个空白空间中的沙发，而不是给定背景中的沙发（这是理想的结果） 如何实现我的目标？jpg格式不支持透明度。改用png
我正在寻找一种方法来检测新的a-frames元素何时被添加为给定元素的子元素（如“child attached”），但在元素组件初始化之前不会触发 或者，是否存在在元素组件全部初始化后引发的事件？当所有组件初始化时，加载的事件将触发。这件事没有泡泡。我将有一个组件，您可以将其附加到动态添加的实体，并侦听load事件。更好的是，设置依赖项以等待所需的确切组件 相关的，componentialized事件将为每个初始化的组件触发。当所有组件初始化时，加载的事件将触发。这件事没有泡泡。我将有一个组件，
是否可以使用a-Frame实体控制a-scene之外的常规html对象？例如，我想在嵌入式场景中选择平面、球体等时切换模态对象。我知道可以在场景中显示的UI模式，但是在场景和“外部”元素之间进行操作的能力将非常强大。我相信这是可能的，但我还没有VR开发人员的技能来解决这个问题！提前感谢您的帮助 是的，组件可以包含任意JS代码。您可以操作页面的任何DOM元素。理论上，您可以“寻址”并操作DOM中的任何元素。例如，使用jQuery： myDiv = $('#my-div'); myDiv.toggl
在框架中是否有类似于CSS的z-index i、 e，如果在xz平面中有两个对象，如何使一个对象与另一个对象重叠？没有z索引，但有一个z轴。在A-frame中，您使用的是“右手坐标系，负Z轴延伸到屏幕中” 这有助于将其可视化： 因此，要使用两个对象的z索引概念，您需要更改它们的z轴位置属性： <!-- front object --> <a-entity position="0 0 -2"></a-entity> <!-- back object
在A帧中，是否可以将相机中的对象粘贴到右上角位置（对于hud元素）。它在dekstop上使用固定位置，但在移动设备上，圆位于视口之外 通过向相机添加子几何体，使用3D Hud元素的问题在于，它们存在于3D空间中，在桌面和移动设备上的渲染方式会有所不同，因为相机视图视锥有点不同 如果要使用3D hud元素，可以检测查看器是在移动设备上还是在桌面上，然后变换hud元素以适应。您必须在手机上通过反复试验来调整此功能，并希望它能在所有手机上正常工作。 这里有一个小故障，显示了如何检测移动设备，并使用一个
我正在使用以下版本的aframe和aframe react "aframe": "^1.0.3", "aframe-react": "^4.4.0", <Scene embedded> <a-assets> <a-asset-item id="earth" src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb?1542147958948">&l
我如何改变一个场景？一幕接一幕 <!-- scene 1 --> <a-scene scale="0.2 0.2 0.2"> <a-assets altspace > <img id="bg1" src="offbg.jpg"> </a-assets> <a-sky src="#bg1"></a-sky> </a-scene> <!-- scene 2 --> <
我正在使用AR（带标记）并设置gltf模型的动画，使其在一个轴上逆时针旋转。最初，将我的标记放在桌子上，让模型在其垂直轴上缓慢旋转360度： （如果您手头有设备，可以测试实际AR跟踪） 现在，我需要将标记放在一个甲板（幻灯片）上，以便人们在墙上进行尝试，但需要保持相同的动画（首先看到面部，然后是头部后部，然后再次看到面部），但是a-animation没有考虑初始模型旋转（-90 0）（如上面的演示中所示）。似乎a-animation坐标是绝对坐标，而不是相对于模型的初始旋转。如果我移除整个a-
我很难找到正确的方法来设置a帧中物体的角速度 <script> AFRAME.registerComponent("cuberotator", { init: function () { console.log("trying to rotate the cube..."); const theta = new THREE.Vector3(0, 20, 0); console.log (theta);
我的天空图像将显示材质边：背面，但不显示边：正面。。。我很困惑。当前显示侧边：返回此处： 图像是颠倒的，我不想这样。如果side:back是正确的，我应该在photoshop中翻转图像吗？您可以使用比例属性翻转图像（将比例设置为-1会使图像在任一轴上反转），然后切换可见侧： scale="-1 1 1" material="shader: flat; side: front; src:#nyc" 我打算用photoshop将图像反转，但如果有a帧的方法，我想知道。另外，请查看有关翻转图像的
有没有办法提取与光线投射器相交的实体信息（id、类等）？ 我试图从evt.detail.el中找到信息，但没有成功 AFRAME.registerComponent('collider-check', { init: function () { this.el.addEventListener('raycaster-intersected', function (evt) { console.log(evt.detail.el); }); } }); 问题是上面的代码记录的
我正在尝试将a-frame中的这些曲线图像链接到我的其他HTML页面，它们是： hall.html clock.html titanic.html 我已经在网上研究过了，但是还没有找到答案，所以如果有人有a-frame的经验，我将不胜感激 基本上，我想做的是，当有人看到a框架中的一个曲线图像时，它会将它们带到HTML页面 谢谢 贝尔法斯特360 -> 使用组件： <a-curvedimage link="href: hall.html; on: click"></a-cu
我尝试在aframe gltf模型中旋转网格，但它似乎不起作用。是否可以旋转场景中运行时添加的gltf模型的网格？我得到的网格设置了轴，但无法对其应用旋转 问题：我有一个带有两个网格的门模型。左门和右门。我想在用户单击门网格时将门旋转180度。我得到了整个3d对象上的点击事件，现在检查哪个网格被点击；检查其父级并尝试旋转左门，但不工作。你知道我错过了什么吗。 所以 object.parent 返回我尝试旋转的父对象类型。这条路对吗 这是我到目前为止得到的 const newElement =
我最近用一个框架和一个小故障创建了一个网站，当网站出现小故障时，一切正常，但一旦我上传到主机上，每次都会出现一个弹出窗口，要求获得设备传感器许可 通过HTTPS访问此站点以进入VR模式并授予对设备传感器的访问权限 你知道我怎样才能阻止这个弹出窗口出现吗 感谢您通过HTTPS为您的网站提供服务。DeviceMotion和WebXR API无法通过HTTP提供，无法通过HTTPS为您的站点提供服务。DeviceMotion和WebXR API在HTTP上不可用。请将其放入CSS中： .a-modal
我尝试在我的网站上创建一个A-frame示例。 但是，在移动设备上，存在一个错误。 这是警报信息 网络摄像头错误。不可读错误。消息：无法启动视频源 我把这个例子来源。 我不知道，为什么一直显示此警报消息。 我只想在我的手机上测试一个例子。 （我在这个网站上找到了这个例子。 ) .arjs加载器{ 身高：100%； 宽度：100%； 位置：绝对位置； 排名：0； 左：0； 背景色：rgba（0,0,0,0.8）； z指数：9999； 显示器：flex； 证明内容：中心； 对齐项目：居中； } .
我想在虚拟现实中重建一个太阳系。通过将每个行星设置为太阳的子实体，然后使用动画功能旋转太阳，我可以重新创建旋转。然而，我想通过让每颗行星以不同的速率围绕太阳旋转来让它变得更加现实。如果不主动为动画编写单独的javascript文件，这将如何实现？非常感谢您的帮助 不要把行星当作太阳的孩子。使用一个实体作为太阳系的中心，并围绕枢轴旋转每个行星。您可以将不同的动画应用于不同的行星： <a-entity id="earthPivot" animation="pr
我试图找出，当只有一个控制器时，是否有一种方法可以确定正在使用哪个Vive控制器。在OpenVR中，此信息可用。我想知道A-Frame是否可以做到这一点？当您设置控制器时，您可以设置利手： <a-entity id="leftHand" vive-controls="hand: left"></a-entity> <a-entity id="rightHand" vive-controls="hand: right"></a-entity> 还请
我想在a-scene的下面包括和标记 例如： <a-scene> <a-sky src="http://i.imgur.com/9zATQ6s.jpg" rotation="0 -130 0"></a-sky> <a-text font="kelsonsans" value="Puy de Sancy, France" width="6" position="-2.5 0.25 -1.5" rotation="0 1
我想创建一个3d.io aframe场景，在不需要网络连接的情况下加载包含3d.io家具的公寓。我如何才能做到这一点？使用即将推出的“导出”API就可以做到这一点。它将允许您下载整个场景，然后脱机查看或使用内部桌面应用程序等
因此，我将确定只有当用户使用耳机时，光标的保险丝是否会被激活。我想提供两种不同的行为，这取决于他是用鼠标导航还是用HMD导航。我如何检查呢？您可以使用一个frame.utils.device.checkHeadsetConnected（）（）查询耳机是否存在，但这并不能告诉您他们是否正在使用连接的耳机 当用户进入全屏/vr模式（）时，您的a-scene实体将发出'enter-vr'事件，因此您可以在此时检查他们是否连接了耳机，并知道他们是否处于耳机vr模式： window.addEventLis
我从球体上看起来很锐利的地方，拍摄了一张等矩形环境贴图 如果使用以下参数将相同材质加载到场景中 material=“球形环境贴图：/assets/models/1/envtest.jpeg；粗糙度：0；金属度：1” 它看起来像这样模糊 我做错了什么 通过故障再现的示例： 设置故障时，我注意到： 使用帧1.0.3时，图像模糊 使用Aframe 1.2.0无论我做什么，它都会保持黑色 发生这种情况是因为您在代码中使用了PBR材质，因为a-Frame的默认材质为。意思是试图呈现物理上正确的材质。
我有一个开发代码问题，使用开源的“3dio js”代码 如何将 <a-entity class="io3d-scene" position="" rotation="" io3d-uuid="ddd8f1a11-7f5fs-4fds4-ad3d-ec58cc2cssa817" scale="" visible="">all elements are children </a-entity> 你有代码示例吗 非常感谢。您可以使用io3d.scene.getSceneStr
我需要使用一个额外的帧来传送。但如果我使用一个框架额外的gltf模型不显示 您必须同时导入a-frame和a-frame-extras。其中一个脚本标记在代码段中被注释掉。a型架也必须首先加载： <html> <head> <script src="assets/lib/aframe.min.js"></script> <script src="assets/lib/aframe-extras.js"></scrip
我在我的网站上看到这个警告 与位于的跨站点资源关联的cookiehttp://aframe.io/ 设置时没有'SameSite'属性。Chrome的未来版本将只提供带有跨站点请求的cookie，前提是这些cookie设置为'SameSite=None'和'Secure'。您可以在“应用程序>存储>cookies”下的“开发人员工具”中查看cookies，并在中查看更多详细信息https://www.chromestatus.com/feature/5088147346030592 及https
我使用的是A-Frame 1.0.0，在使用Oculus耳机时没有使用Chrome m79渲染：Rift、Rift S或Quest via link <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></
我目前正在测试AR.js，用手机在增强现实中显示3D模型。我的网页编码技能是非常新手，所以我正在收集不同的教程，以得到我想要的。我相信我已经确定了正确显示gltf文件所需的内容，但似乎存在一些小问题，因为模型无法显示。我已使用gltf查看器确认该文件是有效的。代码也可以很好地显示一个简单的a-box，但是当我注释掉它并为gltf模型添加行时，代码就会下降 任何帮助都将不胜感激 <html> <head> <meta name="viewpo
我一直在尝试使用设备定向权限ui和vr模式ui组件禁用这两个组件，但我无法使其按预期工作。下面是HTML的相关部分和 ... 代码中有三个问题： 您使用的是旧版本的A-Frame。使用1.0.4或更新版本 它是enabled:false而不是enabled:disabled 有多个，您可以看到，无论是enter VR按钮还是permission对话框都没有显示代码中有三个问题： 您使用的是旧版本的A-Frame。使用1.0.4或更新版本 它是enabled:false而不是enabled:di
我尝试在a-frame中使用three.js库。 比如说, var helper = new THREE.MMDHelper(renderer); 我不知道如何在a帧中获得渲染器 a场景具有渲染器属性。 => 但是，它没有定义 document.querySelector('a-scene').renderer; <= undefined document.querySelector（'a-scene'）。渲染器 在渲染器可用之前，需要等待场景初始化： sceneEl.addEve
有人知道如何从3d模型中获取storageID？似乎有这样的方法，但它一直告诉我无效的url。谢谢 io3d.storage.getIdFromUrl('https://spaces.archilogic.com/3d/Home_2766/grrodvuu?modelResourceId=cd36dc78-a124-4a4e-9990-35be32415f84') 我假设您正在查找整个烘焙模型的存储ID 在这种情况下，您可以使用场景API查找带有bakedModelUrl的子对象，该子对象是模
我试图在a帧中向动态物体添加y轴旋转，但它不起作用 更具体地说： console.log（this.el.getAttribute（“旋转”）） ---显示更新的值，但对象在屏幕上看起来相同。发生什么事了 请参阅此代码笔：您需要使用实用程序功能将旋转与物理引擎同步： element.components["dynamic-body"].syncFromPhysics(); 代码笔。这可能会对您有所帮助。我不完全理解cannon.js，所以不能提供一个更有意义的答案，但他们似乎在讨论启用物理的物
A-Frame可以创建如下HUD： <a-entity camera look-controls> <a-entity geometry="primitive: plane; height: 0.2; width: 0.2" position="0 0 -1" material="color: gray; opacity: 0.5"></a-entity> </a-e
交叉柱 说明： 我无法在iOS上播放音频，无论是在Safari还是Chrome上 我尝试的是： 直接在组件上自动播放#1463让我立刻想到这是行不通的。但#1463的描述暗示它对Android的Chrome不起作用，但它对我起作用 使用entity.components.sound.play（），同时使用setTimeout和用户事件 这两种方法在用于Android和桌面浏览器（Chrome、Safari和Firefox）的Chrome中都能正常工作。在Android版Firefox中，我的
我的产品在下面（请通过手机查看） 在向左或向右移动的情况下， 通过手指手势移动触摸效果良好 但是,， 在向上或向下移动的情况下， 通过手指手势移动触摸不起作用！这是个问题 我该怎么办 使用 A-Frame0.5.0 Safari iOS 10 就像使用yawObject一样 但它现在起作用了。 因为触摸移动监听器（#L301-L313）没有设置rotaion.x 也许,， 我应该计算旋转 yawObject.rotation.x = ???? 但我不懂如何计算 请帮助我问题是关于pitchO
我正在使用创建路径以使事物向前移动。但我似乎无法更改曲线类型 文档显示有4种可用类型“CatmullRom”、“样条曲线”、“CubicBezier”、“QuadraticBezier”、“Line”，但我无法将其从默认的“CatmullRom”更改 请看下面我所做的尝试，表明尝试影响类型没有任何区别。在一个例子中，我将类型作为a曲线的属性传递，在另一个例子中，我将类型作为曲线组件的属性传递，因为这似乎启用了closed属性，在最后一个例子中，我根本不更改它。我使用了a-draw曲线来说明渲染曲
最终更新日期：2019年9月13日晚上11:50： 这段代码使用多个自定义标记，但是标记不能太相似。我以前的定制标记都是有轻微差异的全明星标记，我想这有点搞错了。但是，使用更新、更独特的标记，它是有效的 但是，由于某些原因，在使用“分离组件”方法时，这不会影响结果 更新日期：2019年9月13日：以下代码适用于hiro和汉字预设标记以及一个自定义标记。但是，当我添加多个自定义标记时，视频会冻结在额外的标记上。我想每个标记触发独特的视频（一些视频将在几个标记中重复使用）。在我当前的代码中，我只是
我用glft尝试了一个简单的aframe演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Test</title> <script src="../../../dist/aframe-master.js"></script> <script sr
我正在使用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