Clone Project

Mysterious

Emerald

Getting

Started

1

Design your 3d model on KenShape
Buy KenShape
Design tool interface of KenShape

2

Export on . glTF
Export options of KenShape

3

Add ".txt" to your 3D model file. Then Webflow will accept this asset

5

Create an Embed component
Embed component on Webflow

6

Copy/Paste the code below in your embed component
More info about <model-viewer> here

<model-viewer

alt="Emerald"
style="width: 250px; height: 250px; --progress-bar-height:0px;"
poster="https://cdn.prod.website-files.com/60394dad40371540364a3869/603d2d5036ee410199573c2d_animation_200_klqw93wd.gif"
background-color
preload
reveal-when-loaded
disable-zoom
camera-controls
src="https://cdn.prod.website-files.com/60394dad40371540364a3869/603d07d4f88dcc4b645a0e29_emeraude.glb.txt"

></model-viewer>

<!-- Optional, for Safari support -->

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

<!-- The model-viewer custom element -->
‍
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>

4

Add your 3D model file to Webflow assets, and copy link asset to clipboard
Copy to clipboard the 3D model asset

7

Replace this link in the embed component by the link that you copied

src="https://cdn.prod.website-files.com/60394dad40371540364a3869/603d07d4f88dcc4b645a0e29_emeraude.glb.txt"

8

(Optional)
Add this line code to add scroll based animation to your 3D model

camera-orbit="calc(10rad * env(window-scroll-y)) 90deg"

Enjoy the

3D power !

Designed by
Discover