Get a professional website for $99 per month. One week turnaround.

Pass URL Parameters to a 3D Scene

Home 3D 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:

Remix 3D Spline Scene:


  • 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 '';

  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(;
    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
    .then(() => {
      const firstNameValue = getFirstNameFromURL();
      spline.setVariable('wickydesign', firstNameValue);

*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