Is there a way to reuse the same animation in a more pretty way?
<a-entity channel-selection class="channels" mixin="fontplane" material="opacity:0.6">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
<a-animation attribute="material.opacity" begin="unfade" to="0.6"></a-animation>
<a-entity class="channels" mixin="channelfont" text="text: Channel6">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
<a-animation attribute="material.opacity" begin="unfade" to="0.6"></a-animation>
</a-entity>
</a-entity>
There are a few ways.
One: you can use mixins on a-animation:
<a-mixin id="fade" attribute="material.opacity" begin="fade" to="0"></a-mixin>
<a-mixin id="fade" attribute="material.opacity" begin="unfade" to="0.6"></a-mixin>
<a-entity channel-selection class="channels" mixin="fontplane" material="opacity:0.6">
<a-animation mixin="fade"></a-animation>
<a-animation mixin="unfade"></a-animation>
<a-entity class="channels" mixin="channelfont" text="text: Channel6">
<a-animation mixin="fade"></a-animation>
<a-animation mixin="unfade"></a-animation>
</a-entity>
</a-entity>
There's also the animation component with mixins or aframe-mss (mixin stylesheet format), but unfortunately there's some bugs relating to mixins with components that can have multiple instances.
Two: the template component can work too
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://unpkg.com/ngokevin/aframe-template-component/dist/aframe-template-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<script id="fadeAnimations" type="text/html">
<a-animation></a-animation>
<a-animation></a-animation>
</script>
</a-assets>
<a-entity template="src: #fadeAnimations">
<a-entity template="src: #fadeAnimations"></a-entity>
</a-entity>
</a-scene>
Related
I'm starting to learn aframe and want to use it with an Oculus Quest 2. I have the hands displayed and I'm trying to move around the VR world but when I move the hands don't move ... how to make the hands follow the camera?
thanks
This is my code
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.0/dist/aframe-extras.min.js"></script>
<script>
</script>
</head>
<body>
<a-scene>
<a-entity id="rig" movement-controls position="0 0 0">
<a-entity camera position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>
</a-entity>
<a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
<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>
I finally found ...
At the beginning I put the controllers in the camera ... but I had to put them in #rig
<a-entity id="rig" movement-controls position="0 0 0">
<a-entity camera position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>
<a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly;"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly;"></a-entity>
</a-entity>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v1.16.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="duck1" position="1 0 -3">
<a-animation attribute="rotation" to="0 -360 0" repeat="indefinite" easing="linear" dur="30000"> </a-animation>
<a-entity color="#FF0000" scale="0.1 0.1 .1" position="0 0 1">
<a-animation attribute="rotation" to="0 360 0" easing="linear" dur="4000" begin="mouseenter"> </a-animation>
<a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
</a-entity>
<a-camera position="0 0.2 1.3"><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
</html>
The way animation is working here I want to make it look similar in 1.2.0 version of Aframe. I am trying to use the same formula. Here is what I am trying to do in 1.2.0 Aframe.
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity class="rota" id="duck1" color="#FF0000" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation; to:0 -360 0; loop:true; easing:linear; dur:30000; pauseEvents: mouseenter; resumeEvents: " animation__mouseenter="property: rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
<a-box class="rota" color="#FF0000" position="20 0 -10" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
<a-camera position="0 1.2 1.3"><a-cursor objects=".rota" ></a-cursor></a-camera>
</a-scene>
</body>
</html>
In the second code it is working fine initially then it is getting stuck at one particular position. Can anyone help me in fixing this error and make it look similar to the code in version 0.5.0 Aframe.
Here is the 0.5.0 code in 1.2.0 syntax
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="duck1" position="1 0 -3"
animation="property: rotation; to:0 -360 0; loop: true; easing:linear; dur:3000">
<a-entity color="#FF0000" scale="0.1 0.1 0.1" position="0 0 1"
animation="property:rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter">
<a-box color="#FF0000" position="20 0 -10" change-color-on-hover="color: white" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
</a-entity>
<a-camera position="0 0.2 1.3"><a-cursor></a-cursor></a-camera>
</a-scene>
</body>
</html>
Glitch here:
https://glitch.com/edit/#!/animation-example-0-5-to-12-0?path=index.html%3A1%3A0
Not sure I completely understand what the code is supposed to do - e.g. there is a collision handler with #otherduck, but no #otherduck entity.
1.2.0 code seems to be doing the same as the 0.5 code, though.
I'm writing a script in aframe to showcase the earth. However, when I try to add texture it becomes all white.
This is my script:
<html>
<head>
<div class="navbar">
</div>
<!-- aframe itself -->
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.13.1/dist/aframe-extras.min.js"></script>
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<a-scene stats>
<a-assets>
<a-asset-item id="earth-obj" src="https://cdn.glitch.com/5995a6f7-2893-46f8-a015-8513de4817c6%2F1227%20Earth.obj?1551999264805"></a-asset-item>
<a-asset-item id="earth-mtl" src="https://cdn.glitch.com/5995a6f7-2893-46f8-a015-8513de4817c6%2F1227%20Earth.mtl?1552002240966"></a-asset-item>
</a-assets>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
<a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
<a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
</a-entity>
<a-entity obj-model="obj: #earth-obj; mtl: #earth-mtl"
position="0 1.5 -3"
scale="0.05 0.05 0.05">
<a-animation attribute="rotation"
dur="30"
to="0 360 0"
repeat="indefinite"
easing="linear"></a-animation>
</a-entity>
<a-entity camera look-controls position="0 1.5 0">
<a-cursor>
<a-entity position="0 0 -3" id="weapon">
<a-box color="blue" width="0.25" height="0.5" depth="3"
static-body></a-box>
</a-entity>
</a-cursor>
</a-entity>
<a-entity environment="shadow: true; shadowSize: 10; preset:default;" ></a-entity>
<a-plane color="brown" rotation="-90 0 0"
static-body
width="100" height="100"></a-plane>
</a-scene>
</head>
<body>
</body>
</html>
and this is the .mtl file
newmtl Mat
map_Kd Earth.png
usemtl Mat
Earth.png is in the same directory as the .obj and .mtl files, I don't know what to do.
Your MTL and texture aren't in the same directory. They are hosted on individual URLs on a CDN. Glitch may give you the illusion they are on the same directory.
i am making webvr with multiple scenes using A-frame template component and event set component to listen for mouseenter/click so it'll change my src.
Here's the full example code in glitch and below is the index.html
<!DOCTYPE html>
<html>
<head>
<title>Kingdom Animalia</title>
<meta name="description" content="Belajar asyik dengan WebVR"></meta>
<script src="https://cdn.glitch.com/a40a8a20-2b6c-4579-a653-7b641753965e%2Fbuild.js?1531824946222"></script>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="aframe-event-set-component.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="cnidaria" src="https://cdn.glitch.com/1f690faa-4dea-4828-a14a-c8fc529e9e2d%2F492542401-56a5f70d5f9b58b7d0df4ff5.jpg?1531237316164">
<img id="porifera" src="https://cdn.glitch.com/1f690faa-4dea-4828-a14a-c8fc529e9e2d%2FPHYLUM%20PORIFERA%20_thumb%5B6%5D.jpg?1531237318597">
<img id="annelida" src="https://cdn.glitch.com/1f690faa-4dea-4828-a14a-c8fc529e9e2d%2Fearthworm.jpg?1531237319615">
<img id="planaria" src="https://cdn.glitch.com/1f690faa-4dea-4828-a14a-c8fc529e9e2d%2Fmaxresdefault.jpg?1531237360227">
<img id="mollusca" src="https://cdn.glitch.com/1f690faa-4dea-4828-a14a-c8fc529e9e2d%2F802806388.jpg?1531237319128">
<img id="ctenophora" src="https://cdn.glitch.com/1f690faa-4dea-4828-a14a-c8fc529e9e2d%2FRedLine1.jpg?1531237316608">
</a-assets>
<a-entity id="ganti" template="src: main.html"
position="0 0 0">
</a-entity>
<a-sky id="mask" color="#111" opacity="0" radius="2">
<a-animation attribute="material.opacity" begin="fade" from="0" to="1" dur="200"
direction="alternate" repeat="1"></a-animation>
</a-sky>
</a-scene>
</body>
</html>
below the main.html
<a-entity
position="-1 3 -3"
geometry="primitive: plane; width: 8; height: auto"
material="color: #0000FF"
text="color: white; align: center; font: https://cdn.aframe.io/fonts/DejaVu-sdf.fnt;
value: a-plane align:center (anchor:align) DejaVu width 8 1234567890123456789012345678901234567890">
</a-entity>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere
event-set__click="_target: #ganti; template: src: boxes.html"
position="0 1.25 -5" radius="1.25" color="#000000" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#c69b9b"></a-sky>
<a-camera>
<a-cursor id="cursor" position="0 0 0" color= "#efdf02"></a-cursor>
</a-camera>
so far i can display img, boxes, spheres etc on the scenes, but it doesnt show any text at all. i've tried a lot of different kind of text. Text still showing up in other code which not using the template & event set component, but in my example it won't display. how can i fix this?
Your includes are wrong, first you include the template component, then the core, then the event component.
If the core is loaded first, then the text is being displayed on the a-plane
Check it out here
I am trying to apply different images to the various sides of a cylinder. I have tried using the cubemap method as described here but it is not working. Should this work at all? Or is there another way to add multiple images to this shape? It would be good to understand how to add different images to different sides of various shapes, or is this only possible with cubes?
Here is what I am trying;
<html>
<head>
<title>example</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-template-component#^3.1.1/dist/aframe-template-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-cubemap id="wheel">
<img src="https://www.nickritchie.co.uk/samples/tyre.png">
<img src="https://www.nickritchie.co.uk/samples/tyre.png">
<img src="https://www.nickritchie.co.uk/samples/wheel.jpg">
<img src="https://www.nickritchie.co.uk/samples/wheel.jpg">
<img src="https://www.nickritchie.co.uk/samples/tyre.png">
<img src="https://www.nickritchie.co.uk/samples/tyre.png">
</a-cubemap>
<script id="example" type="text/html">
<a-entity
geometry="primitive: cylinder; radius: 0.25; height: 2"
position="0 1 -4"
rotation="0 0 90"
material="envMap: #wheel">
</a-entity>
</script>
</a-assets>
<a-entity
template="src: #example">
</a-entity>
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="4"
height="4"
shadow
color="yellow">
</a-plane>
<a-sky
color="grey">
</a-sky>
<a-camera>
</a-camera>
</a-scene>
</body>
</html>
The errors are coming from three.js, I can post here if it would help
Thanks for any help
Try https://github.com/bryik/aframe-cubemap-component
<a-entity cubemap="folder: https://www.nickritchie.co.uk/samples/"></a-entity>