3D Billboards and table coordinates

How could I make a billboard sprite appear at a certain coordinate according to my table(like the hero variable)?

Thanks in advance

My code

--# Main


-- Use this function to perform your initial setup
displayMode(FULLSCREEN)
function setup()
    music("A Hero's Quest:Dungeon", true)
    stick = Stick()
    anglex=0
    angley=0
    pylon = Wall("Documents:grate")
    wall = Wall("Documents:marble")
    floor = Floor("Documents:white floor")

sprite("Documents:BG_Gradient")
    world = World()
    hero = Hero(3,3)
    time = 0
    TO_DEG = 180/math.pi


end

-- This function gets called once every frame
function draw()

    background(76, 76, 76, 255)


    font("Arial-BoldMT")
    fill(255, 0, 236, 255)
    fontSize(20)
    time = time +0.02

    local TO_DEG = TO_DEG
    local hero = hero
    perspective(60)
     a=math.rad(anglex)
    x, z=math.sin(a) *1000, -math.cos(a)*1000
     b=math.rad(angley)
    y=math.sin(b) *1000, -math.cos(b)*1000
    camera(hero.x,0,hero.z,  x,y,z)

   pushMatrix()
    world:draw()
    popMatrix()

-- Draw hero



    -- roll animation
    if stick.active then
        rotate(-ElapsedTime*10*TO_DEG/2, 0, 0, 1)
    end

    scale(.25, .25, .25)
    hero:draw()

-- Restore orthographic projection
    ortho()
    viewMatrix(matrix())
    resetMatrix()

    --fade out overlay
    sprite("Cargo Bot:Background Fade", WIDTH/2, HEIGHT/2, WIDTH, HEIGHT)


    if stick.active then
        local ceil = math.ceil
        stick:draw()

        -- move hero if stick is used

        local mvt = (vec2(hero.x-x,hero.z-z):normalize())/50 * stick.dist
        hero.x = hero.x + 0-mvt.x
        hero.z = hero.z + 0-mvt.y

        -- convert to table coordinates
        hero.px = ceil(hero.x - .5)
        hero.py = ceil(hero.z - .5)

        -- lazy collision check
        if world.data[hero.py][hero.px] ~= 0 then
            hero.x = hero.x + mvt.x
            hero.z = hero.z + mvt.y
            hero.px = ceil(hero.x + .5)
            hero.py = ceil(hero.z + .5)
        end
    end
end

function touched(touch)

    if touch.x<WIDTH/2 then stick:touched(touch) else
     anglex = anglex +touch.deltaX/3
        angley = angley + touch.deltaY/3
    end
end



--# World
World = class()

function World:init()

    -- define the world
    self.data =
    {
        {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1},
        {1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1},
        {1, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1},
        {1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1},
        {1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1},
        {1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1},
        {1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1},
        {1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1},
        {1, 1, 2, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1},
        {1, 1, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ,1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1},
        {1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1}

    }
end

function World:draw()
    local floor, wall, pylon = floor, wall, pylon
    local offSet = 10
    local px, py = hero.px, hero.py

    -- look around the hero to draw whatever is around him
    translate(px - offSet, 0, py - offSet)
    for y = py - offSet, py + offSet do
        for x = px - offSet, px + offSet do
            if self.data[y] then
                local val = self.data[y][x]
                if val == 0 then
                    floor:draw()
                elseif val == 1 then
                    wall:draw()
                elseif val == 2 then
                    pylon:draw()
                end
            end
            translate(1,0,0)
        end
        translate(-(1 + 2 * offSet), 0, 1)
    end
end



--# Hero
Hero = class()

function Hero:init(x, z)
    self.x, self.y, self.z = x,0,z
    self.px, self.py = math.ceil(.5+x), math.ceil(.5+z)

    self.mdl = Wall("Documents:StoneTile")
    sprite("Documents:BG_Gradient")
end

function Hero:draw()
    self.mdl:draw()
end


--# Wall
Wall = class()


function Wall:init(tex)
    -- all the unique vertices that make up a cube
    local vertices =
    {
        vec3(-0.5, -0.5,  0.5), -- Left  bottom front
        vec3( 0.5, -0.5,  0.5), -- Right bottom front
        vec3( 0.5,  0.5,  0.5), -- Right top    front
        vec3(-0.5,  0.5,  0.5), -- Left  top    front
        vec3(-0.5, -0.5, -0.5), -- Left  bottom back
        vec3( 0.5, -0.5, -0.5), -- Right bottom back
        vec3( 0.5,  0.5, -0.5), -- Right top    back
        vec3(-0.5,  0.5, -0.5), -- Left  top    back
    }

    -- now construct a cube out of the vertices above
    local verts =
    {
        -- Front
        vertices[1], vertices[2], vertices[3],
        vertices[1], vertices[3], vertices[4],
        -- Right
        vertices[2], vertices[6], vertices[7],
        vertices[2], vertices[7], vertices[3],
        -- Back
        vertices[6], vertices[5], vertices[8],
        vertices[6], vertices[8], vertices[7],
        -- Left
        vertices[5], vertices[1], vertices[4],
        vertices[5], vertices[4], vertices[8],
        -- Top
        vertices[4], vertices[3], vertices[7],
        vertices[4], vertices[7], vertices[8],
       -- Bottom
        vertices[5], vertices[6], vertices[2],
        vertices[5], vertices[2], vertices[1],
    }

    -- all the unique texture positions needed
    local texvertices =
    {
        vec2(0,0),
        vec2(1,0),
        vec2(0,1),
        vec2(1,1)
    }

    -- apply the texture coordinates to each triangle
    local texCoords =
    {
        -- Front
        texvertices[1], texvertices[2], texvertices[4],
        texvertices[1], texvertices[4], texvertices[3],
        -- Right
        texvertices[1], texvertices[2], texvertices[4],
        texvertices[1], texvertices[4], texvertices[3],
        -- Back
        texvertices[1], texvertices[2], texvertices[4],
        texvertices[1], texvertices[4], texvertices[3],
        -- Left
        texvertices[1], texvertices[2], texvertices[4],
        texvertices[1], texvertices[4], texvertices[3],
        -- Top
        texvertices[1], texvertices[2], texvertices[4],
        texvertices[1], texvertices[4], texvertices[3],
        -- Bottom
        texvertices[1], texvertices[2], texvertices[4],
        texvertices[1], texvertices[4], texvertices[3],
    }

    self.model = mesh()
    self.model.vertices = verts
    self.model.texture = tex
    self.model.texCoords = texCoords
    self.model:setColors(255,255,255,255)
