Shouldn't this 3D texture of sheep work on the heart?

p5.js Coding Questions
1

https://editor.p5js.org/tom.smith/sketches/JCBP7Qksj

I’ve tried all sorts of ways round but can’t get the texture (a .jpg) to work.

Thanks

Tom

1 Like
2

Hi @everythingability ,

There may be more than one issue preventing the texture’s display on the model… but for starters: if the .obj file you’re loading does not contain any texture coordinate data (for example, vt 0.5 0.5) which is then referenced in the middle entry of a face’s vertex indices (for example, f 1/1/1 2/2/2 3/3/3), then a renderer won’t know how to map the texture onto the 3D model. If you have access to the software used to convert the heart model from an .stl to an .obj, return to that software and see what options you have for creating a UV map.

Best,
Jeremy

1 Like
3

Ah thanks, Jeremy… I don’t have ANY idea about 3D work. to be honest. I quite like using things I really don’t know how to use… badly… :slight_smile:

I found a .stl file here https://www.myminifactory.com/scantheworld/ and then used MeshMixer to reduce it from 60M to <5MB (worked quite well)… imported in p5js editor and it didn’t show up, exported as .obj and it did…

I guess one day I’ll have to have a bash at learning 3D tools… probably a fun task for lockdown…

Thanks for your help…

Tom

1 Like
4

@everythingability ,

Sure thing. In the meantime, here’s what a cube with mapped UV coordinates looks like when formatted as an .obj file. A p5 editor sketch with this file is here.

# Hashtags precede comments.
# v: 8, vt: 4, vn: 6, f: 6

# Name.
o Cube

# Coordinates.
v -0.353553 -0.353553 -0.353553
v -0.353553 -0.353553 0.353553
v -0.353553 0.353553 -0.353553
v -0.353553 0.353553 0.353553
v 0.353553 -0.353553 -0.353553
v 0.353553 -0.353553 0.353553
v 0.353553 0.353553 -0.353553
v 0.353553 0.353553 0.353553

# Texture coordinates (UVs).
vt 0.000000 0.000000
vt 0.000000 1.000000
vt 1.000000 1.000000
vt 1.000000 0.000000

# Normals (control how light bounces off a lit object).
vn 1.000000 0.000000 0.000000
vn 0.000000 0.000000 1.000000
vn 0.000000 0.000000 -1.000000
vn 0.000000 -1.000000 0.000000
vn -1.000000 0.000000 0.000000
vn 0.000000 1.000000 0.000000

# Faces.
# Each vertex is separated by a space.
# Each index in the vertex is separated by a forward slash '/' .
# Each index refers to the three arrays of data above:
# v/vt/vn v/vt/vn v/vt/vn etc.
# Indices begin at 1, not at 0, as they would in p5.js .
# It's possible for data to not be included:
# v//vn v//vn v//vn etc.
f 1/3/5 2/4/5 4/1/5 3/2/5 
f 3/3/6 4/4/6 8/1/6 7/2/6 
f 7/3/1 8/4/1 6/1/1 5/2/1 
f 5/3/4 6/4/4 2/1/4 1/2/4 
f 3/2/3 7/3/3 5/4/3 1/1/3 
f 8/2/2 4/3/2 2/4/2 6/1/2

I don’t know anything about MeshMixer. If it doesn’t have any UV mapping options, Blender is an alternative; to be specific, see the manual here.

Best,
Jeremy

2 Likes