3d model viewer is epic feature to add real 3d model directly on your page and also in AR for mobiles. This can be useful when you sell something and you want to give users to see how this product looks into their room.
This block can be also used for design purposes because it gives some WOW effect and can work on your custom backgrounds.
You will need model in .glb format and in .usdz (if you need AR for ios). All 3d programs have export option to these formats. For example, this is how it works in free Blender.
3d model viewer also has special smart loader to keep your web vitals as high as possible. It gives you option to add fallback image, so, when site is loaded, user will see image, once he starts to interact with site, 3d model and all scripts are loaded in background.
You can also enable own environment map, lights, animations and camera. Here is video about our 3d addon for Elementor, but in Greenshift, you will find identical parameters
<!-- wp:paragraph -->
<p>3d model viewer is epic feature to add real 3d model directly on your page and also in AR for mobiles. This can be useful when you sell something and you want to give users to see how this product looks into their room. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>This block can be also used for design purposes because it gives some WOW effect and can work on your custom backgrounds.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You will need model in .glb format and in .usdz (if you need AR for ios). All 3d programs have export option to these formats. For example, this is how it works in <a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=Y1Uao-pS-Lw" target="_blank">free Blender</a>.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>3d model viewer also has special smart loader to keep your web vitals as high as possible. It gives you option to add fallback image, so, when site is loaded, user will see image, once he starts to interact with site, 3d model and all scripts are loaded in background.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You can also enable own environment map, lights, animations and camera. Here is video about our <a href="https://www.youtube.com/watch?v=Sjwajr84fVY&t=441s" target="_blank" rel="noreferrer noopener">3d addon for Elementor</a>, but in Greenshift, you will find identical parameters</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/modelviewer {"id":"gsbp-40550f65-94f1","td_url":"https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb","td_load_iter":true,"threecanvheight":[623,null,null,null],"td_rx":0,"td_ry":0,"td_rz":0,"td_mmove":10,"align":"full","background":{"image":["https://greenshiftwp.com/wp-content/uploads/2022/04/bg-kvad.webp"],"size":["cover"]}} -->
<div id="gspb_modelBox-id-gsbp-40550f65-94f1" class="gspb_modelBox gs-t-model gspb_modelBox-id-gsbp-40550f65-94f1 wp-block-greenshift-blocks-modelviewer alignfull" style="display:flex"><model-viewer id="gs_three_gsbp-40550f65-94f1" class="gsmodelviewer" src="https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb" data-loaditer="true" auto-rotate="true" camera-controls="true" data-camera="yes" ar="true" data-mousemove="10"><div class="progress-bar" slot="progress-bar"><div class="update-bar"></div></div><button slot="ar-button" class="ar-button" style="display:flex;justify-content:center;align-items:center;background-color:white;padding:5px 15px 5px 15px;visibility:hidden"><svg height="25" viewBox="0 0 60 54" width="25" class="mr10"><g fill="none" fill-rule="evenodd"><g fill="rgb(0,0,0)" fill-rule="nonzero"><path d="m53 0h-46c-3.86416566.00440864-6.99559136 3.13583434-7 7v40c.00440864 3.8641657 3.13583434 6.9955914 7 7h46c3.8641657-.0044086 6.9955914-3.1358343 7-7v-40c-.0044086-3.86416566-3.1358343-6.99559136-7-7zm5 47c-.0033061 2.7600532-2.2399468 4.9966939-5 5h-46c-2.76005315-.0033061-4.99669388-2.2399468-5-5v-40c.00330612-2.76005315 2.23994685-4.99669388 5-5h46c2.7600532.00330612 4.9966939 2.23994685 5 5z"></path><path d="m53 8h-46c-1.65685425 0-3 1.34314575-3 3v36c0 1.6568542 1.34314575 3 3 3h46c1.6568542 0 3-1.3431458 3-3v-36c0-1.65685425-1.3431458-3-3-3zm-23 19.864-10.891-5.864 10.891-5.864 10.891 5.864zm12-4.19v11.726l-11 5.926v-11.726zm-13 5.926v11.726l-11-5.926v-11.726zm-23-18.6c0-.5522847.44771525-1 1-1h22v4.4l-12.474 6.72c-.013.007-.028.01-.041.018-.3023938.1816727-.4866943.5092336-.485.862v8.382l-10 5zm48 36c0 .5522847-.4477153 1-1 1h-46c-.55228475 0-1-.4477153-1-1v-9.382l10-5v3.382c.000193.3677348.2022003.7056937.526.88l13 7c.2959236.1593002.6520764.1593002.948 0l13-7c.3237997-.1743063.525807-.5122652.526-.88v-3.382l10 5zm0-11.618-10-5v-8.382c-.0001367-.3517458-.1850653-.6775544-.487-.858-.013-.008-.028-.011-.041-.018l-12.472-6.724v-4.4h22c.5522847 0 1 .4477153 1 1z"></path><circle cx="6" cy="5" r="1"></circle><circle cx="10" cy="5" r="1"></circle><circle cx="14" cy="5" r="1"></circle><path d="m39 6h14c.5522847 0 1-.44771525 1-1s-.4477153-1-1-1h-14c-.5522847 0-1 .44771525-1 1s.4477153 1 1 1z"></path></g></g></svg> View in your space</button></model-viewer></div>
<!-- /wp:greenshift-blocks/modelviewer -->
The whole plugins looks awesome, and I will for sure try it out and am thinking about switching from Elementor Pro to your Pro addon.
As for the 3D viewer, this is so, so great! Are you planning on a wireframe view? That would be an option I really need to get rid of my current service.
Hi. Wireframe view is not available in google viewer script (which we use for 3d viewer now), but we are working on Spline 3d addon. I recommend to check info on site spline.design, it has a lot of interesting features.
Christina McKay
Hi,
thank you very much for your reply and pointing my to spline.design
I am looking into this.
3 responses to “3d Model viewer”
The whole plugins looks awesome, and I will for sure try it out and am thinking about switching from Elementor Pro to your Pro addon.
As for the 3D viewer, this is so, so great! Are you planning on a wireframe view? That would be an option I really need to get rid of my current service.
Would love to hear from you!
All the best
Christina McKay
Hi. Wireframe view is not available in google viewer script (which we use for 3d viewer now), but we are working on Spline 3d addon. I recommend to check info on site spline.design, it has a lot of interesting features.
Hi,
thank you very much for your reply and pointing my to spline.design
I am looking into this.
Best, Christina