In this Spline tutorial I will show you how to use variables to change the color of a 3D model from a website.
Spline Variables Doc:
https://docs.spline.design/d17e9b49f5284f19b309fce92af0d011
Timestamps:
- 0:00 Introduction
- 0:41 Create Spline Variables
- 2:34 Assign Variables to Material
- 4:26 HTML Code Explained
Spline Runtime Code:
https://www.npmjs.com/package/@splinetool/runtime?activeTab=readme
JavaScript Code
<canvas id="canvas3d"></canvas>
<script type="module">
import { Application } from 'https://unpkg.com/@splinetool/runtime@1.0.54/build/runtime.js';
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
spline.load('scene.splinecode')
.then(() => {
const button1 = document.getElementById('button1');
button1.addEventListener('click', () => {
spline.setVariables({ cream: 100, white: 0, black: 0, blue: 0, red: 0 });
});
const button2 = document.getElementById('button2');
button2.addEventListener('click', () => {
spline.setVariables({ cream: 0, white: 100, black: 0, blue: 0, red: 0 });
});
const button3 = document.getElementById('button3');
button3.addEventListener('click', () => {
spline.setVariables({ cream: 0, white: 0, black: 100, blue: 0, red: 0 });
});
const button4 = document.getElementById('button4');
button4.addEventListener('click', () => {
spline.setVariables({ cream: 0, white: 0, black: 0, blue: 100, red: 0 });
});
const button5 = document.getElementById('button5');
button5.addEventListener('click', () => {
spline.setVariables({ cream: 0, white: 0, black: 0, blue: 0, red: 100 });
});
});
</script>
