When loading an objects from the assets manager in Aframe, the model appears too large, so I want to rescale it.
On the Aframe website, it is stated that
If you don’t see your model, try scaling it down. OBJ models generally have extremely large scales in comparison to A-Frame’s scale.
But how can I do this? I tried to use the same depth/height/width parameters as in a element but no success.
Here is my code:
<html>
<head>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="test-obj" src="test.obj"></a-asset-item>
<a-asset-item id="test-mtl" src="test.mtl"></a-asset-item>
</a-assets>
<a-obj-model src="#test-obj" mtl="#test-mtl" depth="2" height="0.5" width="0.5">
</a-obj-model>
</a-scene>
</body>
</html>
The scale component is what you want, for external models:
<a-obj-model src="#test-obj" mtl="#test-mtl" scale="0.1 0.1 0.1">
</a-obj-model>
https://aframe.io/docs/0.3.0/components/scale.html
Related
I'm importing a .gltf model of a gallery and add ambient and directional lights (tried all types). Everything works as expected in 0.8.0; however, when using version 0.9.0 the interior of the model appears dark and no lights can affect it. I have to use A-frame 0.9.0 because of the added support for Oculus Go controller.
I've been trying to figure this out all morning and still can't seem to find what the issue could be.
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<!-- Changing the version to 0.8.0 eliminates the problem -->
<script src="https://unpkg.com/aframe-environment-component#1.1.0/dist/aframe-environment-component.min.js"></script>
<!--script src="https://dist.3d.io/3dio-js/1.2.x/3dio.min.js"></script-->
</head>
<body>
<a-scene light="defaultLightsEnabled: false">
<a-assets>
<a-asset-item id="room" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2Fscene.gltf?1555958013685"></a-asset-item>
<a-asset-item id="gallery" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2FGallery.fbx?1555957411386"></a-asset-item>
<a-img id="sky" src="https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e%2F47096473752_0baa631c08_o.jpg?1555959294746"></a-img>
</a-assets>
<a-entity position="0 -0.1 0" rotation="90 0 0" scale="50 50 1" geometry="primitive:plane"></a-entity>
<a-entity gltf-model="#room" scale="0.01 0.01 0.01" position="0 0.01" shadow="cast:true; receive:true;">
</a-entity>
<a-entity position="0.59272 4.10082 -0.40143" light="intensity:5;type:hemisphere"></a-entity>
<a-entity position="0 1.15538 -3.77451" light="intensity:3"></a-entity>
<a-sky src="#sky"></a-sky>
</a-scene>
</body>
</html>
This model uses the KHR_materials_unlit glTF extension, which causes it to be unaffected by lighting. Unlit – or shadeless – materials are used for better performance on mobile, and some stylized effects.
Opening the same model in other viewers you'll see the same result:
https://gltf-viewer.donmccurdy.com/#model=https://cdn.glitch.com/a8fe8e49-6e34-4c86-baec-05b8aff4571e/scene.gltf?1555958013685
^Click the info button in the lower left to see a list of extensions used by the model.
I think maybe A-Frame 0.8.0 didn't yet support this extension?
I made a aframe ar. in I put a texture png.
when I use a png from some url it work some png not,
and when I try with the same png downloaded on my computer it does no work.
Exemple that don't work:
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-assets>
<img id="my-texture" src="rubiscube.png">
</a-assets>
<a-entity geometry="primitive: box" material="src: #my-texture"></a-entity>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
but like this it works:
<a-entity geometry="primitive: box" material="src: url(https://static.wixstatic.com/media/2cd43b_b13c89d3859a48129a434265b3ddd1a1~mv2_d_1826_1920_s_2.png)"></a-entity>
but that url of image not
https://i2.wp.com/rgvbingo.com/wp-content/uploads/2014/04/bingo-balls-hi-res.png)">
why? what is the difference betwin this 2 images or url
and why if it work inline url why not offline?
You have to serve the image through a local server like for instance http-server. Browsers don't have access to the local file system. More details on A-Frame FAQ
I've used 2D images fine to appear and without any errors in the console, but when attempting to use a gltf model, nothing shows up and I get the following error 'Cannot read property 'slice' of undefined at aframe.min.js:121'.
This is where I got the model - https://sketchfab.com/models/294e79652f494130ad2ab00a13fdbafd
And this is the documentation I was trying to follow - https://aframe.io/blog/arjs/
<html>
<head>
<meta aframe-injected="" name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no,user-scalable=no,minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<a-assets>
<a-asset-item id="drone" src="busterDrone/busterDrone.gltf"></a-asset-item>
</a-assets>
<a-marker preset="hiro">
<!--why doesn't this work?-->
<a-entity gltf-model="#drone"></a-entity>
</a-marker>
</a-scene>
</body>
</html>
this seems related to a-frame more than AR.js
I wrote a demo scene on glitch to test my exported gltf model in a-frame, but I am getting an error in the console:
My code
<!DOCTYPE html>
<html>
<head>
<title>Basic Scene - A-Frame</title>
<meta name="description" content="Basic Scene - A-Frame">
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-asset-item id="gltfDemo" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fexport.gltf?1499844855169"></a-asset-item>
<a-asset-item id="buffer_0.bin" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fbuffer_0.bin?1499844851189"></a-asset-item>
<a-asset-item id="buffer_1.bin" src="https://cdn.glitch.com/a3c2afff-dcc6-4918-bb73-5716b35f39b0%2Fbuffer_1.bin?1499844853034"></a-asset-item>
</a-assets>
<a-entity gltf-model="#gltfDemo"></a-entity>
<a-sky color="#000"></a-sky>
<a-light type="ambient" color="#445451"></a-light>
<a-plane color="#050" rotation="-90 0 0" height="100" width="100"></a-plane>
<a-camera>
<a-cursor color="#FAFAFA"></a-cursor>
</a-camera>
</a-scene>
</body>
</html>
The error:
VM1762:1 Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at e.parse (GLTFLoader.js:68)
at GLTFLoader.js:32
at three.js:29160
Source files:
Glitch Fiddle with source files
I have a feeling that I am importing the gltf wrongly into glitch or using it the wrong way. Can anybody help me?
from what I understand Your .gltf holds references to the .bins and .jpg textures. Glitch is not that straightforward, and these files are not in one "directory", as You can see, when You get the links.
The error You get is caused by aframe trying to parse a null/nonexistent source file ( bins and jpgs).
I think it may be better if You put these files on Your server, or put it on github if You want (for the directories are straightforward).
You can also change the file paths in the .gltf file like suggested here.
I would like to use a component like shadow from aframe-extras https://github.com/donmccurdy/aframe-extras/tree/master/src/shadows
How do I use or install external components into my A-Frame scene?
<html>
<head>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box color="red" position="0 0 -4"></a-box>
</a-scene>
</body>
</html>
Generally, published A-Frame components on GitHub follow the same template. In this case, the JS file for the shadow component is at https://github.com/donmccurdy/aframe-extras/blob/master/dist/aframe-extras.shadows.js ... in the root dist/ folder.
To include the JS file externally from our scene, we can just a couple CDN services that allow CORS: rawgit.com or unpkg.com. Script tag in the <head> after aframe
<html>
<head>
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.shadows.js"></script>
<!-- or <script src="https://unpkg.com/aframe-extras/dist/aframe-extras.shadow.js"></script>
</head>
</html>
Then just use the component in your HTML
<a-scene>
<a-box color="red" position="0 0 -4" shadow="cast: true; receive: true"></a-box>
<a-light shadow-light="cast-shadow: true"></a-light>
</a-scene>
So just two steps: add script tag for component, use component.