aframe 相关问题

使用javascript设置标签属性值时出现问题

<a-scene id="myScene" mindar-image="imageTargetSrc: ./targets1.mind; filterMinCF:0.0001; filterBeta: 0.001" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"> <a-assets> <a-asset-item id="raccoonModel" src=""></a-asset-item> <!-- <video id="raccoonVideo" loop src=""></video> --> </a-assets> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="2 2 2" src="#raccoonModel" animation-mixer> <!-- <a-video id="video1"rotation="0 0 0" position="0 0 0" scale="1 1 1" src="#raccoonVideo" material="transparent: false"></a-video> --> </a-entity> </a-scene> 我想使用javascript中的变量设置imagetargetsrc的值，但我无法设置它。谁能帮我怎么办？我使用 id 获取场景并使用 set 属性设置值，但它不起作用 const scene = document.getElementById('myScene'); // Set the new image source using a JavaScript variable const newImageSrc = patternFile; scene.setAttribute('mindar-image', `imageTargetSrc: ${newImageSrc}; filterMinCF:0.0001; filterBeta: 0.001`); console.log(scene); 这是我尝试过的，但它不起作用 实际上，当项目是ReactJs时，你应该使用state来处理这样的问题。就像下面这样： const [mindarImage, setMindarImage] = useState('imageTargetSrc: ./targets1.mind; filterMinCF:0.0001; filterBeta: 0.001'); <a-scene id="myScene" mindar-image={mindarImage} color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false"> <a-assets> <a-asset-item id="raccoonModel" src=""></a-asset-item> </a-assets> <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> <a-entity mindar-image-target="targetIndex: 0"> <a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="2 2 2" src="#raccoonModel" animation-mixer> </a-entity> </a-scene> 每当你想改变mindar-image值时，你应该像下面的代码一样操作： const newImageSrc = patternFile; setMindarImage(`imageTargetSrc: ${newImageSrc}; filterMinCF:0.0001; filterBeta: 0.001`)

使用Aframe的实体gltf-model加载时如何访问GLB的Skeleton？

我遵循此规范来加载 GLB，https://aframe.io/docs/1.4.0/components/gltf-model.html， 我已经使用加载了一个 GLB 文件 这种格式。 我遵循此规范来加载 GLB，https://aframe.io/docs/1.4.0/components/gltf-model.html， 我已经使用加载了一个GLB文件 这个格式。 <a-scene> <a-entity gltf-model="./assets/models/Streetbud_1.7.glb" move position=".5 1.5 -15" scale="5 5 5"></a-entity> </a-scene> 如果我随后访问模型，我会在控制台中看到以下内容。 如果我使用来自 Three.js 的 gltfloader 加载相同的模型...... gltfLoader.load('./assets/models/Streetbud_1.7.glb', (gltf) => { .... } 我得到以下信息。 注意，对于 gltfLoader，骨架在模型中可用。我使用 Aframe 实体时没有这个选项。 我希望将一些 BVH 动画重新定位到我的骨骼。关于如何使用 填充骨架有什么想法吗？出于与其他一些库的兼容性原因，我更喜欢使用较新的方法.. 应该像这样工作： 等待模型加载完毕 使用 getObject3D('mesh') 找到根网格对象 遍历它寻找isSkinnedMesh标志。 访问 skeleteon 属性。 AFRAME.registerComponent("skinnedMesh-logger", { 初始化：函数（）{ this.el.addEventListener("模型加载", e => { const mesh = this.el.getObject3D("mesh"); 网格.遍历（节点=> { if (!node.isSkinnedMesh) 返回； 控制台.log(节点); // 或node.骨骼 }) }) } })

A 形框中的重音和 ñ

