Model Viewer for my web app? #4549
Replies: 7 comments 14 replies
-
|
Yes Matt, I think modelviewer is exactly what you need to replace your previous 3D provider. (image attached is your model displaying in modelviewer) Not sure of your background but if you need someone to build the intended functionality, let me know! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I will be in touch. |
Beta Was this translation helpful? Give feedback.
-
|
Hey there @matt998759! I think it depends on how much functionality/granularity you are wanting with your products. If you are wanting simple color/size changes, I would say MV is good. They don't have great options for hiding/showing parts, but you can always "hack" your way down to ThreeJS and do it there. If you're wanting full control I would say just use ThreeJS, and then you can always export your model to MV (onto a different page or something) to get the AR functionality. I'm still relatively new to programming, so what I'm listing below is still a work in progress. But will hopefully show what can be done with MV! I have built my app from no experience at all using MV, so hopefully that shows how easy it is to set up. Documentation is great, and I feel the community is helpful here as well. Simple chair with just color swapping |
Beta Was this translation helpful? Give feedback.
-
|
Really cool, thanks for example. Will let you know how it goes but we are going to try and get this done in the next week. |
Beta Was this translation helpful? Give feedback.
-
|
We actually just made a simple example showing how to hide/show parts using our MV API: https://modelviewer.dev/examples/scenegraph/#hideShowMeshVariantsExample |
Beta Was this translation helpful? Give feedback.
-
|
Also, if anyone has a cuter model to contribute to this example, PRs welcome! As you may have guessed, I'm not much of a 3D artist... |
Beta Was this translation helpful? Give feedback.
-
|
@zpennachi @WadeMorrison Our GLB files have several materials and textures defined by a UUID (see attached screenshot). We are trying to dynamically replace a material by UUID. How can we get that UUID from modelViewerTexture.model.materials?
|
Beta Was this translation helpful? Give feedback.
-
|
@matt998759. So sorry to hear that SayDuck is leaving you in a lurch. We may be able to help if you're finding that building your own solution is too much to manage in a short amount of time. Contact me at: info at nvzn dot net. |
Beta Was this translation helpful? Give feedback.
-
|
If I remember correctly, the UUID is pulled/referenced from an external material, it's not actually inside the GLB (they may have changed the way they do it since I last used it). So you had an external material library basically. I haven't seen any examples on here or from other people who have done it like that. If the material is inside the GLB, your best bet is to use the materialVariant API, otherwise I would use the texture swap method if you're wanting more of an "external library" of sorts. I'll download your model and take a look at the inside of the GLB model and see what I can come up with if you'd like. No charge, as I will be doing this alongside my own job (so wont be as quick as a dedicated person), and it'll be good to test my app with someone else's model. Is your background in 3D modeling, coding, or something else? |
Beta Was this translation helpful? Give feedback.
-
|
I really appreciate it @WadeMorrison . I should have put a better GLB example so I am attaching a new one here. This is a phone case. For this example, we would be dynamically replacing the texture with the UUID: 71aca9f0-c697-013b-7d52-2e500ea4e81a You will see that is here:
As for my background, I am not a developer. I am more of a solution architect that would bring this to our dev for implementation. Currently, this is the roadblock they are experiencing. I appreciate any assistance on this. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Okay, I will look into them both and see what I can come up with. Do you have discord or an email I can keep in contact with you, so we don't keep blowing up the discussion board? |
Beta Was this translation helpful? Give feedback.
-
|
Hey Matt, I sent you an email, not sure if you got it or not. But here is a really basic example: |
Beta Was this translation helpful? Give feedback.
-
|
@zpennachi any ideas on this? I am happy to pay you or anyone that has solution to that a consulting fee. We are obviously in a bit of a time crunch and this is where we are getting hung up. Any help would be greatly appreciated. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
hey Matt! I actually don't have much experience with UUIDs, it sounds like Wade is gonna be a much better help for you! I'm here to offer free support as well, but I think Wades gonna be your dude! If it helps at all, I am currently in the process of building a CMS-driven material for modelviewer. This is using the textureswapping method that @WadeMorrison mentioned above. CODE: (html controls for selecting image)
None
building
learning
having fun :)
<script type="module">
const modelViewerTexture = document.querySelector("model-viewer#duck");
const textureName = document.querySelector('#texture-name');
const imageName = document.querySelector('#image-name');
modelViewerTexture.addEventListener("load", () => {
const material = modelViewerTexture.model.materials[0];
const createAndApplyTexture = async (channel, event) => {
if (event.target.value == "None") {
// Clears the texture.
material[channel].setTexture(null);
// Display the names values
textureName.innerText = "None";
imageName.innerText = "None";
} else if (event.target.value) {
// Creates a new texture.
const texture = await modelViewerTexture.createTexture(event.target.value);
// Set the texture name
texture.name = event.target.options[event.target.selectedIndex].text.replace(/ /g, "_").toLowerCase();
// Applies the new texture to the specified channel.
material[channel].setTexture(texture);
// Display the names values
textureName.innerText = texture.name;
imageName.innerText = texture.source.name;
}
}
document.querySelector('#normals2').addEventListener('input', (event) => {
createAndApplyTexture('normalTexture', event);
});
});
</script>
None None |
Beta Was this translation helpful? Give feedback.
-
|
Yes, please email me at mattannen at gmail dot com.
On 11/8/2023 8:22:05 AM, WadeMorrison ***@***.***> wrote:
Okay, I will look into them both and see what I can come up with.
Do you have discord or an email I can keep in contact with you, so we don't keep blowing up the discussion board?
—
Reply to this email directly, view it on GitHub [#4549 (reply in thread)], or unsubscribe [https://github.com/notifications/unsubscribe-auth/A7ODPNEMB6N3LUDMUFYCAATYDOBP3AVCNFSM6AAAAAA6TTTEMSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TKMJQGY2TC].
You are receiving this because you were mentioned.Message ID: ***@***.***>
[241a4be2-ef5b-4c9c-8d4f-dc55f48dc72e]
|
Beta Was this translation helpful? Give feedback.
-
|
@WadeMorrison thank you for your help, we are back up and running and have replaced Sayduck. Their bankruptcy was a blessing I guess since this will save us about $8,000 a year using model-viewer in our environment with no view or model limitations. Everything is running like it was before. Thank you all for your help. Let me know if you want a free phone case or something thru our site. Least I can do. |
Beta Was this translation helpful? Give feedback.
-
|
@WadeMorrison Looking for more work? |
Beta Was this translation helpful? Give feedback.
-
|
Sure, depending on the scope of it! Email me at let me know what you’ve got! |
Beta Was this translation helpful? Give feedback.
-
|
email sent |
Beta Was this translation helpful? Give feedback.
-
Good evening,
I woke up this morning to news that our 3D/AR provider is going bankrupt and will be shutting it's servers down. We used them for modeling and hosting our ~200 product assets.
Background:
I run an ecommerce site that allows customers to personalize items. They can preview item with their customizations in 3D/AR via browser.
When customers request 3D, we are generating JPG/PNG design files and passing those to our provider viewer to swap out the texture.
I was able to pull my GLB files from them before the servers went down. I also have USDZ and GLTF files for what it's worth but I believe the GLTF will have external references to provider servers so these are probably useless.
I have been looking a lot into model-viewer today and am hopeful this could be a solution. Based on my very brief explanation would model-viewer be a sufficient replacement?
I attached an example GLB file I have just for reference. 16oz Insulated Tumbler (Clasp Top) (1).zip
Anyone that has knowledge on this your help is greatly appreciated. I would be willing to pay someone for consulting hours.
Thank you,
Matt
Beta Was this translation helpful? Give feedback.
All reactions