So I made this so far as my cursor:
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"
id="cursor">
</a-entity>
What I'm trying to do is change the radiusInner to 1 from 0.02 using jquery. I tried:
$("#cursor").attr("geometry","radiusInner","1");
and
$("#cursor").attr("geometry.radiusInner","1");
None of them work. How can you make a working one?
Related
I have whittled down the project to only to the items that are affected by my problem. It can be found here:
https://glitch.com/edit/#!/lean-luxuriant-vegetable
if you look around, you will notice that the cursor is hidden behind the 3d-model. This also happens if I use a cursor primative. The cursor is not hidden behind other models in the scene when I have the whole thing all together, it is only thins one. Why would this be happening?
The "ring" cursor from the docs:
<a-entity camera look-controls>
<a-entity cursor="fuse: true; fuseTimeout: 500"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat"></a-entity>
</a-entity>
is a combination of:
The visual element (ring geometry, and material components)
The cursor functionality (the cursor component)
The ring is nothing but another 3D entity in the scene, and it will be covered by anything thats closer to the camera:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0" color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat;">
</a-entity>
</a-entity>
</a-scene>
You can tell the material, that you don't want it to be affected by the depth buffer (simply put, we don't want to check if something is covering our material) with the depthTest property of the material.
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0"
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500" color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat; depthTest: false">
</a-entity>
</a-entity>
</a-scene>
But the cursor component is to far to register the box (as it's literally inside the box), so you can split the functionality from the visual, and make the cursor closer:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box position="0 1.5 -1" rotation="0 45 0"
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500"
color="blue"></a-box>
<a-entity camera look-controls position="0 1.6 0">
<a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -.001"></a-entity>
<a-entity position="0 0 -1" geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: black; shader: flat; depthTest: false">
</a-entity>
</a-entity>
</a-scene>
So we've both the ring visible, and the functinality.
Why not make everything closer then? I had some visual issues with scaling when stuff was 1mm from the camera. Doesn't mean it'll bother you, but if so - the above way deals with it.
I'm having trouble trying to load multiple models for my project. I have a black hole model and a galaxy model, both in gltf format, however, the second model is failing to load. IS it just that I can only load a single model? Or am I doing something wrong?
Here is part of my code.
<a-assets>
<a-asset-item id="blackhole" src="source1.gltf"></a-asset-item>
<a-asset-item id="galaxy" src="source2.gltf"></a-asset-item>
</a-assets>
<a-entity position="0 0 0" scale="0.06 0.06 0.06" animation-mixer gltf-model="#blackhole">
<a-animation delay="12000" attribute="scale" to="0 0 0" easing="linear" dur="8000"></a-animation>
</a-entity>
<a-enitiy position="0 0 0" scale="0.01 0.01 0.01" gltf-model="#galaxy"></a-enitiy>
Earliest information I could find on this was from 2017.
I have multiple pages linked in A-Frame but whenever the user goes to the next page it kicks them out of VR Mode. Is link traversal supported well in 2019 or am I missing something? Is it possible for the user to go from page to page in VR without being kicked out?
Any help is greatly appreciated.
<a-scene>
<a-assets>
<img id="box" src="img/white.jpg">
<img id="stroke" src="img/stroke.png">
<img id="cityhall" src="img/cityhall.jpg">
<img id="clock" src="img/clock.jpg">
<img id="titanic" src="img/titanic.jpg">
<img id="logo" src="img/logo.png">
<img id="shadow2" src="img/radial-shadow-2.png">
<img id="background" src="img/360background.jpg">
</a-assets>
<a-image radius="5.7" position="0 -5 0" src="#shadow2" rotation="-90 0 0" scale="6 6 6"></a-image>
<!-- CURSOR ENTITY -->
<a-entity rotation="-10 0 0" position="0 0 0">
<a-entity id="camera" camera look-controls rotation="0 0 0" wasd-controls>
<!-- MAIN CURSOR -->
<a-entity cursor="fuse: true; maxDistance: 500; timeout: 3000;" id="cursor-main" position="0 0 -2" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03; thetaLength: 360; thetaStart: 90;" material="color: #439DC2;">
<a-animation begin="cursor-fusing" attribute="geometry.thetaLength" fill="forwards" from="360" to="0" easing="ease-in"></a-animation>
<a-animation begin="mouseleave" attribute="geometry.thetaLength" fill="backwards" from="0" to="360" dur="0"></a-animation>
</a-entity>
<a-entity id="cursor-loader" position="0 0 -2.0001" geometry="primitive: ring; radiusOuter: 0.04; radiusInner: 0.03;" material="color: #2ADD2A;">
</a-entity>
</a-entity>
</a-entity>
<a-sky src="#background"></a-sky>
</a-scene>
Chrome doesn't work. Link traversal WebVR specification is only supported by Firefox, Samsung Internet, Oculus Browser and Supermedium.
I'm trying to create many buildings using aframe-room-component. Is there a more DRY way to duplicate the rw-room entities than the method I'm currently using (literally just adding multiple rw-room's.
I've looked into writing a component in index.js, but I get confused by trying to incorporate the aframe-room-component.
<rw-room outside="true" position="0 0 -10" material="color: #866; side: double">
<rw-ceiling></rw-ceiling>
<rw-floor></rw-floor>
<rw-wall position="4 0 0"></rw-wall>
<rw-wall position="4 0 4"></rw-wall>
<rw-wall position="0 0 4"></rw-wall>
<rw-wall position="0 0 0">
<rw-doorhole id="holeA"></rw-doorhole>
<rw-doorlink from="#holeA" to="#holeB" position="2.5 0 0"></rw-doorlink>
</rw-wall>
</rw-room>
<rw-room outside="true" side="double" position="4 0 -2" material="color: #866; side: double">
<rw-wall position=" 1 0 1" side="double" material="color:#877; side: double">
<rw-doorhole id="holeB"></rw-doorhole>
</rw-wall>
</rw-room>
<rw-room outside="true" position="-3 0 -10" rotation="0 180 0" material="color: #866; side: double">
<rw-ceiling></rw-ceiling>
<rw-floor></rw-floor>
<rw-wall position="4 0 0"></rw-wall>
<rw-wall position="4 0 4"></rw-wall>
<rw-wall position="0 0 4"></rw-wall>
<rw-wall position="0 0 0">
<rw-doorhole id="holeC"></rw-doorhole>
<rw-doorlink from="#holeC" to="#holeD" position="2.5 0 0"></rw-doorlink>
</rw-wall>
</rw-room>
<rw-room outside="true" side="double" position="4 0 -2" material="color: #866; side: double">
<rw-wall position=" 1 0 1" side="double" material="color:#877; side: double">
<rw-doorhole id="holeD"></rw-doorhole>
</rw-wall>
</rw-room>
Hope this is clear enough and thank you in advance!
There's like:
The A-Frame template component https://www.npmjs.com/package/aframe-template-
component.
Or have a component that dumps into innerHTML as a string, building the template using regex or string replace. The string could optionally be defined via <template> tag.
I've been reading through the a-frame docs on animations. When I click on an entity, I would like for it to scale smoothly forwards and then backwards i.e. from -> to -> from
Perhaps there is a simple solution, but the closest I've gotten so far is using this:
<a-animation
attribute='scale'
dur='500'
from='1 1 1'
to='3 3 3'
fill='backwards'
begin='click'>
</a-animation>
fill='backwards' brings the animation back to the from state after the animation is finished, but it doesn't do so smoothly.
Is there a simple way to animate from -> to -> from?
Here is a sample below:
<script src='https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js'></script>
<a-scene>
<a-entity camera look-controls>
<a-entity geometry='primitive: ring;radiusOuter: 0.10;radiusInner: 0.05;' material='color: red;' position='0 0 -3' cursor='maxDistance: 30; fuse: false'>
</a-entity>
</a-entity>
<a-entity geometry='primitive:box' position='0 0 -5'>
<a-animation attribute='scale' dur='500' from='1 1 1' to='3 3 3' fill='backwards' begin='click'></a-animation>
</a-entity>
</a-scene>
From the docs:
Direction - determines the direction of the animation. Use Alternate
Make it repeat once, so the animation goes back to it's starting position.
<script src='https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js'></script>
<a-scene>
<a-entity camera look-controls>
<a-entity geometry='primitive: ring;radiusOuter: 0.10;radiusInner: 0.05;' material='color: red;' position='0 0 -3' cursor='maxDistance: 30; fuse: false'>
</a-entity>
</a-entity>
<a-entity geometry='primitive:box' position='0 0 -5'>
<a-animation attribute='scale' dur='500' direction='alternate' from='1 1 1' to='3 3 3' begin='click' repeat='1'></a-animation>
</a-entity>
</a-scene>