Responsive 3D Webdesign
Focus Rect
The main purpose of FocusRect is to make your website responsive and ensure the 3D element is always adjusting to the available space. The 3D content moves dynamic with your existing HTML layout.
How to use Focus Rect
Set the element you like to focus on simply by querying an HTML element on your website. You then set this element using the method: context.setCameraFocusRect(<element>).
For example onStart hook in your Needle Engine code (e.g., in main.ts) to query the FocusRect element and pass it to the camera.
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
Links to Samples
Video Tutorial
This tutorial shows the Focus Rect workflow in action:
ViewBox
ViewBox can be used to automatically fit a certain box area into the camera view - no matter your screen size or aspect ratio.
This component 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. You can also animate or scale the viewbox to create zoom or framing effects.