Display image instead of 3D model

[Kernonen]

Hi,

first of all, thank you for ar.js !!

This nota bug report but a feature request, provided it doesn't already exist and I've not find it.

For a project with many objects on screen, I'd like to be able to display images (jpg, png, svg) instead of gltf entity. Is there a way to do that ?

[Dryra]

Hello, yes there is. Instead of loading a gltf model, create a plane and change it's texture to the image texture you want to display. Then replace that gltf model with the plane you created, and it should work. the only problem you would face is, that this plane will not be centered to the image-target you're using, if you're using image tracking. Good luck

[Kernonen]

Thank you ! You mean plane and image texture should be saved as a gltf or in another format ? If so, would you ave a code to show ? Also, do you think image centering issue should be fixed in a near future ?

[Kernonen]

Thank you ! You mean plane and image texture should be saved as a gltf or in another format ? If so, would you ave a code to show ? Also, do you think image centering issue should be fixed in a near future ?

[Kernonen]

Thank you ! You mean plane and image texture should be saved as a gltf or in another format ? If so, would you ave a code to show ? Also, do you think image centering issue should be fixed in a near future ?

[Kernonen]

Thank you ! You mean plane and image texture should be saved as a gltf or in another format ? If so, would you ave a code to show ? Also, do you think image centering issue should be fixed in a near future ?

[Dryra]

If you're using the Threejs variant, you can just create a plane Geometry in code, load the image you want to display as a texture using Threej's Textureloader and assign this texture to the plane's Material. With aframe should be the same logic.

           `var texture = new THREE.TextureLoader().load( '../../../resources/data/textures/aframe-k.png' );
    var mat = new THREE.MeshLambertMaterial({color: 0xbbbbff, map: texture});
    var planeGeom = new THREE.PlaneGeometry(1,1,1,1);
    var plane = new THREE.Mesh(planeGeom, mat);`

that was an example from @kalwalt's experiment repo with AR.js and Artoolkit, you can find it here, it has a lot of examples and code examples you can inspire yourself from.

The image centering issue is actually not image specific but every content you would display on the image-target. I don't know about the fix, but you can follow it and a WIP here #4 and #114.

Happy coding

[t-walker-wei]

If you're using A-Frame, this document should be helpful, a-image

For example:

<a-scene embedded arjs>
    <a-assets>
        <img id="test_img" src="url of the image you want to show">
    </a-assets>
    <a-marker preset="hiro" url="hiro.patt">
        <a-image 
            rotation="90 0 0"
            src="#text_img"></a-image>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>