Dynamic and interactive 3d block for WordPress

Greenshift has many 3D blocks: a model viewer, a Spline3d Viewer, and a 3D Woocommerce gallery. The dynamic 3D block extends 3D functions even more and introduces 3D API. Dynamic 3d block has 3 basic dynamic options.

Dynamic 3d Block works with Spline3D app and .splinecode format. To use it, click on Export in the Spline3d app, then select Viewer or Code export and copy the file URL (or download it from Spline and upload it to your site)

Advanced Animations

You can animated not only model parts but also camera and light

Animations in 3d block is similar to Chained animations in Animation Container and it uses the same principles. The only difference is that you can select objects to animate in each chain. You need to know few important things about animation chains

  1. You can animate the same properties inside the Spline app, and it’s recommended if you have interactions directly in the model. But if you plan to use Scroll animations, it is better to do them in Dynamic 3d block because they will work more smoothly and have more flexibility
  2. Each animation chain starts from zero time. To have one chain animated after the previous one, use the symbol “>” in the chain’s custom time. All GSAP timeline features are supported
  3. Values are related to the model and not to the browser. For example, if your model is placed on 100px, then if you use 200px for animation, the shift will be only 100px and not 200px
  4. If you want to use interpolated animation, enable Scroll Interpolation option. For the trigger end, use values like +=1000px, meaning it will take 1000px from the beginning of the animation. Use the word “max” if you want to make animation for the whole available scroll distance of the page
  5. In scroll interpolated animations, duration is converted to distance. So, if you have 2 chains with a 9-second duration and the other 1 second, and you use a +=1000 scroll distance, then the first will take 900px, and the second will be 100px. For more precise distance, enable Linear Ease in each animation
  6. By default, the animation will start when the object is in view at the bottom of the page. If your object is in the first screen, you can use 0 as a trigger start.
  7. If model has baked animations and you add animations also in block, then model’s animations will have priority

Dynamic fields for 3d block

Dynamic options are based on a variable system in spline, but now, you can connect them to dynamic fields on your site. You can make your post title dynamic 3D or build a custom 3D chart based on the meta field values of the post—there are no limits at all.

Connection to site is pretty simple, once you load model, you will see all available variables in your model. Then you can change values manually or connect them to your Site dynamic fields

Interaction layers for 3d

You can connect dynamic data and interaction layers to 3d variables. For this, you need to copy the ID from the block and the name of the variable

Preparations in Spline3d

There are some essential options in the app for preparing files for use on the web.

The first important option is AutoZoom and responsive. Usually, it would be best if you kept them ON

Second. When you click on export, visit also Play settings. If you plan to make animations via block instead of animations on model, you need to disable some events, for example, Pan and Zoom, this will keep only scroll and will remove accidental shifting of model when you scroll page

Next. If you update your model, You need to click on Update Code Export button, otherwise, model will use old data on your site.

Performance

For better speed, it’s not recommended to load more than 1-2 models on page. Anyway, block has special Smart Loading feature that can delay library and model loading. This will save your web vitals because 3d libraries are very heavy.

For developers

When you copy Model ID from block, you can use it for making more advanced setup, because this ID will register global variable where Scene is saved. So, you can use any Spline Runtime functions to modify scene further.

Copy this post’s content
<!-- wp:paragraph -->
<p>Greenshift has many 3D blocks: a model viewer, a Spline3d Viewer, and a 3D Woocommerce gallery. The dynamic 3D block extends 3D functions even more and introduces 3D API. Dynamic 3d block has 3 basic dynamic options.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-4b99cf5","type":"infolight"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-4b99cf5" id="gspb_infoBox-id-gsbp-4b99cf5"><div class="gs-box infolight_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Dynamic 3d Block works with <a href="https://app.spline.design/">Spline3D app</a> and .splinecode format. To use it, click on Export in the Spline3d app, then select Viewer or Code export and copy the file URL (or download it from Spline and upload it to your site)</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="advanced-animations">Advanced Animations</h2>
<!-- /wp:heading -->

<!-- wp:video {"id":4949} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/07/Areaweb.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:greenshift-blocks/buttonbox {"id":"gsbp-2ec1c5a","buttonContent":"Demo","buttonLink":"https://greenshift.wpsoul.net/animated-3d-block-in-wordpress/","linkNewWindow":true} -->
<div class="gspb_button_wrapper gspb_button-id-gsbp-2ec1c5a" id="gspb_button-id-gsbp-2ec1c5a"><a class="wp-block-greenshift-blocks-buttonbox gspb-buttonbox wp-element-button" href="https://greenshift.wpsoul.net/animated-3d-block-in-wordpress/" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Demo</span></span></span></a></div>
<!-- /wp:greenshift-blocks/buttonbox -->

