Problem with faces obj

p5.js Coding Questions
1

Good night .
I have a problem when I export figures from blender in .obj.
I can create the model in the canvas and it works, but vertex of the figure are not together.
There is a gap between faces.
I have the same problem with .obj exported from geogebra.

Thanks.

2

Hi,

Welcome to the forum! :wink:

I’ve exported the default cube from Blender (with default options) and then imported it in p5js with this simple code :

let cube;
let angle = 0;

function preload() {
  cube = loadModel('cube.obj');
}

function setup() {
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background(255);

  scale(50);
  rotateX(sin(angle) * TWO_PI);
  rotateY(cos(angle / 2) * TWO_PI);

  fill(255, 0, 0);
  model(cube);

  angle += 0.01;
}

And this is working fine, there’s no gaps between the faces.

This might be an issue with your 3d model → in Blender select your object, enter in edit mode (Tab) then press A to select all points then press M for merge then select By Distance in order to merge all the points that are close enough to each other just in case your faces were not connected.

Hope it helps :slight_smile:

3

This is my .obj . It is a tetrahedron

Blender v2.82 (sub 7) OBJ File: ‘’

www.blender.org

mtllib untitled.mtl
o Cube_Cube.001
v -13.811712 6.379276 8.026554
v -13.811712 -13.620724 -11.973446
v 6.188288 -13.620724 8.026554
v 6.188288 6.379276 -11.973446
vt 0.000000 0.000000
vt 0.000000 0.000000
vt 0.000000 0.000000
vt 0.000000 0.000000
vn 0.5774 0.5774 -0.5774
vn -0.5774 0.5774 0.5774
vn 0.5774 -0.5774 0.5774
vn -0.5774 -0.5774 -0.5774
usemtl None
s off
f 1/1/1 3/2/1 2/3/1
f 3/2/2 4/4/2 2/3/2
f 1/1/3 2/3/3 4/4/3
f 3/2/4 1/1/4 4/4/4

Image
Captura de pantalla de 2021-03-29 23-19-03

4

Sorry, first of all thanks for yous interest

1 Like
5

All right I can see the issue! :wink:

This is because you are using a large stroke like :

stroke(0);
strokeWeight(10);

The WEBGL implementation in p5js is still experimental as stated in this thread :

Also the reference for the GitHub issue :

Also you might want to look at a more advanced 3d library like Three.js :

Have fun!

1 Like
6

Thanks.

Solved using (from your link) :

strokeWeight(0);
or strokeWeight(0.01);

1 Like