Support
Quality
Security
License
Reuse
Coming Soon for all Libraries!
Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
:eyeglasses: Virtual Reality Made Simple: A-Frame handles the 3D and WebVR boilerplate required to get running across platforms including mobile, desktop, Vive, and Rift just by dropping in <a-scene>. :heart: Declarative HTML: HTML is easy to read and copy-and-paste. Since A-Frame can be used from HTML, A-Frame is accessible to everyone: web developers, VR enthusiasts, educators, artists, makers, kids. :electric_plug: Entity-Component Architecture: A-Frame is a powerful framework on top of three.js, providing a declarative, composable, reusable entity-component structure for three.js. While A-Frame can be used from HTML, developers have unlimited access to JavaScript, DOM APIs, three.js, WebVR, and WebGL. :zap: Performance: A-Frame is a thin framework on top of three.js. Although A-Frame uses the DOM, A-Frame does not touch the browser layout engine. Performance is a top priority, being battle-tested on highly interactive WebVR experiences. :globe_with_meridians: Cross-Platform: Build VR applications for Vive, Rift, Daydream, GearVR, and Cardboard. Don't have a headset or controllers? No problem! A-Frame still works on standard desktop and smartphones. :mag: Visual Inspector: A-Frame provides a built-in visual 3D inspector with a workflow similar to a browser's developer tools and interface similar to Unity. Open up any A-Frame scene and hit <ctrl> + <alt> + i.
Example
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
QUESTION
How to make a entity clickable which is getting generated dynamically in networked A-Frame?
Asked 2022-Mar-30 at 09:13I am using a networked A-frame to generate a new entity when the page is loaded. I want to add a few functionalities on those entities like hover, on click, etc. I tried making it clickable but it didn't work.
function rigClick(){
console.log("Entity Clicked");
}
<a-scene>
<a-entity id="rig" onclick="rigClick()">
<a-entity
id="foo"
networked="template:#rig-template;attachTemplateToLocal:false;"
camera="active:true;"
position="-27 2.5 24"
wasd-controls="acceleration:12;"
look-controls
spawn-in-circle="radius:2"
>
</a-entity>
</a-entity>
</a-scene>
I also tried using the register component but I am unable to get the results.
AFRAME.registerComponent('click-handler', {
init: function () {
let entity = document.querySelector('#rig')
entity.addEventListener('click', (e) => {
console.log("You just clicked on entity");
})
}
});
<a-scene>
<a-entity id="rig">
<a-entity
id="foo"
networked="template:#rig-template;attachTemplateToLocal:false;"
camera="active:true;"
position="-27 2.5 24"
wasd-controls="acceleration:12;"
look-controls
spawn-in-circle="radius:2"
click-handler
>
</a-entity>
</a-entity>
ANSWER
Answered 2022-Mar-30 at 09:13If you want to use your mouse, you need a cursor
which will map 2D mouse clicks onto 3D rays checking whats under the mouse cursor:
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
// declare a component
AFRAME.registerComponent("click-detector", {
// called upon initialisation
init: function() {
// when a click is detected
this.el.addEventListener("click", () => {
// log "clicked"
console.log("clicked")
})
}
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-sphere">
<a-sphere position="0 1.25 -2" radius="1.25" color="#EF2D5E" click-detector></a-sphere>
</a-scene>
Works the same in aframe-networked as long as you add the component to the networked-template
so that every new 'player' has the component attached:
<template id="avatar-template">
<a-entity class="avatar">
<a-sphere class="head" scale="0.45 0.5 0.4" click-detector></a-sphere>
</a-entity>
</template>
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Explore Related Topics