Responsive 3D Webdesign
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
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.