Introducing Framer Form
Integrate 3D-graphics with your Framer prototype.
Editor’s note: We’ve made some big changes to Framer, and this article refers to a deprecated tool. Learn more about what Framer is today →
Introduction
It turns out that dealing with 3D on Web is a tricky task. There’s typically quite a bit of code to set up before you can draw anything on the screen. Concepts like Cameras, Field of View, Viewing Frustum, Rendering Loops, WebGLRenderers & Materials are not easy to grasp if you’ve never heard them before.
Now what if I told you that you could render 3D-models with the same simple syntax you usually write in Framer? Imagine something like this:
That’s exactly how simple it is with Framer Form. The code above imports a 3D-model from the specified path, adds it as a child to a scene, sets the X & Y position and finally delivers the model in the onLoad-method.
Framer Form takes care of all the boring, complicated things I mentioned above, so you don’t have to. All you have to care about is importing your beautiful models, adding some lights and you’re good to go.
Framer Form was built to expose a simple API for rendering 3D-graphics in Framer Prototypes
Getting Started
If you’re new to Framer, check out their 14 days free trial to follow along.
Installation
Framer Modules (Recommended)
The most convenient way to install Framer Form is to use an app called Framer Modules. It lets you find, install and manage several useful Framer Modules in an intuitive user interface. If you have Framer Modules installed, press this link to install and import Framer Form to your project
Make sure that your Framer Project is saved, otherwise Framer Modules won’t find your project.
Manually
If you rather want to install Framer Form manually, that’s possible. Download the Framer Form-repository from Github. Then just copy the “form.coffee”-file and the “form”-directory to the “modules”-folder in your Framer Project.
Submodules
Framer Form has a wide variety of submodules that you can import. Let’s dive a bit deeper and talk about what Framer Form offers in terms of features and possibilities.
Scene
A Scene is pretty much the brain that makes your models appear on the Screen. It has a camera that captures everything in front of it, and sends that to a WebGLRenderer. This camera can be adjusted, but more on that later.
The scene is basically a Framer Layer, so you could use it for capturing touch-events and use other common Layer-methods. It is also very easy to set up.
Animation Loop
A common technique when working with 3D-graphics is to use an Animation Loop (also known as an Update Loop or Update Function) to animate models. Scenes has an “animationLoop”-property that takes a function. This function will be executed once per frame. This means that if you print “Hello” in this function, that will execute 60 times per second.
Why is this useful? Well, if you want to rotate your model continuously, you can do it like this:
Camera
The camera captures the scene and feeds data into the renderer. You may access it and manipulate its properties via the camera-property on the Scene-class.
Orbit Controls
If you want the camera to orbit around your model upon click & drag, you can enable orbitControls in the Camera. Here’s an example:
The full Scene-documentation with all of the supported properties & methods can be found here.
Models & Lights
Models
A model is your 3D-object that you designed in your 3D-modelling software. It may include geometry, materials & animations. The model class does not extend the Framer Layer class, compared to the Scene class. But it offers similar functionality that you’re used to, like Animations & States.
Lights
Lights are used to illuminate the Scene and your Models. They do also support Animations and States, like Models does. Framer Form currently supports 6 different light-types. Point Lights, Spotlights, Ambient Lights, Hemisphere Lights, Directional Lights & Rectangle Area Lights.
If you want to read and learn more about these concepts, documentation about Models can be found here and Lights here.
Conclusion
Framer Form delivers a simple way to integrate 3D-graphics into your Framer Prototype and takes care of the boring, complicated setups, so you don’t need to. It supports common concepts like Animations & States and aims to deliver additional feature-sets in upcoming releases. It is still under development, and new exciting features are added every week.
If you want to read documentation, file an issue/bug or are just curious about the code behind the scenes, head over to the repository on Github.
Also, massive thanks to THREE.js which this module is heavily dependent on. More information about THREE.js can be found here.
For any questions, feature-requests or high fives, you’ll find me on Twitter. Thanks for your attention.