end

function Wall:draw()
    self.model:draw()
end

--# Floor
Floor = class()

function Floor:init(tex)
    -- all the unique vertices that make up a cube
    local vertices =
    {
        vec3( 0.5,  -0.5,  0.5), -- Right top    front
        vec3(-0.5,  -0.5,  0.5), -- Left  top    front
        vec3( 0.5,  -0.5, -0.5), -- Right top    back
        vec3(-0.5,  -0.5, -0.5), -- Left  top    back
    }


    -- now construct a cube out of the vertices above
    local verts =
    {
        -- Bottom
        vertices[3], vertices[4], vertices[2],
        vertices[3], vertices[2], vertices[1],
    }

    -- all the unique texture positions needed
    local texvertices =
    {
        vec2(0,0),
        vec2(1,0),
        vec2(0,1),
        vec2(1,1)
    }

    -- apply the texture coordinates to each triangle
    local texCoords =
    {
        -- Bottom
        texvertices[1], texvertices[2], texvertices[4],
        texvertices[1], texvertices[4], texvertices[3],
    }

    self.model = mesh()
    self.model.vertices = verts
    self.model.texture = tex
    self.model.texCoords = texCoords
    self.model:setColors(255,255,255,255)
end

function Floor:draw()
    self.model:draw()
end


--# Stick
Stick = class()

function Stick:init()
    self.direction = 0
    self.dist = 0

    self.active = false
    self.origin = vec2(150, 150)
    self.center = self.origin
    self.pos = self.origin

    self.stick_bg = readImage("Space Art:Eclipse")
    self.stick = readImage("SpaceCute:Collision Circle")
    self.vec=vec2(0,0)
end

function Stick:draw()
    sprite(self.stick_bg, self.center.x, self.center.y)
    sprite(self.stick, self.pos.x, self.pos.y)
end

function Stick:touched(touch)
    if touch.state == BEGAN then
        self.center = vec2(touch.x, touch.y)
        self.active = true
    end

    self.pos = vec2(touch.x, touch.y)
    self.direction = math.atan2(self.pos.y - self.center.y, self.pos.x - self.center.x)
    self.dist = math.min(2, self.pos:dist(self.center)/32)
    self.vec=(self.center-self.pos):normalize()
    print(self.vec)
    if touch.state == ENDED then
        self.center = self.origin
        self.pos = self.center
        self.active = false
    end


end


ummm, sprite(img, table.paramAForX, table.paramBForY)… you should explain further, and also read how the sprite() method works.

@matkatmusic that’s how it works in 2D in 3D it’s a little different. I didn’t specify but this question is actually about 3D

we can’t help you unless you’re specific in your request. be specific.

edit: it seems that you added code to this thread, which wasn’t there when I posted.

—^ look at my discussion title

@matkatmusic Actually, it’s been there since I made the discussion. Look at the time of the post.

It’s not that different in 3D. Why not just create a basic square mesh and put a texture on it, then translate it to some coordinates and draw it?

@SkyTheCoder I guess I could do it that way. I just wanted to know though how I could use the table as a coordinate system for it though. See the “hero” variable in setup. Kind of like that.

@SkyTheCoder any ideas?

You could try reading some of my posts or ebook about 3D, that would save you some questions.

Basically, you translate to the point where you want the picture, then sprite it. Simple enough, but you also want to rotate it to face the camera, which is the next question you are going to ask.

https://coolcodea.wordpress.com/2013/05/23/62-3d-adding-stand-alone-images-trees-animals/

Actually @Ignatz I already know a way to rotate them to face the camera. I just want to know how to apply the billboard sprite to specific coordinates on my table eg (3,5)

Translate to the place on the screen, then sprite the image

Yes, so how would I do that in relation to table coordinates.

Look at my code at the top of the post and find the hero variable.

I mean like that

If you don’t know how to turn table coordinates into screen positions, you’re nowhere near ready to begin developing 3D apps.

(I was puzzled about why you would have trouble with this if you were able to write all the other code - then I discovered you had copied the code from an earlier post on the forum, maybe from here).

@Ignatz Actually, I believe it was a game base from @xavier.

@Toxyn If I understand you correctly, you want to make a class for the billboard. So…make a class for it.

@SkyTheCoder yeah, I’m just messing around with it and seeing what I can do with it

And no, I want to know how to apply the billboard to the coordinates the way Hero variable is set. It seems like an interesting concept and could streamline things. Basically being able to make a variable called e.g “Billboard” and set its coordinates to (3,5)