<!doctype html>
<html>
<head>
<script src="https://rawgit.com/aframevr/aframe/b813db0614ac2b518e547105e810b5b6eccfe1c8/dist/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default: ''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute('src', this.data);
});
}
});
</script>
<a-scene>
<a-camera position="0 2 4">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="1" position="-4 2 0" set-sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-sphere>
<a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-sky="32252838043_e8f2be6783_k.jpeg"></a-sphere>
<a-sky></a-sky>
</a-scene>
</body>
</html>
I'm new to a-frame, have not worked much in java script either. The code above works fine for the referenced image, but does not work for the local image. What is actually i'm doing wrong ? I found this example here.
Ensure you are using a local server (e.g., Mongoose, python -m SimpleHTTPServer, or npm install live-server) and that the image is on the same path as your index.html given where you're referencing it form.
Use https://www.cesanta.com/products/binary, it's easy to use. No configuring of server structure in any way needed.
Related
I would like to make a portal in A-Frame. I followed this page on the official website. The portal is displayed, but I encountered 2 issues. Thank you in advance.
The title did not change even though I added a title tag in <a-link title="Forest"...></a-link>
I used VSCode + Live Server for development. When I click on the portal, I expected it to navigate to forest.html, but nothing happened.
My code is as below:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/a-framedc#1.0.7/dist/aframedc.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component#^4.0.0/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene>
<!-- Assets -->
<a-assets>
<img id="forest" src="https://cdn.aframe.io/link-traversal/thumbs/forest.png">
</a-assets>
<a-link title="Forest" href="forest.html" position="0 1 1" image="#forest"></a-link>
<!--Forest Environment-->
<a-entity environment="preset: forest; dressingAmount: 100"></a-entity>
<!--A regular box-->
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<!--Text-->
<a-entity
text="value: Hello, A-Frame!; color: #BBB"
position="-0.9 2 -3"
scale="5 5 5"></a-entity>
</a-scene>
</body>
</html>
There is a warning in the browser console logs related to this:
The primitive a-link has a mapping collision. The attribute title has
the same name as a registered component and has been renamed to
link-title
The issue here is that there is a "title" component in the aframedc module that you have included, and so there is a clash.
https://github.com/fran-aguilar/a-framedc/blob/master/dist/aframedc.js#L90
Assuming you need to include aframedc, follow the advice in the warning, use "link-title" instead of "title" and it will work.
The way the link component works is described here:
https://aframe.io/docs/1.2.0/components/link.html
Specifically, the "on" setting configures the name of an event to use to trigger the link. Default is "click".
So to activate the link, you need to set things up so that you'll get a "click" event when someone clicks on the link entity.
On desktop, you can do that like this:
<a-scene cursor="rayOrigin:mouse" raycaster="objects:[clickable]">
And then set an attribute "clickable" on the <a-link> entity.
The reason for the raycaster component and clickable attribute is that if you enable raycasting without a filter like this, you'll get performance warnings in the console.
Also note that VR will need some different set-up, but in any case, links in VR are a whole other can of worms...
Full working code:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
<script src="https://unpkg.com/a-framedc#1.0.7/dist/aframedc.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component#^4.0.0/dist/aframe-event-set-component.min.js"></script>
</head>
<body>
<a-scene cursor="rayOrigin:mouse" raycaster="objects:[clickable]">
<!-- Assets -->
<a-assets>
<img id="forest" src="https://cdn.aframe.io/link-traversal/thumbs/forest.png">
</a-assets>
<a-link clickable href="forest.html" position="0 1 1" image="#forest" link-title="Forest"></a-link>
<!--Forest Environment-->
<a-entity environment="preset: forest; dressingAmount: 100"></a-entity>
<!--A regular box-->
<a-box color="red" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<!--Text-->
<a-entity
text="value: Hello, A-Frame!; color: #BBB"
position="-0.9 2 -3"
scale="5 5 5"></a-entity>
</a-scene>
</body>
</html>
Also as a Glitch here:
https://glitch.com/edit/#!/make-a-links-work?path=index.html%3A1%3A0
I am getting this error using A-frame VR v0.9.2 "Uncaught DOMException: Failed to execute 'setAttribute' on Element: 0 is not a valid attribute name." when trying to set an invisible entity as visible using Kevin Ngo's aabb-collider component.
<!DOCTYPE html>
<html>
<head>
<script src=".../aframe-v0.9.2.min.js"></script>
<script src=".../aframe-extras.min.js"></script>
<script src=".../aframe-event-set-component.js"></script>
<script src="...aframe-aabb-collider-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item
id="modelo"
response-type="arraybuffer"
src=".../model.glb">
</a-asset-item>
</a-assets>
<a-entity
id="3Dmodelo"
gltf-model="#modelo"
scale="1 1 1"
position="-16.7 0 -7.8"
visible="false">
</a-entity>
<a-entity
id="rig"
position="-5.481 -0.15 13"
rotation="0 0 0"
movement-controls="speed: 0.08"
aabb-collider="objects: a-box">
<a-entity
camera
geometry="primitive: box"
position="0 1.6 0"
look-controls="pointerLockEnabled: false">
</a-entity>
</a-entity>
<a-box id="testeColisao" color="red" position="-5 1 10" event-set__hitstart="modeloVisivel()"></a-box>
</a-scene>
<script type="text/javascript">
function modeloVisivel(){
document.getElementById('3Dmodelo').setAttribute('visible','true')
}
</script>
</body>
</html>
Can anyone help me please as i am struggling with the resolution of this issue. If anyone knows a better aproach for the intended please share.
Thank you.
change event-set__hitstart attribute to
event-set__hitstart="_target: #blackSofa; visible: false"
Here is event-set component's documentation https://github.com/supermedium/superframe/tree/master/components/event-set
According to it you can't set function names
i am having trouble animating in AFRAME element/entities. In the following demo i have set up a box and on top of the box a text entity that needs to animate in (scale up) when i hover the mouse over the box the text element does not animate in or show up. Can anyone help?
https://jsfiddle.net/0d6ymk21/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="camera" camera mouse-cursor look-controls>
<a-cursor fuse="true" color="blue"></a-cursor>
</a-entity>
<a-entity
id="#fernando"
text="color: black;value: Fernando;"
scale=".1 .1 .1"
position="2 1 -2"
></a-entity>
<a-box box position="1 0 -2" color="red" activate-name=""></a-box>
</a-scene>
</body>
</html>
-- JS:
AFRAME.registerComponent("activate-name", {
schema: {
default: ""
},
init: function() {
var data = this.data;
var el = this.el;
var fernando = document.querySelector("#fernando");
el.addEventListener("mouseenter", function() {
fernando.setAttribute("scale", "2 2 2");
});
}
});
Two issues here:
1) If you want to grab fernando using document.querySelector('#fernando') - the id needs to be fernando instead of #fernando.
2) The component declaration - activate-name in this case - needs to be done before the component is attached in html. You can simply throw it it a <script> tag before the scene
<script>
AFRAME.registerComponent('foo', ...
</script>
<a-scene>
<a-entity foo></a-entity>
</a-scene>
even better - keep it in a separate .js file and include it in the <head>.
Fiddle here.
This is necessary because jsfiddle executes the code part when the window is loaded.
I Am unable to retrieve the text from the textarea as I just want to scale a box by typing the x-factor as the input. But the input is not being retrieved for some reason. Please help!...here is the code:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-textarea-component/dist/aframe-textarea-component.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#6EBAA7"></a-sky>
<a-box id="redbox" position="3 2.5 -2" color="red"></a-box>
<a-entity position="0 1 -2" id="inputText" textarea="backgroundColor:white; color:black; cols:5; rows:1;value:2;"></a-entity>
<a-input postion="0 2 -2"></a-input>
<a-text id="outputText" position="0 2 -2" value="Hello"></a-text>
<a-camera position="0 1 1">
<a-cursor color="yellow"></a-cursor>
</a-camera>
<a-entity id="select-button" geometry="primitive: box" material="color:red" position="0 0 -2"></a>
</a-scene>
<script>
var box = document.querySelector('#redbox')
var printText = document.querySelector('#inputText');
document.querySelector('#select-button').addEventListener('click',function(){
box.setAttribute("scale",
{
x : parseInt(printText.getAttribute('textarea').value),
y : 1.5,
z : 1.5
}
);
});
</script>
</body>
</html>
Edit: I tried changing the code in javascript as follows:
parseInt(printText.getAttribute('textarea').text
It still does not work!!
The textarea component does not expose the value directly but you can do:
document.querySelector('#inputText').components.textarea.textarea.value
The latest version (0.3.0) of aframe-textarea-component now includes a getText() method which you can use to get the current text.
document.querySelector('#inputText').components.textarea.getText();
I try to work with a raycaster, but i can't seem te get it to work(nothing shows in my console). I tried the example on: https://aframe.io/docs/0.5.0/components/raycaster.html
Javascript file
AFRAME.registerComponent('collider-check', {
dependencies: ['raycaster'],
init: function () {
this.el.addEventListener('raycaster-intersected', function () {
console.log('Player hit something!');
});
}
});
index.html
<a-scene>
<a-entity id="player" collider-check>
<a-entity raycaster="objects: .collidable" position="0 -0.9 0" rotation="90 0 0"></a-entity>
</a-entity>
<a-entity class="collidable" geometry="primitive: box" position="1 0 0"></a-entity>
</a-scene>
I try to walk in al possible directions and nothing shows in my console. I run my code in google chrome on a xampp server.
Hope someone can explain to me what is going on!
Try this structure. Make sure the component is registered before the A-Frame HTML.
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="collider-check.js"></script>
</head>
<body>
<a-scene>
<a-entity collider-check></a-entity>
</a-scene>
</body>
</html>