
Dec 2024
3D and HTML Project
By inserting HTML into your publication, you can:
Do anything that HTML allows, including executing JavaScript;
Insert 3D objects — interactively display interior design, architecture, and any 3D design;
Insert video and audio players — show the layout as a video instead of an image, insert without seams between images;
Insert images from an external source via a link — save on traffic, use images directly from your Behance portfolio;
Insert a live demo of your interface so that visitors can interact with it without leaving the page;
Insert interactive maps and graphs;
Insert complex markup and typography, use CSS grids.
To insert 3D, you can use:
Frameworks such as modelviewer.dev from Google or tinyglb.com, which allow you to show models without third-party logos;
Hosting services such as sketchfab.com;
Editors such as spline.design;
It is not a standard feature of CMS Framer. By default, you cannot insert HTML, so I solved this by adding a field to each part for inserting HTML code
There are 16 preset parts in every post, each with a field for regular CMS Framer content and for HTML code in that section. If you need to alternate between regular content and HTML without headers, that's no problem, you can do that too.
In the example below, Spline is not static 3D; you can click and rotate the space when it loads.
Next, I use Sketchfab. Inserting 3D requires the correct style settings.
To make the height of the 3D sections equal to the height of the user's screen, I used vh (viewport height) units of measurement, which allow you to make the height of the section equal to the height of the screen in the browser. For Sketchfab, it looks like this:
<div class="sketchfab-embed-wrapper" style="width:100%;height:100vh;" >and in the child iframe like this:<iframe width="100%" height="100%" style="min-height:100vh;" …. Accordingly, for Spline, it looks like this:<spline-viewer loading-anim-type="spinner-small-dark" style="width: 100%; height: 100vh;" url="https://prod.spline.design/vzIE9fhEUXWY9Dpd/scene.splinecode">Sometimes, when receiving code for insertion, you need to select settings so that the inserted code does not block the page scroll. For example, this needs to be done when inserting Spline code.
This is an interesting way to show interior design.
Since we have access to all HTML layout capabilities, we can assemble any compositions from 3D frames. For example, here I place all frames in a row: <div style="display:flex; width:100%; height: 30vh"><div class="sketchfab-embed-wrapper" style="width:33.3%;height:100%;min-height: 30vh;">
Example of HTML5 video in 4K resolution. Controls are disabled, the video starts automatically and plays in a loop, but may slow down due to the high resolution.
You can insert images or video from an external source via a link by html, save on traffic. For example, you can use images directly from your Behance portfolio using links to the Behance server. It's easy with: <img src="LINK" width="100%">






