Editable Textures on Models Embeded in Website?


(JERSIED) #1

Hello, I'm brand new to Sketchfab, love what I see so far. I am building a website to sell custom design hockey apparel. My long term goal is to develop a website that has a 3D hockey player model on which the visitor can switch textures and change colors, add their name, number and change their font etc. Is this possible with sketchfab api? Has anyone out there done anything like this already? If you have any examples that come to mind that you could share I'd appreciate that. Thanks!

For the time being Im just going to do all the texture work on my laptop and upload new models for customers as they are requested. This is the model an artist is in the process of making for me.


#2

Hi,

Sounds cool. Yes, it's possible to edit materials and add textures "on the fly" with the Viewer API

Here are the documentation, resources, and some examples. I don't have a specific example of switching textures. Maybe @klaasnienhuis or @shaderbytes has something?

https://sketchfab.com/developers/viewer
https://help.sketchfab.com/hc/en-us/articles/201343059
https://blog.sketchfab.com/how-terma-built-their-interactive-website-with-sketchfab/
https://blog.sketchfab.com/zodiac-built-interactive-boat-configurator-sketchfab/
https://blog.sketchfab.com/viewer-api-part-1-introduction/
https://blog.sketchfab.com/learn-to-code-with-the-sketchfab-viewer-api-part-2-controlling-the-camera/
https://forum.sketchfab.com/t/viewer-api-and-javascript-development/7748


(Klaasnienhuis) #3

Hi @jersied,
technically, swapping textures on a sketchfab model is perfectly possible. You'd need a small system in place for visitors to upload their textures in a compatible way with sketchfab but that's about it, technically.

Artistically it takes a bit of planning to get right. you need to guide visitors in creating the textures at the right size and proportions. You also need to think about if a jersey is one single texture, or if there are multiple textures. For instance you could have a front logo, rear numbers and name, stuff on the arms and so on. Everything has to be compatible with your UV's.


(Shaderbytes) #4

I've already written a tutorial on using my API Utility it is in the pipelines of going live. That being said this is really the smallest technical concern in regards to what the OP is suggesting. Providing a user experience to create textures in the browser would be the biggest hurdle to overcome. You would have to work with an html canvas object , engineer all the tooling to do whatever you are suggesting, upload the canvas from the front end to the server when completed. After that you can inject it into sketchfab so long you are on a cors enabled server.

For each change the user makes to the texture , say they want to try another font, you would again have to upload the changed image from the frontend to the server and again upload it to sketchfab. So any sort of live editing preview tool is out of the question.


(JERSIED) #5

Thanks for all the feedback, examples, tips folks.

For further information I'd want to have a GUI on my site that allows people to pick between predetermined jersey layouts with color areas that are controlled by a color picker built into my site. All fonts and such would be on my site/server too.

If a customer wanted to create their own unique texture, I'd supply them with the texture files and ideally my site would have upload functionality that would allow them to upload their finalized texture files to the model on my site.


(JERSIED) #6

Hey James, many of the links you've supplied send me to a 404...?


#7

Hmm that was weird. I replaced the links and they seem ok now.


(Shaderbytes) #8

ok so you are only planning to inject textures and change colors then. All this is possible with sketchfab API no problem.

Here is a link to My Viewer API Utility :

https://github.com/shaderbytes/Sketchfab-Viewer-API-Utility

As mentioned the tutorial is in the pipelines of going live , maybe a day or two I think.


(JERSIED) #9

Thanks for these details guys. Now that I've got some revenue coming in for my business I need to start planning on next steps for my online business and this is my main focus. Thank you.