Why is this texture being loaded multiple times in AFrame? - aframe

I have this asset definition:
<a-asset-item id="DNA"
crossorigin="anonymous"
src="https://cdn.glitch.com/2dd120f4-5d77-403f-af9d-feb8e33ed767%2FAR_DNA.dae">
</a-asset-item>
And this reference in my scene:
<a-entity collada-model="#DNA"
position="-60 0 0"
scale="2 2 2"
rotation="0 90 0" model-monitor></a-entity>
When I look at the network window in my browser console, I'm seeing the asset being downloaded twice. And it's 12 mb.
Why is this happening?

Related

In Aframe, the target is not working for Light Spot

I want to point a spot light towards a specific object. According to documentation (https://aframe.io/docs/1.3.0/components/light.html)
there is an property target that takes the id of the object to point to. However target does not seem to react to any value.
<a-light position="10 10 10" rotation="0 0 0" scale="1 1 1" light="type:spot;color:#ff0000;intensity:100;distance:1000;decay:0.1;angle:3;penumbra:0; target:myplane"></a-light>
Here is my codepen example:
https://codepen.io/jimver04/pen/JjZRJLz
A-Frame Version: 1.3.0
Platform / Device: Windows 10, Firefox 106, Desktop 3080 RTX GPU
Reproducible Code Snippet or URL: https://codepen.io/jimver04/pen/JjZRJLz
I found it, it just needs a # before the plane id
<a-light position="10 10 10" rotation="0 0 0" scale="1 1 1" light="type:spot;color:#ff0000;intensity:100;distance:1000;decay:0.1;angle:3;penumbra:0;target:#myplane"></a-light>

Textures for OBJ will not load

I simply cannot get the textures to load for my basic 3d models. The model appears but is only in grey.
I am using this model: https://www.turbosquid.com/3d-models/free-max-mode-hammer/384372
I am using the following code.
<a-asset-item id="hammer-obj" src="hammer.obj"></a-asset-item>
<a-asset-item id="hammer-mtl" src="hammer.mtl"></a-asset-item>
<a-entity
obj-model="obj: #hammer-obj; mtl: #hammer-mtl"
scale="1 1 1"
position="0.05 1 -1.90">
My MTL file currently looks like:
newmtl head
Ka 0 0 0
Kd 0 0 0
Ks 0.637 0.637 0.637
illum 2
Ns 2
map_Kd hammer.jpg
map_bump hammer.jpg
bump hammer.jpg
newmtl grip
Ka 0 0 0
Kd 0 0 0
Ks 1 1 1
illum 2
Ns 2
map_Kd hammer.jpg
map_bump hammer.jpg
bump hammer.jpg
I have converted the TIFF file into a jpg as well and that didnt work. I initially had all links to hammer.TIF but I tried JPEG.
Could anyone give me any insight as to what is happening?
Thanks.
If You want to get results 'as expected', my recommendation is the three.json and .glTF formats.
Apparently they are well implemented, and don't cause unexpected behaviour like obj's with mtl's, or sadly fbx's.
In my opinion You should use some blender glTF( 1 or 2 ) exporter, and change the 3D hammer model format, or You could use clara.io, to export it to the three.js json format.
Don McCurdy of the a-frame team recommended using the glTF and json format here.
In fact there is some valuable information there, like how using the material component to texture the .obj with a .jpg works randomly.
You can also find more information on model troubleshooting here.

Specifying Room dimensions in networked-a-frame

I am new to a-frame and have followed the examples of haydenjameslee networked-aframe. I was wondering if there is a way to specify the room size when defining the a-scene in it's tag
<a-scene networked-scene="app: myApp; room: room1;">
I have a workaround, for I don't fully understand how the component works.
I found there is a player list under the reference NAF.entities.entities
I made a component attached to the scene:
AFRAME.registerComponent('foo',{
init:function(){
setTimeout(function(){
console.log(Object.keys(NAF.entities.entities));
console.log(Object.keys(NAF.entities.entities)[0]);
console.log(Object.keys(NAF.entities.entities).length);
},5000);
}
});
The first log gives me an array of the players id's.
The second one gives the id of the first element.
The last gives me the number of the players.
You can check for the number of players on load, and if the number is exceeded, just deny access, change the room, or href to a 'lobby' website.
Working glitch here: glitch.com/edit/#!/sudden-antler
Of course instead of waiting 5 seconds i should be listening to a loaded event, I'll look into it once im not so busy.
As far as I know this is not possible in A-Frame.
What do you need it for?
An NPM Package aframe-room-component is available that easily lets you create rooms and connects them. Serves my need.
https://www.npmjs.com/package/aframe-room-component
It can be used as follows
<rw-room position="-3 0 -5" material="color:#787">
<rw-floor material="color:red"></rw-floor>
<rw-ceiling material="color:blue"></rw-ceiling>
<rw-wall position="6 0 0" material="color:yellow"></rw-wall>
<rw-wall position="6 0 6" material="color:green"></rw-wall>
<rw-wall position="0 0 6" material="color:brown"></rw-wall>
<rw-wall position="0 0 0" material="color:pink"></rw-wall>
</rw-room>

How to load textures for obj?

I'm trying to load an .obj which has several .jpgs as textures. My .obj is rendering - but without applying the material.
The .mtl looks like
newmtl material_0
Ka 0.200000 0.200000 0.200000
Kd 1.000000 1.000000 1.000000
Ks 1.000000 1.000000 1.000000
Tr 1.000000
illum 2
Ns 0.000000
map_Kd tex_0.jpg
I assume the path to the .jpgs are correct - if I change it, I see 404 errors in the console.
My aframe code is:
<a-scene>
<a-assets>
<a-asset-item id="moore-obj" src="obj/moore.obj"></a-asset-item>
<a-asset-item id="moore-mtl" src="obj/moore.obj.mtl"></a-asset-item>
</a-assets>
<a-entity
obj-model="obj: #moore-obj; mtl: #moore-mtl"
scale="1 1 1"
rotation="0 0 0"
position="1 1 1"></a-entity>
</a-scene>
The 3D model appears in the scene - but there are no textures overlayed on it. I'm running this on localhost, and I'm not seeing any CORS warnings.
The object is http://www.thingiverse.com/thing:36415
Turns out to be an issue with that particular OBJ file. It uses three materials but it doesn't define object groups for the sub-objects that use each of those materials, so Three.js' OBJLoader doesn't associate the materials correctly.
You can work around it by adding group lines before each usemtl line in the obj file.
For example:
g g_0
usemtl material_0
...
g g_1
usemtl material_1
etc.

How do I create s:Path.data, polygon coords?

I have a PNG image, the image features a shape surrounded by a transparent area:
I want to recreate this image as a path in flex mxml, something like this:
<s:Path data="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0" />
How can I export the path data so that I can use this shape in Flex, is there a program that will do this for me?
Illustrator will export an FXG, as will Photoshop.
My problem was that my original image was a flat file, not a path. This meant that following #www.Flextras.com's answer didn't work for me, the result was an FXG with an image embedded.
The process I used is as follows, I used Adobe Fireworks for this:
1) Magic wand selection
Select the body of the image with magic wand.
2) Convert to path
Right click -> Modify Marquee -> Convert to Path
3) Export as FXG
File -> Export
4) Done
Open the FXG in notepad and extract the path data.

Resources