<!-- wp:paragraph -->
<p>You can animated not only model parts but also camera and light</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":4952} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/07/Area2.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:greenshift-blocks/buttonbox {"id":"gsbp-f99fac7","buttonContent":"Demo","buttonLink":"https://greenshift.wpsoul.net/animated-camera-in-3d-block/","linkNewWindow":true} -->
<div class="gspb_button_wrapper gspb_button-id-gsbp-f99fac7" id="gspb_button-id-gsbp-f99fac7"><a class="wp-block-greenshift-blocks-buttonbox gspb-buttonbox wp-element-button" href="https://greenshift.wpsoul.net/animated-camera-in-3d-block/" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Demo</span></span></span></a></div>
<!-- /wp:greenshift-blocks/buttonbox -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Animations in 3d block is similar to Chained animations in <a href="https://greenshiftwp.com/animation-container/" data-type="post" data-id="1129">Animation Container</a> and it uses the same principles. The only difference is that you can select objects to animate in each chain. You need to know few important things about animation chains</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>You can animate the same properties inside the Spline app, and it's recommended if you have interactions directly in the model. But if you plan to use Scroll animations, it is better to do them in Dynamic 3d block because they will work more smoothly and have more flexibility</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Each animation chain starts from zero time. To have one chain animated after the previous one, use the symbol ">" in the chain's custom time. All GSAP timeline features are supported</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Values are related to the model and not to the browser. For example, if your model is placed on 100px, then if you use 200px for animation, the shift will be only 100px and not 200px</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>If you want to use interpolated animation, enable Scroll Interpolation option. For the trigger end, use values like +=1000px, meaning it will take 1000px from the beginning of the animation. Use the word "max" if you want to make animation for the whole available scroll distance of the page</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>In scroll interpolated animations, duration is converted to distance. So, if you have 2 chains with a 9-second duration and the other 1 second, and you use a +=1000 scroll distance, then the first will take 900px, and the second will be 100px. For more precise distance, enable Linear Ease in each animation</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>By default, the animation will start when the object is in view at the bottom of the page. If your object is in the first screen, you can use 0 as a trigger start. </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>If model has baked animations and you add animations also in block, then model's animations will have priority</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="dynamic-fields-for-3d-block">Dynamic fields for 3d block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Dynamic options are based on a variable system in spline, but now, you can connect them to dynamic fields on your site. You can make your post title dynamic 3D or build a custom 3D chart based on the meta field values of the post—there are no limits at all. </p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-614263c"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-614263c" id="gspb_infoBox-id-gsbp-614263c"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Check the video tutorial <a href="https://www.youtube.com/watch?v=Id_SZVCUVMM" target="_blank" rel="noreferrer noopener">how to create variables in Spline3d App </a></p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:paragraph -->
<p>Connection to site is pretty simple, once you load model, you will see all available variables in your model. Then you can change values manually or connect them to your Site dynamic fields</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":4967} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/07/dynamic3d.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:greenshift-blocks/buttonbox {"id":"gsbp-9cab6fb","buttonContent":"Demo","buttonLink":"https://greenshiftwp.com/dynamic-3d-block-for-wordpress-will-blow-you/","linkNewWindow":true} -->
<div class="gspb_button_wrapper gspb_button-id-gsbp-9cab6fb" id="gspb_button-id-gsbp-9cab6fb"><a class="wp-block-greenshift-blocks-buttonbox gspb-buttonbox wp-element-button" href="https://greenshiftwp.com/dynamic-3d-block-for-wordpress-will-blow-you/" target="_blank" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Demo</span></span></span></a></div>
<!-- /wp:greenshift-blocks/buttonbox -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="interaction-layers-for-3d">Interaction layers for 3d</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You can connect dynamic data and interaction layers to 3d variables. For this, you need to copy the ID from the block and the name of the variable</p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":4970} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/07/interaction.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:greenshift-blocks/buttonbox {"id":"gsbp-63c16bc","buttonContent":"Demo","buttonLink":"https://greenshiftwp.com/3d-earth/"} -->
<div class="gspb_button_wrapper gspb_button-id-gsbp-63c16bc" id="gspb_button-id-gsbp-63c16bc"><a class="wp-block-greenshift-blocks-buttonbox gspb-buttonbox wp-element-button" href="https://greenshiftwp.com/3d-earth/" rel="noopener"><span class="gspb-buttonbox-textwrap"><span class="gspb-buttonbox-text"><span class="gspb-buttonbox-title">Demo</span></span></span></a></div>
<!-- /wp:greenshift-blocks/buttonbox -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="preparations-in-spline3d">Preparations in Spline3d</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There are some essential options in the app for preparing files for use on the web. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The first important option is AutoZoom and responsive. Usually, it would be best if you kept them ON</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4977,"width":413,"height":521,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/07/[email protected]" alt="" class="wp-image-4977" width="413" height="521"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Second. When you click on export, visit also Play settings. If you plan to make animations via block instead of animations on model, you need to disable some events, for example, Pan and Zoom, this will keep only scroll and will remove accidental shifting of model when you scroll page</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4978,"width":610,"height":820,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/07/[email protected]" alt="" class="wp-image-4978" width="610" height="820"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Next. If you update your model, You need to click on Update Code Export button, otherwise, model will use old data on your site.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="performance">Performance</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>For better speed, it's not recommended to load more than 1-2 models on page. Anyway, block has special Smart Loading feature that can delay library and model loading. This will save your web vitals because 3d libraries are very heavy. </p>
<!-- /wp:paragraph -->

<!-- wp:video {"id":4984} -->
<figure class="wp-block-video"><video controls src="https://greenshiftwp.com/wp-content/uploads/2024/07/speed.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="for-developers">For developers</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you copy Model ID from block, you can use it for making more advanced setup, because this ID will register global variable where Scene is saved. So, you can use any Spline Runtime functions to modify scene further.</p>
<!-- /wp:paragraph -->
«
»