如何在 A 字框中写重音符号或 ñ？当我写 ñ 或重音符号时，该字符消失 如何在 A 字框中写重音符号或 ñ？当我写 ñ 或重音符号时，该字符消失 <a-entity text="value:áT&aacute;ílde y e'ñ'; color:#FFFFFF; shader: msdf; font:fonts/roboto/Roboto-Medium.json;" scale="15 15 15" position="6.7 1 -2"></a-entity> 我在 https://github.com/soimy/msdf-bmfont-xml 中找到了很多字体，但没有一个可以使用重音符号或 ñ。 我尝试制作带有重音符号的字体，但我做不到。我不太明白这篇文章https://levelup.gitconnected.com/msdf-font-rendering-in-webgl-91ce192d2bec

可能是一个关于在 aframe 框架中索引 VR 控制器数据的基本问题

从 A 框架示例（https://github.com/aframevr/aframe/tree/master/examples/showcase/comicbook）开始，我目前可以使用我的任务控制器（left 和 r）递增和递减...

vue 移除了 a-scene 的 gltf-model 属性？

如何让经过 gltfpack 处理的模型出现在 A-Frame 中？ 在此处输入图像描述 组件：gltf-模型：警告 THREE.GLTFLoader：setMeshoptDecoder 必须在加载压缩文件之前调用...

a-frame 的文本组件真的有 yOffset 属性吗？

我正在尝试使用名为 yOffset 的 aframe 文本组件的属性。此属性未在文档中列出，但出现在组件的架构中。应用时没有任何反应。

Aframe 显示全屏而不是 VR 按钮

我正在尝试调试我的旧 nodejs-aframe 应用程序，但我注意到在我的网络浏览器中运行它们只显示全屏按钮而不是 VR 按钮。如果我尝试 aframe de...也会发生这种情况

如何从 Unreal Engine 5 导出 3D 环境和模型并将它们导入 AFrame [关闭]

我正在尝试通过不同的软件创建 VR 网络体验。如何从虚幻引擎中获取我的 3D 环境和模型并将它们集成到 AFrame 中以创建 WebVR 体验？不...

A-Frame a-video 在 safari ios16.1 和 iphone 12 中不起作用？

我是A-Frame的新手。我尝试制作一个演示，我在场景中放了一段视频。它在我的电脑上工作，但在我的移动设备上有一个黑色的飞机。这是屏幕截图和代码。 在 Macos chrom 中运行演示...

从远处看，我的 A 型球体边缘呈锯齿状 - 为什么

我想站在各种不同高度的 VR 球体上方，但是当我在 2000 米半径球体上方 500 米时，我的球体会出现丑陋的锯齿状边缘。 显示问题的故障页面 我是一个完整的新手......

如何从虚幻引擎5导入3D环境/世界和3D模型并将它们导入/集成到AFrame

您好，我是一名年轻的开发人员，试图通过不同的软件创建虚拟现实网络体验。我如何在该环境中获取我的 3D 环境和 3D 模型并将它们实施到 AFrame 中以

如何在框架中使用 CSS3DRenderer？

我正在尝试在框架中重现此示例： https://threejs.org/examples/?q=you#css3d_youtube 根据代码使用 CSS3DRenderer 但我找不到如何将它与框架一起使用。 T...

获取音频以在 A-frame ios vr 上播放

所以我有一个 A 帧场景设置，除 ios 移动设备外，一切都按预期工作。当光标悬停在飞机上时，我需要播放音乐文件。到目前为止，我已经使用 registerCompo 实现了这一点......

AR.js 基于框架位置的移动对象

I can*t move around objects in AR.js aframe location based scene 我设置了 Nicolò Carpignoli 的 AR.js aframe 基于位置的示例： https://codepen.io/think2308/pen/PoyYroM 我希望成为...

如何使用波分量将波浪运动从水平方向变为垂直方向？

