Pass URL Parameters to a 3D Scene

April 2, 2024

In this Spline tutorial I will show you a really cool way for a user to submit their first name and be redirected to a fun 3D Spline scene which has their name being displayed in 3D.

To follow this tutorial you will need Elementor Pro and Spline.

But if you don’t have Elementor Pro you can still take my code and use it on your own platform.

Get Elementor Pro:
https://wickydesign.com/get-elementor

Remix 3D Spline Scene:
https://community.spline.design/file/8dff84b4-30c9-4bf5-ac8b-d26bfea9d21f

Timestamps:

  • 0:00 Introduction
  • 0:51 Set Up Spline Scene
  • 2:49 Add HTML Code to Website
  • 6:24 Create Form Redirect
  • 8:44 Testing

 

JavaScript Code

				
					<canvas id="canvas3d"></canvas>
<script type="module">
  import { Application } from 'https://unpkg.com/@splinetool/runtime@1.0.55/build/runtime.js';

  const canvas = document.getElementById('canvas3d');
  const spline = new Application(canvas);

  // Function to get the value of the 'firstname' parameter from the URL
  function getFirstNameFromURL() {
    const queryParams = new URLSearchParams(window.location.search);
    return queryParams.get('firstname') || 'First Name'; // Provide a default value if 'firstname' is not found
  }

  // Load the Spline scene and then set the variable based on the URL parameter
  spline.load('scene.splinecode')
    .then(() => {
      const firstNameValue = getFirstNameFromURL();
      spline.setVariable('wickydesign', firstNameValue);
    });
</script>
				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources

Join Our Community

Wicky Design YouTube

Get our latest videos by subscribing for FREE to our YouTube channel. New videos are uploaded weekly!