Looking to incorporate a 3D viewer into a quote form.

[Evan]

I'm working on a (Wordpress) website that will allow the user fill out a quote form and uploaded a 3D model, and the client wants this 3D model to show in the form itself (why the user needs to see their own 3D model is a bit of a mystery, but hey it's what the client wants). I've found a few Wordpress 3D viewers but I haven't found any that integrate with a form (preferably Gravity Forms, but I'm open to whatever works).

I'm thinking I might need to branch away from a native Wordpress solution since I haven't really found what I need browing through the available plugins out there for 3D viewers. I haven't dabbled with WebGL at all (I've wanted to) but could that be a possible route or is there an easier option out there?

Thanks in advance!

 

[avena]

Hello Evan, you got an interesting case there :D

The most common way to use 3d on the web is by using a Canvas element (<canvas>) with a WebGL context. You can put the <canvas> element inside the HTML of your form (I guess the goal is to preview what it was uploaded).

Here are a couple of ways to achieve this:

1. Using a library
You can use Three.js for this (or Babylon js), using the different loader libraries.

There are a few things you may want to consider:

• The file type of the 3d models (commons are .obj, .fbx, gltf, etc).
• Handling of loading errors.
• Properly import of textures.

2.Using the model-viewer custom web component (which uses three.js under the hood):
In this case, there is no canvas, just the <model-viewer> element (inside there is a canvas, but it is hidden).
https://modelviewer.dev/

The last one is probably the easiest but check the browser support.

 

[Gummibeer]

I wanted to link avena because I think he's the most experienced here regarding 3D in web.
I would also say that you have to create your own solution. No idea if your form plugin allows to add custom inputs/widgets.
My major concern would be to find a solution that allows to use a local file - so before it's uploaded and not available via URL.
But you will definitely need some custom JS.

 

[Adam]

Interesting challenge Evan! I think you’re right that it’s unlikely there’s going to be anything like this out the box, but I don’t think the JS has to get too custom.

@avena pointed you in a great direction for displaying the 3D model.

As far as getting the file in the first place, seems to me like a multi-step form might be your best bet. Get the file uploaded in step one, then as they move on it’s on your server ready to show for step 2.

Since we have the wonders of PHP, this could be as simple as passing some data pointing to the uploaded model through a GET/POST and loading it in to the inline JS of your choice on the next screen. The displaying of the model wouldn’t necessarily have to be tied directly to the form logic then, just some pointer of where it was uploaded in the previous step.