我看到A-Frame用于通过标记/ HTML构建虚拟现实体验.如何在A-Frame标记元素旁边使用JavaScript?
我从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) 有没有办法在aframe中为照明对象部件设置特殊纹理?例如,我想为地球设置夜间纹理,其中未被照亮的一侧具有另一种纹理.
编辑:我似乎需要某种着色器,但我找不到任何有用的问题.
编辑2:着色器必须灵活,并且必须使用不同类型的光源和不是完美球体的对象.
我正在使用 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) 我目前正在使用一个使用 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) 当我画一个<a-box>.本地化是盒子的中心.旋转围绕盒子的中心旋转.如何更改旋转点?
<a-box rotation="0 45 0"></a-box>
Run Code Online (Sandbox Code Playgroud) 首先,我道歉,如果有一个解决方案,但我已经做了大量的挖掘Three.js和A-Frame文档以及Stack Overflow,并没有找到我正在寻找的东西.
我想要做的是从一组我已经知道是共面的Vector3中创建一个最合适的A-Frame平面.如果平面的角度是90的倍数,这可以很容易地完成,但是其他任何东西和Box3s的.setFromPoints()算法都不能按我需要的方式工作.
从Three.js到A-Frame的转换我很可能会处理自己,但是如果有人想解决这个问题,我们非常欢迎他们.我只需要创建一个实际上有意义的矩形平面.
基本上,我想创建一个执行此操作的算法:
创建粗体平面,而不是浪费太多空间的打火机盒/平面.

我不想创建完全符合要点的自定义几何体,这是我已经完成的.我实际上只想要一个只有高度,宽度,位置和旋转属性的A-Frame平面.我明白这不太精确,但它对我正在做的事情来说更为理想.
我创建了一个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加载程序工作正常.我需要帮助才能在标记扫描上显示三个场景.