Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WebVRExperience A-frame component
import * as AFRAME from "aframe";
AFRAME.registerComponent('hovered_menu_item', {
schema: {
position_down: {default: {x: 0, y: 0, z: 0}},
position_up: {default: {x: 0, y: 0, z: 0.1}},
color_down: {default: "#b4d1ff"},
color_up: {default: "#FFFFFF"},
},
init: function () {
let el = this.el;
this.el.addEventListener('raycaster-intersected', function () {
el.emit("run_down");
});
this.el.addEventListener('raycaster-intersected-cleared', function () {
el.emit("run_up");
});
el.setAttribute("animation__position_down", {
property: "position",
dur: 400,
easing: "easeInSine",
to: this.data.position_down,
startEvents: "run_down",
restartEvents: "run_down",
pauseEvents: "run_up"
});
el.setAttribute("animation__position_up", {
property: "position",
dur: 400,
easing: "easeInSine",
to: this.data.position_up,
startEvents: "run_up",
restartEvents: "run_up",
pauseEvents: "run_down"
});
},
play: function () {
let el = this.el;
el.setAttribute("animation__color_down", {
property: "material.color",
dur: 400,
easing: "easeInSine",
from: this.data.color_up,
to: this.data.color_down,
startEvents: "run_down",
restartEvents: "run_down"
});
el.setAttribute("animation__color_up", {
property: "material.color",
dur: 400,
easing: "easeInSine",
from: this.data.color_down,
to: this.data.color_up,
startEvents: "run_up",
restartEvents: "run_up"
});
}
})
class MenuItem extends React.Component {
render() {
return (
<Entity
className="item intersectable"
controller-clickable
hovered_menu_item={{
position_down: this.state.field.position_down,
position_up: this.state.field.position_up
}}
geometry={{primitive: 'plane', width: 1.0, height: 1.0}}
material={{shader: "flat", color: 'white', opacity: 1.0}}
rotation={{x: 0, y: 0, z: 0}}
position={this.state.field.position_up}
shadow="cast: false; receive: false"
events={{
click: (evt) => {
let el = evt.target;
this.onMenuItemClicked(el, this.state.field.texture)
}
}}>
<a-image
position="0.0 -0.05 0.005"
scale="0.8 0.8 0.8"
src={this.state.field.textureId}/>
</Entity>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.