OBJ models in Processing.js


#1

Hello! My first official post here.

I am migrating processing sketches to Processing.js, and I am having trouble with OBJ import. Using the relatively new PShape works flawlessly for SVG files in both java and js mode, but for some reason not for OBJ.

Below is a basic example of what I’m talking about… it runs in java mode perfectly, but will not load the model in js. Ideas?

PShape thing;

void setup() {

  size(400, 400, P3D);
  background(0);
  
  thing = loadShape("thingie.obj");
}

void draw() {

  background(0);
  lights();

  translate(width/2, height/2, 0);
  shape(thing,0,0);

}

#2

Hey there – just to clarify – are you using processing.js or the more recent (and officially supported) p5.js?


#3

Hello! I am using Processing.js, as in:
http://processingjs.org/


#4

processing.js’s loadShape() only works on .svg files.

This dude worked on porting java-processing’s .obj importer to processing.js a few years ago. I’ve never used it or anything, but it might be a good place to look.


#5

Awesome. I ran across Andor Salga’s hacked js a while back but didn’t realize it was never officially implemented in processing.js

If anyone else is interested, the hacked processing.js is available here:
https://raw.githubusercontent.com/asalga/processing-js/bug608/processing.js

And so far it works really well with the obj files i’ve tested, but no disableStyle() functionality :frowning:

Thanks for pointing me in the right direction, @monks!


#6

I’ve had great luck with the Three.js library. It has a very digestible API. I’m far from knowledgable on WebGL, but with Three.js (not sure with Processing.js or p5.js) loading obj can be heavy for the browser.

You can use a plugin in blender to export your model as a .json and apply misc. functions such as texture wrapping, etc in three.js

My example: http://druqx.github.io/Website/beta.html


#7

yea, echo @danbertner on that one. it’s real easy to get 3d stuff doing stuff in a browser with three.js, though obj’s aren’t the most effecient if u go that route, but as was mentioned u can convert obj’s to three.js’s json format >> u can use mr.doob’s blender plugin ( that’s typically what i do ) but there’s also a python script for it here: https://github.com/mrdoob/three.js/blob/master/utils/converters/obj/convert_obj_three.py