three-css-layout

Three CSS Layout Overview TLDR - Three CSS Layout will fit any Object3D inside an animated . Demo1 — Demo2 — jsFiddle — Wiki Three CSS Layout aim to simplify the positioning, scaling and rotation of three.js objects relative to an HTML layout. Consists of two classes, the parent layout CSSLayout and its child objects CSSLayoutObject. The combination of these two classes allow you to take advantage of the HTML structure and emulate CSS responsiveness, transitions, keyframe animations and scroll inside a three.js environment. Getting Started Installation You can include three-css-layout in your project by installing it using npm: Usage Initialize the parent CSSLayout: Create your CSSLayoutObject child objects: Fit Camera or Plane: Fit on window resize For a 3D responsive design Fit in the animation loop\ If you have a css animation or transitions, you can cam update the CSSLayout child objects in the animation loop. Limitation Three CSS Layout has the following considerations for optimal performance: Animation Constraints: The library may encounter limitations when handling CSS animations involving the transform property combined with other CSS properties.