Like A Girl

Pushing the conversation on gender equality.

Code Like A Girl

The Easiest Way to Create an Interactive 3D Web Experience

Believe it or not, you can create an interactive 3D web experience in only 15 lines of script. Let’s get started.

Step 1: Download p5.js complete.

https://p5js.org/download/ p5 is a creative developers best kept secret. Not only does it simplify the creative process with a huge library of functions, it also includes WebGL so that we can get that 3D experience we’re looking for.

Step 2: Within the sketch.js write the following:

var sculpture;
function preload() {
sculpture = loadModel('../images/sculpture.obj' , true);
}
function setup() {
createCanvas(720, 400, WEBGL);
ortho(-width / 2, width / 2, height / 2, -height / 2, 0, 500);
}
function draw() {
background(50);
this.rotateY((this.mouseX - this.width / 2) / (this.width / 2));
this.rotateX((this.mouseY - this.height / 2) / (this.width / 2));
normalMaterial();
model(sculpture);
}

Step 3: Replace the path to load model with your own .obj file.

That’s it. You won’t see much viewing locally, but on a server, open the index.html file that came with the p5.js complete. Your model will follow your mouse around. Use the p5js.org reference to make edits and changes to your code including adding textures (skins) and lighting.

If your looking for a tool to create .obj 3D files, check out https://medium.com/@ngai.yt/15-best-tools-for-3d-modeling-software-a7939fded451

If you already use Adobe CC, Fuse Beta can create 3D heads like the one shown above.