标签: aframe

如何在A-Frame中使用JavaScript?

我看到A-Frame用于通过标记/ HTML构建虚拟现实体验.如何在A-Frame标记元素旁边使用JavaScript?

aframe

8
推荐指数
1
解决办法
4881
查看次数

如何用A-Frame隐藏元素?

使用A-Frame隐藏元素的最佳方法是什么?

我是否需要从DOM中删除元素?

aframe

8
推荐指数
2
解决办法
3580
查看次数

(A-Frame)本地gltf不会加载; 无法读取未定义的属性"切片"

我从A-Frame学校获取了加载gltf模型的代码.然后我从Khronos加载了Sample Models,这个盒子并尝试加载它,但是我得到了这个错误(好几次)

GLTFLoader.js:979 Uncaught (in promise) TypeError: Cannot read property 'slice' of undefined
at GLTFLoader.js:979
at i (GLTFLoader.js:570)
at GLTFLoader.js:975
at <anonymous>
Run Code Online (Sandbox Code Playgroud)

我可以加载.obj模型并尝试了几个版本的模型,但总是得到错误.
示例代码在本地工作,这意味着它正确加载模型,从aframe cdn获取它.

下面是完成代码

<!DOCTYPE html>
<html>
  <head>
    <title>glTF Model</title>
    <meta name="description" content="glTF Model">
    <script src="https://rawgit.com/aframevr/aframe/b395ea0/dist/aframe-master.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-asset-item id="boxModel" src="Box.gltf"></a-asset-item>
      </a-assets>          
      <a-gltf-model src="#boxModel"></a-gltf-model>
    </a-scene>
  </body>
</html>  
Run Code Online (Sandbox Code Playgroud)

javascript three.js aframe gltf

8
推荐指数
1
解决办法
1835
查看次数

被照亮的对象的纹理在aframe

有没有办法在aframe中为照明对象部件设置特殊纹理?例如,我想为地球设置夜间纹理,其中未被照亮的一侧具有另一种纹理.

编辑:我似乎需要某种着色器,但我找不到任何有用的问题.

编辑2:着色器必须灵活,并且必须使用不同类型的光源和不是完美球体的对象.

shader aframe

8
推荐指数
1
解决办法
353
查看次数

Three.js r111 THREE.ShaderLib.cube 将 tCube 统一到 envMap 问题

我正在使用 AFrame 制作 360 全景查看器,并制作了一个自定义组件来使用天空的立方体贴图。

具有 6 个立方体面的纹理由 THREE.CubeTextureLoader 加载,然后我执行以下代码。

var shader = THREE.ShaderLib['cube'];
shader.uniforms['tCube'].value = texture;

var skyBoxMaterial = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader,
    uniforms: shader.uniforms,
    depthTest: false,
    side: THREE.BackSide,
    transparent: true
});

var size = 1000;
var skyBoxGeometry = new THREE.CubeGeometry(size, size, size);

return new THREE.Mesh(skyBoxGeometry, skyBoxMaterial);
Run Code Online (Sandbox Code Playgroud)

它使用 setObject3D 函数返回我在实体上使用的对象。

使用 AFrame 0.9.2 版(使用 v0.102.2 of Three),这段代码完美运行,我按预期得到了立方体。使用 1.0.1 版(使用 v0.111.5)时,我遇到了一个问题,因为 ShaderLib 被修改并且统一的 tCube 不再存在。我看到有一个 envMap 统一显然用于相同的目的但是当我在这个属性上设置我的纹理时,我在控制台中收到 WebGLProgram 着色器错误

index.js:27291 THREE.WebGLProgram: shader error:  0 35715 false gl.getProgramInfoLog invalid …
Run Code Online (Sandbox Code Playgroud)

three.js aframe

8
推荐指数
1
解决办法
622
查看次数

A-frame 显示鼠标指针功能

