I am trying to achieve 2 things
Make the ball bounce from surface
Make camera entity a dynamic body so that when i collide with the OBJ i have imported(mapped as static body) , the camera dosent go through.
As of now, the ball just floats in the air and camera moves through the OBJ model.What am i doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- aframe script should be in header and must be before a-scene -->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system#v$npm_package_version/dist/aframe-physics-system.min.js"></script>
<meta charset="UTF-8" />
</head>
<body>
<a-scene physics="gravity: -9.8" >
<a-assets>
<img id="textura_pelota" src="https://cdn.glitch.global/7f903c5a-5f2e-4d05-97ea-3af04fbd3e17/pexels-iva-mu%C5%A1ki%C4%87-691710.jpg?v=1657687184405" crossorigin="anonymous"/>
<a-asset-item id="tower-obj" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/building_04.obj?v=1657693862238"></a-asset-item>
<a-asset-item id="tower-mtl" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/building_04.mtl?v=1657694451566"></a-asset-item>
<img id="sky-b" src="https://cdn.glitch.global/8f34032d-6c24-4dec-a227-deea5b507000/sunny.jpg?v=1657695761868" crossorigin="anonymous"/>
</a-assets>
<a-plane
src="#textura_pelota"
position="0 0.01 0"
rotation="-90 0 0"
height="100"
width="100"
repeat="200 200"
roughness="0.8"
static-body
></a-plane>
<a-sphere color ="black" radius="0.5" position = "40 3 40" dynamic-body>
</a-sphere>
<a-obj-model src="#tower-obj" mtl="#tower-mtl" scale ="7 7 7" material="wireframe:true" static-body></a-obj-model>
<a-entity camera look-controls wasd-controls position="40 1.6 40" dynamic-body>
<a-entity geometry="primitive: plane; height: 0.2; width: 0.2"
material="color: gray; opacity: 0.5" ></a-entity>
</a-entity>
<a-sky src="#sky-b" radius = "100" position ="0 0 0"></a-sky>
</a-scene>
</body>
</html>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system#v$npm_package_version/dist/aframe-physics-system.min.js"></script>
<meta charset="UTF-8" />
yeah that script is failing to fetch from github. you're better off downloading the file directly in the source files and saving it in your directory etc.
https://github.com/n5ro/aframe-physics-system/tree/master/dist
Minified:
https://github.com/n5ro/aframe-physics-system/blob/master/dist/aframe-physics-system.min.js
Related
So im using the aframe-physics-system and aframe-extras so that I can stop the camera from going through objects. This works fine. The only problem is whenever I open the Inspector and close it or when I enter the VR mode on my mobile phone, the camera falls through the ground. How do I prevent this?
My code:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v5.0.0/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system#v4.0.1/dist/aframe-physics-system.min.js"></script>
</head>
<body>
<a-scene physics="debug: true;">
<a-assets timeout="180000">
<a-mixin id="bbox" color="tomato" material="color: tomato; opacity: 0.7"></a-mixin>
</a-assets>
<a-entity kinematic-body="radius: 0.2;" movement-controls="speed: 0.2;" position="1 19.5 6" look-controls>
<a-entity camera position="0 0.9 0"></a-entity>
</a-entity>
<a-plane static-body rotation="-90 0 0" width="34" height="34" depth="5" mixin="bbox" rotate position="0 18.5 0"></a-plane>
<a-sky color="#fff"></a-sky>
</a-scene>
</body>
</html>
I tried the aframe GBlock component, I retrieved my own api code from Google Poly
https://github.com/archilogic-com/aframe-gblock could not get a random sample model to display (show up in my scene)
so I tried it again with the aframe google poly component https://github.com/mattrei/aframe-google-poly-component
this time with my own Google Poly art and with my own api
neither one seems to be working, the sample code below should be working for both versions of it
<!DOCTYPE html>
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-google-poly-component#1.0.0/dist/aframe-google-poly-component.min.js"></script>
<script src="https://cdn.rawgit.com/archilogic-com/aframe-gblock/6498b71d/dist/gblock.js"></script>
</head>
<body>
<a-scene>
<a-entity google-poly="apiKey: where api key goes; src: 0uYBSdP3NhE"
position="0 0 -3" scale="1 1 1"
></a-entity>
<a-entity gblock="https://poly.google.com/view/0uYBSdP3NhE?key=AIzaSyA4vpWo4AoLlbA2ecEIpA0T8CbDrlm_Nmw"
scale="1 1 1" position="25.806 14.071 -6.306" rotation="0 -38.73194695084365 0"></a-entity>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>
</body>
</html>
Just use AFRAME, no need for other libraries. Get the asset's URL and put it in an entity like this (wait for the truck to load):
<!DOCTYPE html>
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-entity gltf-model="https://poly.googleapis.com/downloads/fp/1575545288491751/2u4e9d0aePt/fSG2yghO86V/model.gltf" scale="1 1 1" position="0 0 0" rotation="0 -38.73194695084365 0"></a-entity>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>
</body>
</html>
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>
I can do anything but my box is always under the camera at the begining. What is wrong? I want to create a street, and I want to put one box on the left and one on the right to be houses.
<html>
<head>
<meta charset="utf-8">
<title>something</title>
<meta name="description" content="something">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<a-assets>
<img id="texture_0" src="textures/floor.jpg">
<img id="texture_1" src="textures/house1.jpg">
<img id="sky" src="background/sky.jpg">
</a-assets>
<!-- LEFT HOUSE -->
<a-box color="#FFF" width="2" height="2" depth="2" position="0 0 0" rotation="0 0 45" scale="2 0.5 3" src="#texture_1">
<!-- FLOOR -->
<a-box material="src: #texture_0; repeat: 50 30" width="200" depth="200" density="40" transparent="true" opacity="0.75" position="0 -6 0">
<!-- SKY -->
<a-sky src="#sky"></a-sky>
<!-- RIGHT HOUSE -->
<!-- <a-box material="src: #texture_2; repeat: 50 30" width="200" depth="200" density="40" transparent="true" opacity="0.75" position="0 -50 0"></a-ocean> -->
<a-camera position="100 1.8 100">
<a-cursor color="#2E3A87"></a-cursor>
</a-camera>
</a-scene>
</body>
</html>
You're changing the Y values of their positions which will move them up and down. You probably need to change the Z or X variables instead.
For example, on the "Right House," instead of: position="0 -50 0" you probably want position="0 0 -50" or position="-50 0 0"
Also your Right House closing tag is </a-ocean> instead of </a-box>
And you need to close the <a-box> tags on the Left House and Floor with <a-box>