You can "lock" your scene from interaction like Rotate, Pan and Zoom before exporting by selecting "No" for all these options.
Illustrate your websites with interactive 3D scenes without the need to write code.
- Before exporting make sure to compose your scene how you want it to look when it loads. Use frame mode and the frame guides to help you compose your scene.
- Press Export on the toolbar, select "Public URL" from the Type dropdown and click Export.
- Copy the "Embed" link that starts with an iframe. It looks like this 👇
- On Webflow, click on the “+” icon on the top left to add an Embed Component. Simply drag and drop the Embed Component inside your container. The container would most likely be a div.
- Paste the iframe code inside Webflow's HTML Embed Code Editor that showed up and Save.
- Change the width and height of your container to display your scene at your desired size.
- Publish your website to see your scene live and play around with it.
<iframe src='https://my.spline.design/characterbunny-d30b2f8b151dc0f1a12829ea09489efc/' frameborder='0' width='100%' height='100%'></iframe>Updating your scene
- If you update your scene on Spline, make sure you press the ‘Update’ button in the Export panel.
- Webflow’s app won’t update your scene in the web builder, make sure you do it manually by editing your Embed and removing the iframe code, exit the edit mode, then add the code back. This way your scene will be updated in Webflow as well.
