See the image below. Pardon if this is something obvious I'm missing - I'm new to A-frame and couldn't find anything about this anywhere.
Basically, when I pass a semi-transparent sphere in front of a text entity, the text disappears. It's SO WEIRD.
Here's my code:
<a-scene>
<a-entity camera look-controls>
<a-entity id="wand" position="0 -4 -4">
<a-torus position="0 3.75 0" radius="1.25" radius-tubular=".02" segments-tubular="50" color="#ff5555">
<a-sphere scale="1.25 .2 1.25" rotation="0 90 90" material="side: double; color: #ffffff; transparent: true; opacity: 0.2"></a-sphere>
</a-torus>
<a-box position="0 0 0" height="5" depth=".1" width=".2" color="#ff5555"></a-box>
</a-entity>
</a-entity>
<a-text value="HELLO" position="0 0 -4" geometry="primitive:plane"></a-text>
<a-sky color="#87cefa"></a-sky>
</a-scene>
</body>
By default objects are rendered in order they are added to scene. Swap the order of your sphere and text defined in the HTML
Related
Couldn't find any clear and straightforward answers to this question. Im using Aframe to build the intro page to a website (https://nightmarinparis.neocities.org/). The issue im having is turning the spinning Twitter and Instagram blocks into links.
What I want to happen:
Box outline is highlighted when cursor touches box
when clicked it should take me to a different webpage (ex: google.com)
So far this is all I have as far as the code. I feel like i've tried everything including the linkcontrols component given by AFrame (https://github.com/aframevr/aframe/blob/master/examples/showcase/link-traversal/js/components/link-controls.js). Any help accomplishing this would be amazing. Thanks in advance!
<html>
<meta charset="utf-8" />
<script src="https://cdn.rawgit.com/aframevr/aframe/v0.4.0/dist/aframe-master.js"></script>
<!-- For Rain -->
<script src="https://unpkg.com/aframe-animation-component#3.2.1/dist/aframe-animation-component.min.js"></script>
<!-- For Linking -->
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/js/components/aframe-tooltip-component.js"></script>
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/js/components/camera-position.js"></script>
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/js/components/ground.js"></script>
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/js/components/link-controls.js"></script>
<script src="https://raw.githubusercontent.com/aframevr/aframe/master/examples/showcase/link-traversal/shaders/skyGradient.js"></script>
<title>Nightmares In Paris </title>
<body>
<a-scene fog="type: exponential; color: #AAA" density=".00005" raycaster="far: 100; objects: [link];" cursor="mode: mouse" camera-position>
<a-entity position="2.513 4.939 -50" id="snow" particle-system="preset: rain; color: #24CAFF; particleCount: 2000; size: .20;" opacity="3"></a-entity>
<a-assets>
<img id="sky" src="Storm.jpg">
<a-asset-item id="bat" src="bat.obj"></a-asset-item>
<a-asset-item id="bigbat" src="bigbat_morph.obj"></a-asset-item>
<a-asset-item id="tower" src="https://nightmarinparis.neocities.org/eiffel.obj"></a-asset-item>
</a-assets>
<!-- Sky -->
<a-sky src="#sky" material="" geometry=""></a-sky>
<!-- Eiffel Tower -->
<a-obj-model src="#tower" position="2.513 65 -295" material="color:#121212" obj-model="">
<a-animation attribute="rotation" dur="5000" to="0 -360 0" repeat="indefinite"></a-animation>
</a-obj-model>
<!-- ComingSoon -->
<a-box width="100" height="100" depth="100" position="2.513 4.939 -370" src="https://nightmarinparis.neocities.org/comingsoongraphic.png">
<a-animation attribute="rotation" dur="5000" to="0 360 0" repeat="indefinite"></a-animation>
</a-box>
<!-- Twitter Social Box -->
<a-box width="100" height="40" depth="100" position="2.513 -65 -370" src="https://nightmarinparis.neocities.org/twitter.png">
<a-animation attribute="rotation" dur="5000" to="0 -360 0" repeat="indefinite"></a-animation>
<a-link href="https://google.com"></a-link>
</a-box>
<!-- Instagram Social Box -->
<a-box width="100" height="40" depth="100" position="2.513 -110 -370" src="https://nightmarinparis.neocities.org/Instagram.png">
<a-animation attribute="rotation" dur="5000" to="0 360 0" repeat="indefinite"></a-animation>
<a-link href="https://google.com"></a-link>
</a-box>
<!-- Test Links -->
<!-- Bats -->
<a-obj-model src="#bigbat" mtl="bigbat_morph.mtl" position="513.517 546.477 -1655.234" rotation="-36.326 150.058 -128 .801" material="color:#121212" obj-model="">
</a-obj-model>
<a-obj-model src="#bat" position="613.517 546.477 -1655.234" rotation="-36.326 150.058 -128 .801" material="color:#121212" obj-model="">
</a-obj-model>
<a-obj-model src="#bat" position="-909.061 546.477 -2422.7" rotation="-59.01465289847479 131.6084055415501 -112.29972784564136" material="color:#121212">
</a-obj-model>
<a-obj-model src="#bat" position="-122.324 -534.864 -1486.223" rotation="26.35605857601787 27.559269945792597 31.455382952682196" material="color:#121212">
</a-obj-model>
<a-obj-model src="#bat" position="1786.062 368.994 -2422.7" rotation="31.341 29.049 34.549" material="color:#121212" obj-model="">
</a-obj-model>
<a-obj-model src="#bat" position="-234.581 1009.819 -4363.575" rotation="31.340791393656033 29.048960213132737 34.54935504638864" material="color:#121212">
</a-obj-model>
<a-entity link="href: http://cerberus-usa.net; title: Link; image: storm1.jpg"></a-entity>
<!-- Eiffel Tower -->
<!-- Buttons -->
<a-entity cursor="fuse:true;fuseTimeout:500" position="0 0 -1" geometry="primitive:ring;radiusInner:0.02;radiusOuter:0.03" material="shader:flat;color:cyan" raycaster="">
</a-entity>
<a-entity position="0.148 -10.937 0" scale="0.62 1 1" rain="count:10000;color:#5353ff;height:100;" mixin="null" texture="rainrain.png">
</a-entity>
</a-scene>
This example should help:
https://glitch.com/edit/#!/a-frame-mouse-click-example?path=index.html:1:0
For the hover, you could use the event_set component (though outline is a bit harder, perhaps there's an outline component out there) and then use js for click handlers to navigate to another url:
Hover example:
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow
event-set__enter="_event: mouseenter; color: #026fc9"
event-set__leave="_event: mouseleave; color: #4CC3D9">
</a-box>
For the click and navigating to another site, something like this could work:
<script>
AFRAME.registerComponent('navigate-on-click', {
schema: {
url: {default: ''}
},
init: function () {
var data = this.data;
var el = this.el;
el.addEventListener('click', function () {
window.location.href = data.url;
});
}
});
</script>
Then use that on the entities:
<a-box navigate-on-click="url: http://google.com"></a-box>
One more thing, for your camera element you'll want the rayOrigin property instead of 'mode':
<a-entity camera="" look-controls cursor="rayOrigin: mouse"></a-entity>
The docs reference this Codepen. However this code does not seem to work with the latest version of A-Frame v0.4.0.
What is the best practice to implement this same visual feedback in v0.4.0.
In particular I'd like to change the properties of my target entity on hover over, hover out.
This is the code that is in the Codepen:
<a-scene>
<a-assets>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
<a-mixin id="cube-hovered" material="color: magenta"></a-mixin>
<a-mixin id="cube-selected" material="color: cyan"></a-mixin>
<a-mixin id="red" material="color: red"></a-mixin>
<a-mixin id="green" material="color: green"></a-mixin>
<a-mixin id="blue" material="color: blue"></a-mixin>
<a-mixin id="yellow" material="color: yellow"></a-mixin>
<a-mixin id="sphere" geometry="primitive: sphere"></a-mixin>
</a-assets>
<a-entity position="0 2.2 4">
<a-entity camera look-controls wasd-controls>
<a-entity position="0 0 -3"
geometry="primitive: ring; radiusOuter: 0.30;
radiusInner: 0.20;"
material="color: cyan; shader: flat"
cursor="maxDistance: 30; fuse: true">
<a-animation begin="click" easing="ease-in" attribute="scale"
fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
<a-animation begin="fusing" easing="ease-in" attribute="scale"
fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
</a-entity>
</a-entity>
</a-entity>
<a-entity position="-3.5 1 0">
<a-entity mixin="cube red">
<a-animation begin="click" attribute="position" from="0 0 0"
to="0 0 -10" dur="2000" fill="both"></a-animation>
</a-entity>
</a-entity>
<a-entity position="0 1 0">
<a-entity mixin="cube green">
<a-animation begin="click" attribute="rotation" to="0 360 0"
easing="linear" dur="2000" fill="backwards"></a-animation>
</a-entity>
</a-entity>
<a-entity position="3.5 1 0" rotation="0 45 0">
<a-entity mixin="cube blue">
<a-animation begin="click" fill="forwards" repeat="1"
direction="alternate" attribute="position" from="0 0 0"
to="15 0 0" dur="2000"></a-animation>
</a-entity>
</a-entity>
<a-entity position="0 3 0" class="clickable" mixin="cube yellow"
rotation="0 45 0" scale=".5 .5 .5"></a-entity>
</a-scene>
Any help appreciated.
It seems to sort of work, but if you want hover effects rather than click, change the begin attribute to point to a different event name.
<a-entity position="3.5 1 0" rotation="0 45 0">
<a-entity mixin="cube blue">
<!-- Mouse-enter hover. -->
<a-animation begin="mouseenter" fill="forwards" repeat="1"
direction="alternate" attribute="position" from="0 0 0"
to="15 0 0" dur="2000"></a-animation>
</a-entity>
</a-entity>
I ended up using #ngokevin aframe-event-set-component. It's an A-Frame component to:
register event listeners that set properties. Replacement for old undocumented Declarative Events API.
This created the functionality that I needed.
I want to make an animation for a box, which makes the box is coming closer and closer to the user. I tried this, but this doesn't worked for me:
<a-entity id="enemy">
<a-box material="src: #texture_4" width="0" height="15" depth="4" transparent="true" opacity="0.75" position="0 0 -150" rotation="0 100 0" scale="2 0.5 3"></a-box>
<a-animation atribute="position" to="0 0 0" fill="forwards"></a-animation>
</a-entity>
attribute was misspelled.
<a-animation attribute="position" to="0 0 0" fill="forwards"></a-animation>
And you need to animate the box, not the box's parent. The code you have is animating enemy from 0 0 0 to 0 0 0.
<a-entity>
<a-box><a-animation/></a-box>
</a-entity>
I've just wanted to create a visualisation using A-frame library, in which user is "inside a cube" and on sides there are canvas images embedded. I've started preparing the scene using a-plane. That is what I've achived.
http://codepen.io/LuoXiahong/pen/LRNJNb
<a-scene>
<a-assets>
</a-assets>
<!-- Basic plane. -->
<a-plane color="#ff0000" height="2" width="2" position="0 0 0" rotation="-90 0 0"></a-plane>
<!-- Front-->
<a-plane color="#00ff00" height="2" width="2" position="0 1 -1" rotation="0 0 90"></a-plane>
<!--Back - does not display-->
<a-plane color="#0000ff" height="2" width="2" position="0 1 1" rotation="0 0 90"></a-plane>
<!-- Left-->
<a-plane color="#ffff00" height="2" width="2" position="-1 1 0" rotation="0 90 0"></a-plane>
<!-- Right-->
<a-plane color="#ff00ff" height="2" width="2" position="1 1 0" rotation="0 -90 0"></a-plane>
<!--Top plane - does not display -->
<a-plane color="#00ffff" height="2" width="2" position="0 2 0" rotation="-90 0 0"></a-plane>
</a-scene>
I have problem with displaying top and back side of my cube. Is there anyone, who could help me?
By default in THREE.js (and therefore A-Frame), faces only render one side or the other. Your top plane is just rotated the wrong way, so it's only visible from the top. You can change its rotation to 90 0 0 to fix that, or add side="back" or side="double" to your <a-plane /> to change which side(s) of the plane are shown. More details here.
I wanted to build a house tour using a-frame. The house has 6 rooms that you can explore. I have read that we can use canvas inside a-scene. I wonder if its possible to have multiple canvas like canvas="canvas: scene1", scene2, and so on.
Here is my example code for the first scene
<a-scene canvas="canvas: scene1">
<a-assets>
<img id="abtus" src="images/about.jpg">
<img id="led" src="images/2.jpg">
<img id="crt" src="images/3.jpg">
<img id="scm" src="images/4.jpg">
<img id="dev" src="images/5.jpg">
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
<a-mixin id="black" material="color: black"></a-mixin>
<a-mixin id="yellow" material="color: #EB9C27"></a-mixin>
<a-mixin id="link" geometry="primitive: plane; width: 0.8; height: 0.8">
<a-mixin id="link-selected" geometry="primitive: plane; width: 1.4; height: 1.4">
</a-mixin>
</a-assets>
<!-- camera -->
<a-entity camera no-click look-controls>
<a-entity id="cursor" position="0 0 -3"
geometry="primitive: ring; radiusOuter: 0.1;
radiusInner: 0.05;"
material="color: green; shader: flat"
cursor="maxDistance: 900; fuse: true; timeout=1500">
<a-animation begin="click" easing="ease-in" attribute="scale"
fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
<a-animation begin="fusing" easing="ease-in" attribute="scale"
fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
</a-entity>
</a-entity>
<a-entity
geometry="primitive:sphere;radius:5000;segmentsWidth:64;segmentsHeight:64"
material="shader:flat;color:#ffffff;fog:false;src:abtus"
scale="-1 1 1"
id="photosphere">
</a-entity>
</a-scene>
Rather than trying to set up multiple scenes, it would be easier to just have your different rooms defined as a-entitys and display them one at a time with javascript. Then you can just have one scene for everything and have an easy way to transition with animations (say by animating opacity of the different room entities when switching)