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
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>
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 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>
I am loading walls into my scene and applying the static-body physics component from Don McCurdy's aframe-extras script. However, I only two of my walls are behaving as colliders (right wall & right column) and all other walls are physics free. How do I load physics colliders on all walls?
See demo at - https://mannymeadows.github.io/Noosa/. What am I missing?
<html>
<head>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
<script src="https://mannymeadows.github.io/Noosa/aframe-extras.js"
</script>
</head>
<body>
<a-scene physics>
<a-assets>
<img id="sky" src="https://mannymeadows.github.io/Noosa/models/pano-
test.jpg">
<a-asset-item id="room-obj"
src="https://mannymeadows.github.io/Noosa/models/shop-walls.obj">
</a-asset-item>
<a-asset-item id="stool-obj"
src="https://mannymeadows.github.io/Noosa/models/riva1920_onelove_obj.obj">
</a-asset-item>
<a-asset-item id="stool-mtl"
src="https://mannymeadows.github.io/Noosa/models/riva1920_onelove_obj.mtl">
</a-asset-item>
</a-assets>
<!-- Player -->
<a-entity camera
universal-controls
look-controls
kinematic-body
position="0 1.764 0">
</a-entity>
<!-- Floor -->
<a-plane rotation="-90 0 0" width="54" height="54" color="#e2c5c9"
static-body></a-plane>
<!-- Sky -->
<a-sky src="#sky"></a-sky>
<!-- Wall collider -->
<a-entity static-body obj-model="obj: #room-obj"></a-entity>
<!-- furniture -->
<a-entity static-body scale="0.05 0.05 0.05" rotation="-90 0 0"
position="0 0 -5" obj-model="obj: #stool-obj; mtl: #stool-mtl"></a-entity>
</a-scene>
</body>
</html>
I am able to load simple wall OBJ models with physics applied, but when the walls become slightly more complex, the static-body component won't work.
what about try to use A-Frame<a-box>or<a-plane>elements to make the wall instead of OBJ models? if you don't need a complex house model. I think your kinematic body impact with OBJ model's bounding box.
my code is like:
<a-entity id="house">
<a-plane width="5"
id="rightwall"
height="3"
position="2.5 1.6 -2.5"
rotation = "0 90 0"
material="side:double">
</a-plane>
<a-plane width="5"
id="leftwall"
height="3"
position="0 1.6 -5"
material="side:double">
</a-plane>
<a-plane width="5"
id="backwall"
height="3"
position="0 1.6 0"
material="side:double">
</a-plane>
</a-entity>