aframe | 易学教程

CORS error when I load image from another server inside a-sky tag

阅读更多关于 CORS error when I load image from another server inside a-sky tag

问题 I am trying to to use a texture from my own hosted webserver but putting it into the asset-item tag I get the following error. > Access to Image at 'http://192.168.137.1:3000/cat2.jpg' from origin > 'http://localhost' has been blocked by CORS policy: No > 'Access-Control-Allow-Origin' header is present on the requested > resource. Origin 'http://localhost' is therefore not allowed access. The picture is accessible, since I can see it in the webinspector. It works perfectly in a simple image

Is it possible to use custom markers?

阅读更多关于 Is it possible to use custom markers?

问题 Is it possible to use bespoke markers that do not resemble the "Hiro" marker like below. Could I potentially use a random shape (a solid red oval for example) as a marker? If this is not currently supported, could someone point me into the right direction to where I might start building this functionality? 回答1: AR.js supports custom markers. Make any silly image with the marker generator. Let ar.js know that you want to use your marker: <a-marker type="pattern" url="patterns/mypattern.patt">

a-entity text only showing when created by the Inspector

阅读更多关于 a-entity text only showing when created by the Inspector

问题 I've been trying to do something super simple, such as displaying some text. It was working a couple of hours back, but now it its not. This is the exact code: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://aframe.io/releases/0.5.0/aframe.min.js" async></script> <meta name="description" content="Science Labs for Homeschoolers in Virtual Reality"> </head> <body> <a-scene> <a-assets> <img id=

Aframe.io: Add border to <a-curvedimage> on mouseover using

阅读更多关于 Aframe.io: Add border to on mouseover using

问题 How would I add a border to a curved image when selected? The following code will change the material color of the image however I'd prefer to add a border or glow instead. AFRAME.registerComponent('selectable', { init: function () { var el = this.el; this.el.addEventListener('mouseenter', function (evt) { this.setAttribute('material', 'color', 'blue'); }); this.el.addEventListener('mouseleave', function (evt) { this.setAttribute('material', 'color', ''); }); } }); Here is a JSBIN showing

AFrame extend component and override

阅读更多关于 AFrame extend component and override

问题 I am trying to extend the a-animation component but override some functionality. I want to add a state attribute to the parent "el", and only if the parent has that state will a mouseenter event actually trigger the animation. I am hoping I don't need to re-write or require a Pull request to facilitate this additional functionality as that will slow down testing and usability for me, but I would like to be able to use the main code and only "add or override" functionality. 回答1: I came here

A-frame score counter with multiple objects

阅读更多关于 A-frame score counter with multiple objects

问题 I've looked at this answer: Implementing a score counter in A-Frame ... but cannot figure out how to write a similar function that would work for multiple objects, since querySelector only finds the first element. I'm trying to create a scene with 5-8 objects, and each one can only be clicked once. When an object is clicked, the counter will increment by 1. 回答1: Either use querySelectorAll: var targets = querySelectorAll('a-box')` for (var i = 0; i < targets.length; i++) { // Add event

How do you create links in a-frame?

阅读更多关于 How do you create links in a-frame?

问题 I'm trying to link these curved images in a-frame to my other HTML Pages which are: hall.html clock.html titanic.html I've researched it online but haven't been able to find an answer so if anyone has any experience with a-frame the help would be appreciated. Essentially what I'm trying to do is when someone looks at one of the curved images in a-frame it takes them to the HTML page. Thanks <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>360Belfast</title> <meta name="description"

aframe cardboard button (magnet) click does not trigger

阅读更多关于 aframe cardboard button (magnet) click does not trigger

问题 In my aframe project i want to controll the movement speed with the cardboard magnetic button => start/stop with cardboard button. On my desktop and phone the click event works like i want but if i put my iphone in the cardboard the button "click" doesn't trigger. If i touch with my finger on the scene it works... Does the cursor need some settings to have access to the cardboard button? I tested the button in the google cardboard app and it worked. Here is a little example of what i have.

aframe vector unproject not working and not sure?bug?

阅读更多关于 aframe vector unproject not working and not sure?bug?

问题 I try used threejs to test out simple 3D plane without mesh object just zero plane base on camera with unproject and it work. But I try on Aframe it didn't work and there is bug. getInverse > m.elements error that it show on the console log. Here simple example of Aframe. https://gist.github.com/Lightnet/8fb3d4a7c5f3ed2b3865bf894aecb9b8 Any way to solve this? 回答1: You shouldn't perform your operations on the camera = document.querySelector('[camera]'); , because it grabs the a-frame's wrapper

Implementing a score counter in A-Frame

阅读更多关于 Implementing a score counter in A-Frame

问题 I'm trying to implement a score counter in my Aframe scene, and so far I have this code but it isn't working. Would someone be able to take a look at the code below and spot the mistake I'm making? Many Thanks. D AFRAME.registerComponent('score counter', { schema: { el: { type: 'selector' }, score:{ type: 'int', default: 0 }, tick: function () { var sceneEl = document.querySelector('a-scene'); var el1 = this.el; var el2 = this.data.el; var entity = document.querySelector('#score'); sceneEl