当前波分量产生水平移动。我的兴趣是将该运动从水平运动更改为垂直运动。当前脚本是： AFRAME.</desc> <question vote="0"> <p>当前波分量产生水平移动。我的兴趣是将该运动从水平运动更改为垂直运动。当前脚本是：</p> <pre><code>&lt;script&gt; AFRAME.registerComponent(&#39;wave-component&#39;, { schema: { texturepath: {type: &#39;asset&#39;}, color: {type: &#39;string&#39;, default: &#39;#FFF&#39;} }, init: function () { var el = this.el; const loader = new THREE.TextureLoader(); var geometry = new THREE.PlaneGeometry(10, 3, 60, 100); // Creating a material with the texture path provided var material = new THREE.MeshBasicMaterial({ map: loader.load(this.data.texturepath.src), transparent: true, color: this.data.color, alphaTest: 0.01 }); var wave = new THREE.Mesh(geometry, material); wave.rotation.set(-0.3, 0.0, -0.0); const clock = new THREE.Clock(); let v = new THREE.Vector3(); let pos = wave.geometry.attributes.position; el.setObject3D(&#39;WaveMesh&#39;, wave); // Function to animate each vertex of the texture to simulate a wave effect function animate() { const t = clock.getElapsedTime(); for (let i = 0; i &lt; pos.count; i++){ v.fromBufferAttribute(pos, i); const wavex1 = 0.05 * Math.sin(v.x * 2 + t * 3); const wavex2 = 0.05 * Math.sin(v.x * 5 + t * 2); const wavex3 = 0.1 * Math.sin(v.y * 10 + t * 0.5); pos.setZ(i, wavex1 + wavex2 + wavex3) } pos.needsUpdate = true; requestAnimationFrame(animate); } animate(); } }); &lt;/script&gt; </code></pre> <p>我正在寻找垂直运动而不是水平运动。</p> </question> <answer tick="false" vote="0"> <p>你将三个正弦因子组合成最终位置：</p> <pre><code>const wavex1 = 0.05 * Math.sin(v.x * 2 + t * 3); const wavex2 = 0.05 * Math.sin(v.x * 5 + t * 2); const wavex3 = 0.1 * Math.sin(v.y * 10 + t * 0.5); </code></pre> <p>如果您希望波浪在二维中移动得同样快，那么只需根据<pre><code>v.y</code></pre> 位置加快因子（因为它比其他位置慢 4 倍）：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>&lt;script src=&#34;https://aframe.io/releases/1.4.0/aframe.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; AFRAME.registerComponent(&#39;wave-component&#39;, { schema: { color: { type: &#39;string&#39;, default: &#39;#FAA&#39; } }, init: function() { var el = this.el; var geometry = new THREE.PlaneGeometry(6, 6, 100, 100); // Creating a material with the texture path provided var material = new THREE.MeshBasicMaterial({ color: this.data.color, side: THREE.DoubleSide }); var wave = new THREE.Mesh(geometry, material); wave.rotation.set(-Math.PI/2, 0.0, -0.0); const clock = new THREE.Clock(); let v = new THREE.Vector3(); let pos = wave.geometry.attributes.position; el.setObject3D(&#39;WaveMesh&#39;, wave); // Function to animate each vertex of the texture to simulate a wave effect function animate() { const t = clock.getElapsedTime(); for (let i = 0; i &lt; pos.count; i++) { v.fromBufferAttribute(pos, i); const wavex1 = 0.05 * Math.sin(v.x * 2 + t * 3); const wavex2 = 0.05 * Math.sin(v.x * 5 + t * 2); const wavex3 = 0.1 * Math.sin(v.y * 5 + t * 3); pos.setZ(i, wavex1 + wavex2 + wavex3) } pos.needsUpdate = true; requestAnimationFrame(animate); } animate(); } }); &lt;/script&gt; &lt;a-scene&gt; &lt;a-entity position=&#34;0 1 -6&#34; rotation=&#34;0 45 0 &#34; wave-component&gt;&lt;/a-entity&gt; &lt;a-plane position=&#34;0 0 -4&#34; rotation=&#34;-90 0 0&#34; width=&#34;4&#34; height=&#34;4&#34; color=&#34;#7BC8A4&#34;&gt;&lt;/a-plane&gt; &lt;a-sky color=&#34;#ECECEC&#34;&gt;&lt;/a-sky&gt; &lt;/a-scene&gt;</code></pre> </div> </div> <p></p> <p>如果你想让它向另一个方向波动，交换因子或者只旋转平面。</p> </answer> </body></html>

在用户编写的 A-Frame 组件中使用实体的材料定义

我写了一个A-Frame组件（为了这个问题的目的而简化）。 我希望我的组件能够从拥有实体接收材料信息。 我已经写了一个A-Frame组件（为了这个问题的目的而简化）。 我希望我的组件能够从拥有实体接收material信息。 <!DOCTYPE html> <html> <head> <title>Component Test</title> <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script> <script> AFRAME.registerComponent('square', { schema: { size: { type: 'number' } }, init: function () { const sizeOffset = this.data.size / 2; const points = []; points.push(new THREE.Vector2(-sizeOffset, -sizeOffset)); points.push(new THREE.Vector2(sizeOffset, -sizeOffset)); points.push(new THREE.Vector2(sizeOffset, sizeOffset)); points.push(new THREE.Vector2(-sizeOffset, sizeOffset)); var shape = new THREE.Shape(points); var geometry = new THREE.ShapeGeometry(shape); //var material = *** How do I get/inherit the component's material (to pass in to the Mesh method below) var mesh = new THREE.Mesh(geometry); this.el.object3D.add(mesh); }, }); </script> </head> <body> <a-scene> <a-sky color="#606060"></a-sky> <a-entity material="color: purple;" position="-0.5 1.6 -2" geometry="primitive: box; width: 0.2; height: 0.2;"></a-entity> <a-entity material="color: green;" position="0.5 1.6 -2" square="size: 0.3;"></a-entity> </a-scene> </body> </html> 但是当我运行这段代码时，它显示 square 为白色，而不是材料定义中指定的绿色。然而，geometry box 确实尊重材料定义（左边紫色）。 我知道我可以为我的组件创建一个接收颜色的参数，但我想保持组件的通用性，并且还能够更改材料的其他属性，而不必将每个属性都添加到我的组件中。 由于 material 组件将材质分配给由 THREE.Object 获取的 .getObject3D("mesh");，您可以简单地将网格设置为默认 mesh 与 setObject3D("mesh", mesh_object);： <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script> <script> AFRAME.registerComponent('square', { schema: { size: { type: 'number' } }, init: function() { const sizeOffset = this.data.size / 2; const points = []; points.push(new THREE.Vector2(-sizeOffset, -sizeOffset)); points.push(new THREE.Vector2(sizeOffset, -sizeOffset)); points.push(new THREE.Vector2(sizeOffset, sizeOffset)); points.push(new THREE.Vector2(-sizeOffset, sizeOffset)); var shape = new THREE.Shape(points); var geometry = new THREE.ShapeGeometry(shape); var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial()); this.el.setObject3D("mesh", mesh); // set the mesh as the default "mesh" object }, }); </script> <a-scene> <a-sky color="#606060"></a-sky> <a-entity material="color: purple;" position="-0.5 1.6 -2" geometry="primitive: box; width: 0.2; height: 0.2;"></a-entity> <a-entity material="color: green;" position="0.5 1.6 -2" square="size: 0.3;"></a-entity> </a-scene>

如何制作天雨 3d 模型？

我正在用第 8 面墙制作 ar 天空效果我想制作天空雨 3d 模型而不是 2d 纹理我尝试了很多代码但没有一个有效。 请帮忙谢谢！！

A型框架水池组件

我正在尝试在框架中使用对象池，但我似乎无法让它工作。 requestEntity() 抛出错误。是否有如何使用池组件实例化对象的示例？我是...

你能在 A-Frame 中为对象的各个面设置不同的不透明度和颜色吗？

注册新的自定义网格时，如果我能做到这一点会很有帮助。 当面被推到自定义几何体时，您可以为每个面设置颜色和不透明度吗？ 如果不？你能不能...

如何在 A-Frame 的自定义网格中为不同组的索引面设置不同的材质？

我正在尝试使用 THREE.BufferGeometry 使用两个或多个索引面组在 A-Frame 中注册自定义几何图形， 因为许多顶点将被共享， 我想在