# Problem with faces obj

**URL:** <https://discourse.processing.org/t/problem-with-faces-obj/28961>\
**Category:** Coding Questions\
**Created:** [March 29, 2021, 8:45pm UTC](https://discourse.processing.org/t/problem-with-faces-obj/28961 "2021-03-29T20:45:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![pedrojateruel](https://avatars.discourse-cdn.com/v4/letter/p/f05b48/32.png) [@pedrojateruel](https://discourse.processing.org/u/pedrojateruel)\
**Post date:** [March 29, 2021, 8:45pm UTC](https://discourse.processing.org/t/problem-with-faces-obj/28961/1 "2021-03-29T20:45:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 29, 2021, 9:10pm UTC](https://discourse.processing.org/t/problem-with-faces-obj/28961/2 "2021-03-29T21:10:44Z")

</div>

Hi,

Welcome to the forum! 😉

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

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![pedrojateruel](https://avatars.discourse-cdn.com/v4/letter/p/f05b48/32.png) [@pedrojateruel](https://discourse.processing.org/u/pedrojateruel)\
**Post date:** [March 29, 2021, 9:20pm UTC](https://discourse.processing.org/t/problem-with-faces-obj/28961/3 "2021-03-29T21:20:00Z")

</div>

This is my .obj . It is a tetrahedron

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

# [www.blender.org](http://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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7e21b6c1ac0d174bb283eba1e00b904b808c46d0.png)

---

<div class="post-metadata">

**Author:** ![pedrojateruel](https://avatars.discourse-cdn.com/v4/letter/p/f05b48/32.png) [@pedrojateruel](https://discourse.processing.org/u/pedrojateruel)\
**Post date:** [March 29, 2021, 9:21pm UTC](https://discourse.processing.org/t/problem-with-faces-obj/28961/4 "2021-03-29T21:21:02Z")

</div>

Sorry, first of all thanks for yous interest

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 29, 2021, 9:27pm UTC](https://discourse.processing.org/t/problem-with-faces-obj/28961/5 "2021-03-29T21:27:16Z")

</div>

All right I can see the issue! 😉

This is because you are using a large stroke like :

```auto
stroke(0);
strokeWeight(10);

```

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

> <https://stackoverflow.com/questions/60158002/p5-js-webgl-polygon-line-joints-workaround>

Also the reference for the GitHub issue :

> <https://github.com/processing/p5.js/issues/4047>
>
> Currently when using strokeJoin() in WEBGL mode an error occurs and a cryptic message is logged:
> Uncaught TypeError: this.\_renderer.strokeJoin is not a...

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

> **[Three.js – JavaScript 3D library](https://threejs.org/)**

Have fun!

---

<div class="post-metadata">

**Author:** ![pedrojateruel](https://avatars.discourse-cdn.com/v4/letter/p/f05b48/32.png) [@pedrojateruel](https://discourse.processing.org/u/pedrojateruel)\
**Post date:** [March 29, 2021, 9:42pm UTC](https://discourse.processing.org/t/problem-with-faces-obj/28961/6 "2021-03-29T21:42:38Z")

</div>

> [@josephh](#):
>
> strokeJoin()

Thanks.

Solved using (from your link) :

strokeWeight(0);  
or strokeWeight(0.01);