I am trying to get these animations to loop, but they only run once each then stop. My code is as follows
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box height=0.1 width=3 depth=7 position="0 3.5 0" color="#964800" rotation="45 0 0"
animation__first="property:rotation; from:45 0 0; to:-45 0 0; dur:300 startEvents:loaded, animationcomplete__second;"
animation__second="property:rotation; from:-45 0 0; to:45 0 0; delay:500; startEvents:animationcomplete__first;">
<a-cone radius-bottom=1.5 radius-top=1.5 height=1.5 position="0 .75 2" color="#964800"></a-cone>
</a-box>
</a-scene>
I've tried changing the first and second to 1 and 2 with no change and I tried changing the order of loaded and animationcomplete which, once again, changed nothing.
You're missing a semicolon in the first animation (so i guess the startEvents aren't properly parsed at all, and the first animation starts on loaded by default. With the semicolon it works properly:
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<a-scene>
<a-box height=0.1 width=3 depth=7 position="0 3.5 -5" color="#964800" rotation="45 0 0"
animation__first="property:rotation; from:45 0 0; to:-45 0 0;
dur:300; startEvents:loaded, animationcomplete__second;"
animation__second="property:rotation; from:-45 0 0; to:45 0 0;
delay:500; startEvents: animationcomplete__first;">
<a-cone radius-bottom=1.5 radius-top=1.5 height=1.5 position="0 .75 2" color="#964800"></a-cone>
</a-box>
</a-scene>
Related
I am starting aframe and I cant display some informations (a small text) on pictures.
If you could help me it would be very nice.
I put the script of my pictures in the head of my html page.
<script id="panInfor" type="text/html">
<a-entity class="panInfor"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
sound="on: click; src: #click-sound"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
event-set__click="_target: #text-informations;_delay: 300; material.src: ${src}"
proxy-event="event: click; to: #text-informations; as: switch">
</a-entity>
</script>
In the asset I put this code concerning the text of my picture
<a-text position="1 2 -4" rotation="0 -90 0" id="text-messi" value="Greatest Of All Times" align="center">
</a-text>
And out of the asset, in the ascene, i put this code :
<a-text id="text-informations" src="#text-messi" visible="false"
animation__click="property: visible; dur: 0; to: true; startEvents: switch" color="yellow">
</a-text>
The aim of my code is just to display informations when I click on the pictures.
I wanted to display informations on pictures, retrieving the code of the tutorial of aframe "360 image gallery" but it doesnt work...
Thank you
Afaik you can't place one a-text node in the assets and refer to it from another a-text node - the assets are rather used to load resources like images, models, videos, sound etc.
If you add the text via the value attribute to the animated a-text entity, it's working:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component#5.0.0/dist/aframe-event-set-component.min.js"></script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-entity">
<a-entity position="0 1.6 -2"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; color: green"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
proxy-event="event: click; to: #text-informations; as: switch">
<a-text id="text-informations" value="Greatest Of All Times" align="center" visible="false"
animation__click="property: visible; dur: 0; to: true; startEvents: switch" color="yellow">
</a-text>
</a-entity>
</a-scene>
I'd strongly recommend trying to create a custom component, which would handle the hide-show logic:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component#5.0.0/dist/aframe-event-set-component.min.js"></script>
<script>
// the component has to be defined before the <a-scene>
AFRAME.registerComponent("show-text", {
// a schema, so we can provide different <a-text>s
schema: {
txt: {type: "selector"}
},
// called upon initialisation
init: function() {
// on each click - toggle the visibility
this.el.addEventListener("click", evt => {
// if the text is invalid - lets get outta here
if (!this.data.txt) return;
// get the current visibility
const visible = this.data.txt.getAttribute("visible")
// set the visibility to its opposite
this.data.txt.setAttribute("visible", !visible)
})
}
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-entity">
<a-entity position="-1 1.6 -2"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; color: green"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
show-text="txt: #text-informations">
<a-text id="text-informations" value="Greatest Of All Times" align="center" visible="false"
animation__click="property: visible; dur: 0; to: true; startEvents: switch" color="yellow">
</a-text>
</a-entity>
<a-entity position="1 1.6 -2"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; color: green"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
show-text="txt: #text-informations2">
<a-text id="text-informations2" value="Something Else" align="center" visible="false"
animation__click="property: visible; dur: 0; to: true; startEvents: switch" color="yellow">
</a-text>
</a-entity>
</a-scene>
I'd like to manipulate the internal path of a SVG which is in a separate file and instantiated with a "use"
here is my code
<!DOCTYPE html><meta charset="utf8"/>
<script src="https://ipfs.blockringtm.ml/ipfs/QmZU12UqysToVJjNmWo3E31i4tmmMbWyxZ82Vyse9CQp49/path-data-polyfill.js"></script>
<svg data="logo.svg" type="image/svg+xml" id="logo"
width="120px"
preserveAspectRatio="xMidYMin slice" viewBox="0 0 512 512"
>
<!-- https://stackoverflow.com/questions/65526455/trying-to-access-svg-elements-generated-with-use-with-javascript -->
<!--
SVG use elements are like shadow DOM elements in HTML. Only the attributes
of the USE element itself is exposed via the SVG DOM - you cannot alter
any properties on a single USE element instance that are being cloned
from the original symbol. It's not like a macro.
-->
<use id="logo1" xlink:href="logo.svg#logo"></use>
</svg>
<script>
var svg = document.querySelector('#logo');
var use = svg.querySelector('#logo1');
console.log('use:',use);
var paths = use.querySelectorAll('path'); // FAILED HERE : empty NodeList: []
console.log('paths:',paths);
for (let path of paths) {
var pathdata = path.getPathData();
console.log(pathdata);
}
</script>
The svg file is :
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.1 236.8">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="#606"/>
<stop offset="1"/>
</linearGradient>
</defs>
<path id="pin" fill="#01a49b" d="M30.3 168a94.8 94.8 0 0063.2 27.2 95 95 0 0065.6-21.8c.8-.8 17.6-16 1.2.6l-28 28.2L98 236.8l-68.1-68c-6.5-6.5-12.6-15.5-12.6-15.5a88.1 88.1 0 0013 14.7z"/>
<path if="wrench" fill="#660266" d="M13.5 47.8C36.2 8.5 97-15.8 145 11.9c41.1 23.7 69.1 81.4 37.6 135-17.6 30-49.3 44-65 46.7-4 .7-18.3 1.9-22.5 1.9-1.3-.1-1.8-1.2-1-2.6l17.5-30.8c14.7-4.5 32-11.3 44.2-32.4a66.7 66.7 0 00-26.5-90.8C93.8 18.7 55 37.9 40 63.7A64.5 64.5 0 0051 144l8.2-14.5c2.2-3.8 2.4-4.5-.2-9A46.6 46.6 0 0158 73.3a44.8 44.8 0 0134.5-21.7c5.4-.3 4.8 1 3.7 2.7L80 82.3l9.4 16.3c1.7 3 5 6 8.5 5.9l22-2 15.3-26c1.3-1.9 2.2 0 3 2.2.7 2.2 10.4 16.9-2.5 39.3a45.3 45.3 0 01-37.9 23.4c-4.8-.3-6.1 2.5-8.7 7L65 190A99.7 99.7 0 012.7 121c-6.4-25.7-.8-53.3 10.8-73.3z"/>
</svg>
if I use an <object> tag instead of the <use> I can access the internal path with a path.pathSegList
however it doesn't work with path.getPathData pollyfill as the path is a plain object and not a SVGPathElement.
Questions :
how to I get a SVGPathElement from a path within an Object tag ?
i.e. how to I cast a DOMobject into a SVGPathElement ?
alternatively is there a way to I get and "open" shadow-root with the use tag, do I need to create the tag within the script to keep it open ?
The code (that works) with the object tag instance is :
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf8">
<script src="http://ipfs.blockringtm.ml/ipfs/QmU3jKAewrHV8Wryx2WzT5v72PsgT7wt8FgnL8mqmWk259/path-data-polyfill.js"></script>
<style>
body { border:0; margin:0; padding: 0; height: 100vh; top: 0; }
svg { border: 1px dashed #555 }
</style>
<object id="sotest1" style="width:100px" data="logo.svg" type="image/svg+xml"></object>
<script>
let obj = document.querySelector('#sotest1');
obj.addEventListener("load",function(){
console.log('obj.loaded !');
var svgDoc = obj.contentDocument;
console.log('svgDoc:',svgDoc);
let path1 = svgDoc.querySelector("#pin");
console.log('typeof:',typeof(path1))
console.log('#path.d:',path1.getAttribute('d'));
let paths = svgDoc.getElementsByTagName('path');
for (let p of paths) {
let d = p.getAttribute('d'); // does work but can get p.getPathData() to work
console.log('p.d:',d);
}
},false);
</script>
if you want to get the file I have prepared a gist for it :
https://gist.github.com/DrI-T/145db3eed5905f83333d8127cbf2c6b8
After reading through the a-frame animation documentation, I was working around with some code in JSFiddle to get an idea of how it actually works. Seemed pretty simple... Until I tried to apply it to my own project. What was working in JSFiddle, doesn't work in my project. The console returns the error: "document.querySelector(...).emit is not a function". In the fiddle I was working on, a-frame was set to its 0.3.0 version. I need to use the most recent version - 1.0.4. Is there an alternative to "emit"?
Here's the JSFiddle, and a code snippet. Both are working with the 0.3.0 version of A-Frame.If you change the script src from "https://aframe.io/releases/0.3.0/aframe.min.js" to "https://aframe.io/releases/1.0.4/aframe.min.js" though, you will observe that it no longer works.
https://jsfiddle.net/6y5qbr4z/
function lookAway() {
document.getElementById("myCam").innerHTML = '<a-animation id="away" begin="move-away" attribute="rotation" dur="2000" to="20 20 0"></a-animation>';
setTimeout(function(){document.querySelector('#away').emit('move-away');}, 1)
}
.sceneWrapper {
position: relative;
padding-top: 20px;
height: 100vh;
}
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<button id="btn01" type="button" name="button" onclick="lookAway();">Look Away</button>
<div class="sceneWrapper">
<a-scene embedded>
<a-camera id="myCam" wasd-controls-enabled="false" look-controls="reverseMouseDrag:true">
</a-camera>
<a-sky src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1920px-Equirectangular_projection_SW.jpg"></a-sky>
<a-sphere id="ball" material="color: red" position="0 1.5 -5"></a-sphere>
</a-scene>
</div>
I tried running your examples both the JS fiddle and the code snipet provided. on my local machine i.e through create a html page, add script, css and test,both are working without any errors.
I got this error when I block the aframe.io libraty from loading in the network tab.Can you please confirm that this is not the case.
Are you triggering the lookAway() function before aframe.io library has loaded ?
Is your library loading properly ?
If the above reasons are not one of the reasons for your error.please can you provide more info.
I also checked the checked the documentation for an alernative of .emit function
emit : emits a custom DOM event on the entity. For example, we can emit an event to trigger an animation
So we can trigger custom DOM evennts using javascript as well. please refer snippet for example.
function moveAway() {
document.getElementById("myCam").innerHTML = '<a-animation id="away" begin="move-away" attribute="rotation" dur="2000" to="20 20 0"></a-animation>';
// setTimeout(function(){
// document.querySelector('#away').emit('move-away');},
// 1)
setTimeout(() => document.querySelector('#away').dispatchEvent(new CustomEvent("move-away", {
bubbles: true
})));
}
.sceneWrapper {
position: relative;
padding-top: 20px;
height: 100vh;
}
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<button id="btn01" type="button" name="button" onclick="moveAway();">Move Away</button>
<div class="sceneWrapper">
<a-scene embedded>
<a-camera id="myCam" wasd-controls-enabled="false" look-controls="reverseMouseDrag:true">
</a-camera>
<a-sky src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1920px-Equirectangular_projection_SW.jpg"></a-sky>
<a-sphere id="ball" material="color: red" position="0 1.5 -5"></a-sphere>
</a-scene>
</div>
I get your point now, sorry I didnt notice the version above
The <a-animation> element was deprecated in a-frame 0.9.0 in favor of the animation component.
It should look a little bit like this:
<a-camera id="myCam" wasd-controls-enabled="false" rotation="0 0 0" look-controls="reverseMouseDrag:true" animation="property: rotation; to: 0 360 0; loop: false; dur: 10000; startEvents: move-away">
please refer example implementation example
function moveAway() {
// document.getElementById("myCam").setAttribute("animation", "property: rotation; to: 0 360 0; loop: false; dur: 10000; startEvents: move-away")
// document.getElementById("myCam").innerHTML = '<a-animation id="away" begin="move-away" attribute="rotation" dur="2000" to="20 20 0"></a-animation>';
setTimeout(function(){
document.querySelector('#myCam').emit('move-away');},
1)
}
.sceneWrapper {
position: relative;
padding-top: 20px;
height: 100vh;
}
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<button id="btn01" type="button" name="button" onclick="moveAway();">Move Away</button>
<div class="sceneWrapper">
<a-scene embedded>
<a-camera id="myCam" wasd-controls-enabled="false" rotation="0 0 0" look-controls="reverseMouseDrag:true" animation="property: rotation; to: 0 360 0; loop: false; dur: 10000; startEvents: move-away">
</a-camera>
<a-sky src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1920px-Equirectangular_projection_SW.jpg"></a-sky>
<a-sphere id="ball" material="color: red" position="0 1.5 -5"></a-sphere>
</a-scene>
</div>
Please do let me know if anything else is needed.
Thank you
I cannot show the tooltip normally in IE but normally in Chrome.
Used some js codes to create dynamical label called title.
Add it into the svg.
Everything is right in Chrome with tooltip, but not in IE.
<svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
<path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
</svg>
Here is my javascript:
// Create dynamically label for tooltip
var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
titleEle.appendChild(textString);
langPickerTogglerElement.appendChild(titleEle);
IE will not show any tooltip for the <title> element of the root <svg> element.
svg {border: 1px solid}
<svg>
<title>IE won't show this as a tooltip</title>
<rect x="50" y="50" width="50" height="50">
<title>However this will be in a tooltip even in IE</title>
</rect>
</svg>
fiddle for IE
Specs explicitly allow such behavior:
For reasons of accessibility, user agents should always make the content of the ‘title’ child element to the root svg element available to users. However, this is typically done through other means than the tooltips used for nested SVG and graphics elements, e.g., by displaying in a browser tab.
If you wish the tooltip to appear in this browser you must set the <title> of an inner element.
In your case, it could have been a <g> that would contain both <path> elements, if it wasn't for an other IE oddity where they show the tooltip only when you hover over painted areas (strokes and fills).
So given your paths don't cover the whole svg element, it's kinda risky to hope for your users will hover at the correct place.
So this leaves us with a last solution, which is to append a <rect> which will act as an invisible background covering the whole viewPort and will handle the <title>.
// We are now targetting the <rect> element
var langPickerTogglerElement = document.querySelector('#lang-picker-toggler > rect');
var currentLangElement = document.querySelector('[data-language]');
var titleEle = document.createElementNS('http://www.w3.org/2000/svg', 'title');
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
titleEle.appendChild(textString);
langPickerTogglerElement.appendChild(titleEle);
svg {border: 1px solid}
<span data-language="My title text is awesome"></span>
<svg id="lang-picker-toggler" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="128" height="128">
<!-- our tooltip handler, must be a graphic element for IE -->
<!-- first element so it's set at the background -->
<!-- cover the whole viewPort -->
<!-- fill="none" for less work at rendering -->
<!-- pointer-events=fill so the browser can catch mouse over -->
<rect
x="0" y="0" width="512" height="512"
fill="none"
pointer-events="fill"/>
<path d="M217.982 201.586h-64.499c-5.537 0-10.026 4.489-10.026 10.026s4.489 10.026 10.026 10.026h53.547c-4.72 25.263-26.935 44.446-53.547 44.446-30.037 0-54.473-24.436-54.473-54.473s24.436-54.473 54.473-54.473c14.55 0 28.229 5.667 38.518 15.955 3.916 3.916 10.264 3.916 14.178 0 3.916-3.916 3.916-10.264 0-14.178-14.077-14.077-32.791-21.829-52.697-21.829-41.094 0-74.525 33.431-74.525 74.525 0 41.094 33.431 74.525 74.525 74.525s74.525-33.431 74.525-74.525c.001-5.536-4.488-10.025-10.025-10.025z"/>
<path d="M470.331 92.24H269.728l-26.935-81.355a10.025 10.025 0 00-9.518-6.875H41.669C18.693 4.01 0 22.703 0 45.679v332.412c0 22.976 18.693 41.669 41.669 41.669h203.145l27.073 81.369a10.026 10.026 0 009.513 6.861h188.932c22.976 0 41.669-18.693 41.669-41.669V133.909c-.001-22.976-18.694-41.669-41.67-41.669zM41.669 399.708c-11.919 0-21.616-9.697-21.616-21.616V45.679c0-11.919 9.697-21.616 21.616-21.616h184.364l70.691 213.516a.366.366 0 00.015.043l53.664 162.086H41.669zm295.78-116.433c.805 1.11 10.824 14.877 26.355 34.066-4.377 5.756-9.015 11.474-13.91 17.036l-29.712-89.74h87.441c-6.196 13.031-16.938 33.813-31.692 55.736-13.553-16.921-22.069-28.622-22.249-28.87-3.251-4.482-9.519-5.481-14.002-2.23-4.482 3.25-5.48 9.518-2.231 14.002zM265.946 419.76h75.162l-55.503 59.084-19.659-59.084zm226.002 46.561c0 11.919-9.697 21.616-21.616 21.616H304.575l67.015-71.339-.004-.003c.293-.312.571-.64.823-.991a10.025 10.025 0 001.39-9.022l-16.688-50.402c7.073-7.406 13.68-15.143 19.805-22.965 13.299 15.772 29.037 33.446 45.778 50.187 1.957 1.957 4.524 2.937 7.089 2.937s5.132-.979 7.089-2.937c3.916-3.916 3.916-10.264 0-14.178-17.461-17.461-34.013-36.244-47.687-52.632 21.251-30.503 35.033-59.504 40.535-71.954h21.454c5.537 0 10.026-4.489 10.026-10.026s-4.489-10.026-10.026-10.026h-66.173v-18.047c0-5.537-4.489-10.026-10.026-10.026s-10.026 4.489-10.026 10.026v18.046h-51.406l-37.178-112.292H470.33c11.919 0 21.616 9.697 21.616 21.616v332.412z"/>
</svg>
fiddle for IE
There's a simpler way. You can can just replace this:
var textString = document.createTextNode(currentLangElement.getAttribute('data-language'));
titleEle.appendChild(textString);
with this:
titleEle.textContent = currentLangElement.getAttribute('data-language');
which does work in IE.
I enabled the vr-mode-ui and I would like to have a button inside my aframe scene which enters vr mode by click. My problem is my js gives me a TypeError: document.getElementById(...) is null and I don`t know why!
<script>
AFRAME.registerComponent('enter', {
init: function () {
}
});
document.getElementById('startbutton').addEventListener("click", (e)=>{
scene.enterVR(true);
});
</script>
<a-scene id="scene" antialias="true"; cursor="rayOrigin: mouse" vr-mode-ui="enabled: true">
<a-assets>
<img id="startscreen" src="start_overlay.png">
</a-assets>
<!-- Environment -->
<a-sky id="environment" radius="9" rotation="0 -90 0"; material="shader: flat; src: #xxx"></a-sky>
<!-- Camera + cursor + Startscreen + Interaction-->
<a-entity look-controls>
<a-entity id="start">
<a-plane id="startbutton" class="link"; height="0.5"; width="5"; position="0 -0.7 -2" rotation="0 0 0" color="#ffbff0">
<a-text align="center" value="START" width="10" color="#e143a1"></a-text>
</a-plane>
</a-entity>
<a-entity id="cam" camera rotation="0 0 0" mouse-cursor>
<a-cursor id="cursor" color="red"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__1="_event: mouseenter; color: white"
event-set__2="_event: mouseleave; color: red"
fuse="true"
raycaster="objects: .link"></a-cursor>
</a-entity>
</a-entity>
</a-scene>
I dont know why my button isnt recognized by the js-script!
Could someone help, please! Cheers, Can
The button may not be present in the DOM by the time the code is executed. Either :
1) throw the code into a AFRAME component,
2) place the code after the HTML body, or
3) place it in a window.onload callback:
window.onload = function() {
doSomething();
};
Also, as you can see in the docs, the proper method is to call enterVR(), or exitVR() on the scene element. Make sure the scene reference you use actually holds the scene element.