All of the suggested solutions work but here is what I decided to do in the end as I think there are some good practice lessons on displaying 3d objects to be learned here.
The canvas element needs to have an explicit size in units either in the JS or as attributes within the element. You can then apply additional CSS properties on the contained in which your canvas is wrapped but I think the best option is to have a fixed aspect ratio of the canvas especially if you enable zooming on the object to avoid clipping. If the height and width are not the same and one is significantly smaller than the other, then your object will be clipped especially when zoomed.
Using the flexible layout options within Hype of the canvas element works but in this project I wanted the object to be part of a Bootstrap Card.
This is what I did in the end. I used a Flexbox container within the card and had the object along with text displayed in a row. Then I used custom '.col' classes on the flex children so that when the card container becomes a bit tight the row changes into a column and the object is moved above the text.
Here is the final version. Hope you like it!
ThreeJS Final.zip (2.6 MB)
And here is the complete source code:
https://codepen.io/grzegorz-rogala/pen/KKYgveb
Obviously and suggestions, tweaks and improvements are welcome. I;m really glad I managed to get ThreeJS going within Hype!
Credits:
ThreeJS code based on the amazing work of Ricardo Olivia Alonso:
https://codepen.io/ricardoolivaalonso
3d model by Stratovarius1980 on Sketchfab
https://sketchfab.com/3d-models/ancient-greek-helmet-2841e71562f643a6ac9cd7290bb68c8a
Thanks folks!