3D Models & Scenes

Richard Bruskowski

3D Models & Scenes

Caution: The latest updates introduce some breaking changes. Only update if you are happy with doing some adjustments on your existing work. This package is still quite experimental.

This package places a 3D model or 3D scene in your layout and allows you to interact with it:

  • Control the camera
  • Rotate the model
  • Hover the model to let it grow
  • Link to other Frames

You can also build scenes or add lights by linking several components:

  • Place a ThreeScene component on the canvas and link one or more Three Model Viewer components to it.
  • Add spot lights by placing the ThreeLight components on the canvas and linking it to ThreeModelViewer or ThreeScene components.

Demo-File: https://framer.com/projects/3D-Scene-Example-uR4cWEjFhvKPjQsUlCvv

The models and scenes won’t show up on the canvas, it only works in Preview and HTML exports. On the canvas you get a preview which helps with positioning. You can switch the perspective of the preview between top, front and side view.

Only the included bird example models are animated, they are borrowed from the Three Project.

Supported file formats are *.gltf/*.glb and *.obj. Use *.gltf/*.glb if you also want to import the materials and textures of your model. You can use the file picker to import your file or host it somewhere and link to it.

If your own models don’t show up and no loading indicator is visible either, check if your model is super tiny or massively huge. You can find out by zooming in the preview and then adjusting the scale with property controls.

Overrides

You can set a couple of basic properties of the 3D Model through Overrides. Be aware that the onFrameUpdate function is run on every Frame (so ~60 times per second), probably best to avoid doing heavy computing here for performance reasons. Currently only works with the Three Model Viewer but not when using the Three Scene.

export function ThreeDModelViewer(): Override {
    return {
        onFrameUpdate: ({ state, scale, rotation, position }) => {
            return {
                scale: {
                    x: scale.x + (state.isHovered ? 0.01 : 0),
                    y: scale.y + (state.isHovered ? 0.01 : 0),
                    z: scale.z + (state.isHovered ? 0.01 : 0),
                },
                rotation: {
                    x: rotation.x,
                    y: rotation.y + (state.isHovered ? 0.05 : 0),
                    z: rotation.z,
                },
                position: position,
            }
        },
    }
}

Changelog

Version Description
1.20.0 Update Readme.
1.19.0 Add ability to compose scenes from several objects.
1.18.0 Clean up Property Controls
1.17.0 Slightly better handling of exceptions/missing props
1.16.0 Improve stability
1.9.0 … 1.15.0 File Picker Debugging / CORS issue
1.8.0 Remove outline on focus in Chrome
1.7.0 Stability fixes/improve error handling
1.6.0 Add prop for Override + prop for disabling default hover effect
1.5.0 Adjust opacity –> light intensity translation
1.4.0 Update description + defaults
1.3.0 Test File Picker
1.2.0 Fix URLs
1.1.0 Add URL option for files
1.0.0 Initial release for testing

Additional Information

Under the hood the package uses react-three-fiber by Paul Henschel.

Inspired by Framer Form for Framer Classic by Emil Widlund. You might also want to give Steve Ruizok‘s Easy Three Package a try. It offers far more customizability through code overrides.

If your looking for 3D models to try this package, this is a good starting point: glTF Sample Models

Alternatively you can compose 3D scenes in Vectary and embed them as an iFrame with this package: Vectary 3D Viewer

Get In Touch

bruskowski.design
You can hire me for design and prototyping.
Twitter / richard.bruskowski@gmail.com

Logo