Responsive
HTML&Three.js
Scenes
Seamlessly integrate Three.js into your document flow
Unlock the power of CanvasPortal to blend immersive 3D content with standard HTML layouts. By leveraging a single GlobalCanvas, all scenes are rendered through a shared WebGL context, ensuring optimal performance and resource efficiency while maintaining pixel-perfect responsiveness and GSAP-driven scroll animations.
Responsive
Scenes
Use CanvasPortal to render Three.js scenes directly within your HTML layout. 3D elements respect the document flow, making them natively responsive and easy to position using standard layout tools like Tailwind CSS.
Orchestrate animations with GSAP ScrollTrigger by linking 3D properties to DOM events. In this example, the sphere's scale and color are driven by its container's scroll position.
Interactive
Viewports
Each CanvasPortal can be configured with its own camera, lighting, and environment settings. Enable orbitControls to allow users to interactively explore 3D models within the flow of your article or landing page.
The bounds property automatically centers and scales your 3D content to fit its DOM container, ensuring pixel-perfect alignment across different screen sizes.