I'm trying to link these curved images in a-frame to my other HTML Pages which are:
hall.html
clock.html
titanic.html
I've researched it online but haven't been able to find an answer so if anyone has any experience with a-frame the help would be appreciated.
Essentially what I'm trying to do is when someone looks at one of the curved images in a-frame it takes them to the HTML page.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360Belfast</title>
<meta name="description" content="Curved Images - A-Frame">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.min.js"></script>
<script src="js/build.js"></script>
</head>
<body>
<a-scene background="color: white">
<a-assets>
<img id="mozvr" src="img/logo.png">
<img id="shadow2" src="img/radial-shadow-2.png">
<img id="ui1" src="img/ui-1.png">
<img id="ui2" src="img/ui-2.png">
<img id="ui3" src="img/ui-3.png">
<img id="3d" src="img/3d.png">
<img id="3dcity" src="img/3dcity.png">
<img id="3dclock" src="img/3dclock.png">
</a-assets>
<!-- <a-box id="blue-cube" position="-3.5 3.5 -2" rotation="30 30 0"
width="2" depth="2" height="2" color="blue"
href="#orange-cube"></a-box> -->
<a-curvedimage href="hall.html" src="#ui1" radius="5.7" theta-length="70" height="3.02"
rotation="0 155 0" scale="0.8 0.8 0.8"></a-curvedimage>
<a-curvedimage src="#mozvr" radius="5.7" theta-length="20" height=".7"
opacity="0.6" rotation="0 250 0" position="0 2 0"></a-curvedimage>
<a-curvedimage src="#ui3" radius="5.7" theta-length="70" height="3.02"
rotation="0 80 0" scale="0.8 0.8 0.8" href="clock.html"></a-curvedimage>
<a-curvedimage src="#ui2" radius="5.7" theta-length="70" height="3.02"
rotation="0 -130 0" scale="0.8 0.8 0.8" href="titanic.html"></a-curvedimage>
<a-curvedimage src="#3d" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
rotation="0 -130 0" scale="0.8 0.8 0.8"></a-curvedimage>
<a-curvedimage src="#3dclock" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
rotation="0 80 0" scale="0.8 0.8 0.8" href="model.html"></a-curvedimage>
<a-curvedimage src="#3dcity" position="0 -2.5 0" radius="5.7" theta-length="70" height="3.02"
rotation="0 155 0" scale="0.8 0.8 0.8"></a-curvedimage>
<a-image position="0 -5 0" src="#shadow2" rotation="-90 0 0" scale="6 6 6"></a-image>
<a-entity position="0 0 1">
<a-camera>
<a-cursor color="#4CC3D9"></a-cursor>
</a-camera>
</a-entity>
<a-sky background="color: white"></a-sky>
</a-scene>
</body>
</html>
Use the link component:
<a-curvedimage link="href: hall.html; on: click"></a-curvedimage>
Note that In-VR navigation is only supported by Firefox, Oculus Browser, Samsung Internet and Supermedium.
Related
<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 want to use touch and drag and pinch to zoom in and out with 0.9.0
The following code works with aframe 0.3.0 but isnt fully visible here, but
here is link to the code
<html>
<head>
<title>A-Frame Click & Drag Component - Basic</title>
<script src="https://jesstelford.github.io/aframe-click-drag-component/build.js"></script>
</head>
<body>
<a-scene>
<a-sphere look-controls click-drag position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box click-drag position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder click-drag position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 3.8">
<a-camera look-controls keyboard-controls="mode: fps"></a-camera>
</a-entity>
</a-scene>
</body>
</html>
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 know this question has been asked many times and answered, but still i can't figure out what to add to my code to prevent player (camera) from going through the walls. Please help.
This is my code:
https://codepen.io/payamspot/pen/XErObb
<head>
<meta charset="utf-8">
<title>Find the Way!</title>
<link rel="icon" sizes="192x192" href="https://cdn.glitch.com/60055b0c-41c5-49c8-805c-da359f1c3f99%2Ffindtheway%20logo.png?1520489367793">
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
<script src="https://cdn.rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene antialias="true">
<a-assets>
<img id="grass" src="https://cdn.glitch.com/60055b0c-41c5-49c8-805c-da359f1c3f99%2Fgrass.jpg?1519297817380">
</a-assets>
<!-- sky -->
<a-sky geometry="radius:200; thetaLength:100;" material="shader:gradient; topColor:52 112 251; bottomColor:123 179 220; offset:0;"></a-sky>
<!-- ground -->
<a-plane class="hasEvent" position="0 0 0" rotation="-90 0 0" geometry="width:200; height:200;" material="src:#grass; repeat:111 111;"></a-plane>
<!-- walls -->
<a-box class="wall" id="w0001" position="-2 2 -3" rotation="0 0 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0002" position="-3 2 0" rotation="0 -90 0" geometry="width:6; height:4; depth:0.1;" material="src:#grass; repeat:6 4;"></a-box>
<a-box class="wall" id="w0003" position="0 2 3" rotation="0 0 0" geometry="width:6; height:4; depth:0.1;" material="src:#grass; repeat:6 4;"></a-box>
<a-box class="wall" id="w0004" position="3 2 2" rotation="0 -90 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0005" position="3 2 -2" rotation="0 -90 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-box class="wall" id="w0006" position="2 2 -3" rotation="0 0 0" geometry="width:2; height:4; depth:0.1;" material="src:#grass; repeat:2 4;"></a-box>
<a-entity light="type:ambient; color:#fff; intensity:1.1;"></a-entity>
<a-entity light="type:directional; color:yellow; intensity: 0.3" position="-3.635 5.02 -5.484"></a-entity>
<a-entity id="cameraRig" position="0 -1.6 0">
<a-camera user-height="3.9"></a-camera>
<a-entity teleport-controls="cameraRig:#cameraRig; button:trigger; type:line; maxLength:44; defaultPlaneSize:999;"
laser-controls raycaster="objects:.hasEvent; interval:200; showLine:true;" line="color:#eee; opacity:0.2;" />
</a-entity>
</a-scene>
</body>