gltf-model not working with aframe-extras - aframe

I need to use aframe-extras to be able to teleport. But if I use aframe-extras gltf-model do not show.
<html>
<head>
<script src="assets/lib/aframe-extras.js"></script>
<!-- <script src="assets/lib/aframe.min.js"></script> -->
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="yoda" src="assets/models/sgp24_yoda_master/scene.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#yoda" position="0 1.25 -5"></a-entity>
</a-scene>
</body>
</html>

You have to import both a-frame and a-frame-extras. One of the script tags is commented out in your snippet. a-frame has to also load first:
<html>
<head>
<script src="assets/lib/aframe.min.js"></script>
<script src="assets/lib/aframe-extras.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="yoda" src="assets/models/sgp24_yoda_master/scene.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#yoda" position="0 1.25 -5"></a-entity>
</a-scene>
</body>
</html>

Related

AFrame Physics Camera falls through ground

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>

A-Frame Physics engine not working properly

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

why a-animation don't work on A-Frame 1.1.0? it works on version 0.8.0

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-entity>
<a-entity position="2 2 -10" geometry="primitive: sphere" material="color: red"></a-entity>
<a-animation attribute="rotation" dur="10000" fill="forwards" to="0 360 0" repeat="indefinite"></a-animation>
</a-entity>
</a-scene>
</body>
</html>
when I change 1.1.0 to 0.8.0, the a-animation works, tell me why
<a-animation> has been deprecated in favor of the animation component:
<a-box position="-1 1.6 -5" animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>

Aframe Google Poly API not rendering in Aframe how can I fix this?

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>

How do I apply cubemaps textures to cylinders in A-frame?

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>

Resources