我目前正在使用一个使用 A-frame ( https://aframe.io )的场景,我将鼠标指针隐藏在我的场景中。我怎样才能创建一些东西,当一个函数发出时,我的鼠标指针会显示出来,而当另一个函数发生时,我的鼠标指针会隐藏。

目前的 dfeault 是我的鼠标指针被隐藏了。我想要这样,当一个名为“showPointer”的函数发生时,我的鼠标指针将再次显示,当一个名为 hidePointer 的函数发生时,我的鼠标指针将再次隐藏。我怎样才能做到这一点。我的功能:

<script>
function hidePointer() {
//hide mouse pointer
}

function showPointer() {
//show mouse pointer 
} 
</script>
Run Code Online (Sandbox Code Playgroud)

javascript jquery three.js webvr aframe

8
推荐指数
1
解决办法
117
查看次数

如何更改对象A-Frame的轴心点,变换原点或旋转点?

当我画一个<a-box>.本地化是盒子的中心.旋转围绕盒子的中心旋转.如何更改旋转点?

<a-box rotation="0 45 0"></a-box>
Run Code Online (Sandbox Code Playgroud)

aframe

7
推荐指数
1
解决办法
1923
查看次数

是否可以使用自定义标记?

是否可以使用不像下面的"Hiro"标记的定制标记.我可以使用随机形状(例如红色椭圆形)作为标记吗?

如果目前不支持,有人可以指出我可以开始构建此功能的正确方向吗?

在此输入图像描述

javascript augmented-reality three.js aframe

7
推荐指数
2
解决办法
4541
查看次数

从Three.js中的共平点集最适合矩形

首先,我道歉,如果有一个解决方案,但我已经做了大量的挖掘Three.js和A-Frame文档以及Stack Overflow,并没有找到我正在寻找的东西.

我想要做的是从一组我已经知道是共面的Vector3中创建一个最合适的A-Frame平面.如果平面的角度是90的倍数,这可以很容易地完成,但是其他任何东西和Box3s的.setFromPoints()算法都不能按我需要的方式工作.

从Three.js到A-Frame的转换我很可能会处理自己,但是如果有人想解决这个问题,我们非常欢迎他们.我只需要创建一个实际上有意义的矩形平面.

基本上,我想创建一个执行此操作的算法:

创建粗体平面,而不是浪费太多空间的打火机盒/平面.

绘图说明

我不想创建完全符合要点的自定义几何体,这是我已经完成的.我实际上只想要一个只有高度,宽度,位置和旋转属性的A-Frame平面.我明白这不太精确,但它对我正在做的事情来说更为理想.

javascript three.js aframe

7
推荐指数
1
解决办法
502
查看次数

如何在Aframejs中加载3D模型?它目前在threejs中工作正常

我创建了一个3D动画模型,我设法在threejs中运行.

var loader = new THREE.FBXLoader();
loader.load( 'model.fbx', function ( object ) {              
     object.mixer = new THREE.AnimationMixer( object );
     mixers.push( object.mixer );
     console.log(object.animations.length);
     var action = object.mixer.clipAction( object.animations[ 0 ] );
     action.play();
     object.traverse( function ( child ) { 
       if ( child.isMesh ) { 
          child.castShadow = true;
          child.receiveShadow = true; 
       } 
     });
     scene.add( object );
});
Run Code Online (Sandbox Code Playgroud)

它在threejs上运行得非常好,但是如何在aframe中使用它,我正在尝试创建AR应用程序.我没有得到足够的文档,在AFrame中我可以在标记上显示obj模型但是aframe-extras似乎不起作用,但Threejs FBX加载程序工作正常.我需要帮助才能在标记扫描上显示三个场景.

javascript augmented-reality three.js aframe

7
推荐指数
1
解决办法
413
查看次数

标签 统计

aframe ×10

three.js ×6

javascript ×5

augmented-reality ×2

gltf ×1

jquery ×1

shader ×1

webvr ×1