Responsive 3D Webdesign

Learn how to easily create 3D websites that are responsive on any screen with Needle Engine and three.js

Needle Engine offers several building blocks to make building responsive 3d websites easy. Learn how to use and combine Focus Rect and ViewBox features:

Focus Rect

Use the Needle Engine focus rect feature to adjust the center of your 3D scene using CSS. This is the basic building block for responsive layouts. It can be enabled with one line of code and no changes to your scene are required.

Video Tutorial

How to use the Focus Rect

Set the element to focus on by querying an HTML element on your website. You then set this element using the setCameraFocusRect(<element>) method.

For example using the onStart hook in your Needle Engine code (e.g., in main.ts) to query the element and pass it to Needle Engine.

import "@needle-tools/engine";
import {onStart} from "@needle-tools/engine";

onStart((ctx)=>{
    const div = document.querySelector(".focus_rect");
    if(div){
        ctx.setCameraFocusRect(div);
    }
})

View needle-engine attributes for more

Focus Rect Samples

Demo Webpage Sword and Shield

Demo Webpage Bike

ViewBox

The ViewBox can be used to automatically fit a certain box area into the camera view - no matter your screen size or aspect ratio.

This is useful for example to frame a character or object in the center of the screen and ensure it is always fully visible. The Viewbox can also be animated or scaled to create zoom effects or to adjust the visible area.

ViewBox Video

Links to Samples

Example on needle.run

Scrollytelling Demo using animated Viewbox

Example on Stackblitz