aframe | 易学教程

AFrame: position offset units when adding new Object3D to the current one

阅读更多关于 AFrame: position offset units when adding new Object3D to the current one

问题 I'm trying to add an Object3D to my gltf model and place it above the model. I'm doing it the following way: this.el.addEventListener('model-loaded', () => { this.bar = new MyCustomObject3D(); const size = new THREE.Vector3(); let box = new THREE.Box3().setFromObject(this.el.object3D); box.getSize(size) let height = size.y + 1; this.bar.position.set(0, height, 0); this.el.setObject3D("bar", this.bar); // same result: // this.el.object3D.add(this.bar); }) The height is 2 and if I placed an

A-frame: How to attach an object to a point on a model (and/or it's bones)

阅读更多关于 A-frame: How to attach an object to a point on a model (and/or it's bones)

问题 I want to attach an object* to a particular bone, so it moves along with that bone (think putting a hat on a character's head, say). In three.js, I could do something like: mesh.skeleton.bones[someindex].add(mesh2) What's the best way to do this in a-frame? An alternative might be to parent an object to a specific vertex on the model, but I'm not sure how to do that either. *: By "object", I think I mean "entity with position and rotation" in A-frame terms 回答1: As far as i know, a-frame has

Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

阅读更多关于 Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

问题 I'm really new to A-Frame and Ar.js, literally found out about this and started working on this today. It's for a project I'm doing and I'm using this tutorial https://aframe.io/blog/arjs3/#creating-image-descriptors I followed the instructions and uploaded the 'dinosaur' image into an NFT creator. It said I would get three images downloaded, I did and they end with fset3, fset and iset. I tried clicking on the downloaded images and got a message saying 'There is no application set to open

Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

阅读更多关于 Image Tracking and Location-Based AR with A-Frame and AR.js 3 having a problem with descriptors

Autoplaying videosphere from A-frame is not working on any browser(Safari/Chrome)

阅读更多关于 Autoplaying videosphere from A-frame is not working on any browser(Safari/Chrome)

问题 I'm working on some A-frame project, but videosphere is not autoplaying its source. I rendered a sphere video from cinema4d and injected metadata, and I can see the source is loaded, but it is not played. I originally wanted to play 60MB video locally, but even when I cut the video into less than 1MB, it is still not working so I don't think it's not about the size. I tried both a video with a sound, and without a sound, and both are not working. I also tried which worked in other person's

How to create a custom square in a-frame

阅读更多关于 How to create a custom square in a-frame

问题 How can I create a custom square registering a new component in a-frame? I am trying to update the example found here https://github.com/aframevr/aframe/blob/master/docs/components/geometry.md under the heading "Register a Custom Geometry" Below is what I have tried - first the js AFRAME.registerGeometry('example', { schema: { vertices: { default: ['-10 10 0', '-10 -10 0', '10 -10 0', '10 -10 0'], //added a 4th set of dimensions here } }, init: function (data) { var geometry = new THREE

How to create a custom square in a-frame

阅读更多关于 How to create a custom square in a-frame

Change the color of an object (.dae or gltf) in “AR.JS”

阅读更多关于 Change the color of an object (.dae or gltf) in “AR.JS”

问题 I'm trying to change the color of an object I created in blender. I can change the color of objects like "a-box, a-sphere" in the html code itself, but with objects inside tree.js (gltf or .dae - collada) I cannot. CodePen (This is just a test environment for future application in my real project (AR.JS)) <html> <head> <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script> </head> <body> <a-scene> <a-gltf-model id="test" src="https://raw.githubusercontent.com/KurtRodrigues

setting FOV=120 in AFRAME doesn't work in VR-MODE?

阅读更多关于 setting FOV=120 in AFRAME doesn't work in VR-MODE?

问题 I set camera fov to be 120: <a-camera fov="120"></a-camera> It works well in regular mode (shows 120 fov correctly) but when I enter vr-mode in a mobile device it returns to 80. Is it a bug? see reproduction here I also opened an issue in aframe github issue page 回答1: It's not a bug. It's expected behavior. FOV and other camera parameters are supplied by the WebVR / WebXR API when in VR mode. They're specific to the headset characteristics (IPD, lenses properties...) and cannot be overridden.

AFrame: how to use flat shading on a mesh

阅读更多关于 AFrame: how to use flat shading on a mesh

问题 The AFrame performance docs (https://github.com/aframevr/aframe/blob/master/docs/introduction/best-practices.md) recommend pre-baked lighting. I have done this, so now I'd like my mesh to use flat shading. However I'm unclear how to do this? <a-gltf-model src="..." material="shader: flat"> This has no effect. I also tried iterating the nodes in three.js and setting each material to flat, but that didn't work either. Complete code trying a bunch of things: <html> <head> <script src="https:/