With my very basic knowledge of JS I finally managed to successfully embed a 3d object partially based on this awesome CodePen:
https://codepen.io/ricardoolivaalonso/pen/poYEpwP
Here is the example project: Three JS.zip (2.2 MB)
As of now the canvas has a fixed size but in the future I want to explore wrapping the canvas in a flex container for more responsiveness. Or maybe there is a way not to define the size of the render and make it always take the full width and height of a custom container.
You do have flexible layout pins turned on for the element, so all you would need to do is check the scale boxes in the scene size setting to allow the document to change its size:
Presently you have Head HTML code that is making the canvas size take up the full size of the Hype element:
#loader {
...
width: 100%;
height: 100%;
If you want it to be something else, you could define those width/height sizes in another metric, like px.
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.
Thanks for the writeup on how you got it all working! It looks pretty great - I definitely think this presentation is much more useful than anything static/2D for sure.
Had a little play to make the cards into symbols.
This can be refined further to individualise further using the Additional Html attributes.
But for now I just use them to determine the .glb file to load into the symbol.
We give a symbol the file name as the value for data-glb in the attributes.
With some changes to the css and js and structure.
We do not use any innerHTML code directly.
We mirror the div structure you had using groups and give them the appropriate classes.
Inside the third dic/group (object-3d d-flex) we add an oval and give it a class name of canvas
We add thyme text elements to the div/group ( card-3d-body )
The text elements get their appropriate class names.
The canvas is loaded into the oval / canvas element via the loadObject() function which is now called on symbol load.
We do not query the document here, we query the symbol element for it;''s child elements using the class names.
This is how a canvas is created and then loaded.
function loadCanvas() {
var canvas = document.createElement('canvas');
div = element.querySelector(".canvas");
canvas.class = "webgl";
canvas.width= 300;
canvas.height= 300;
canvas.style.cursor="grab";
//canvas.style.position = "absolute";
div.appendChild(canvas)
return canvas
}
const loading = element.querySelector('#loader')
const canvas = loadCanvas() //document.querySelector('.webgl')
const scene = new THREE.Scene()
const textureLoader = new THREE.TextureLoader()
const sizes = {
width: canvas.width,
height: canvas.height
}
Just one final question to wrap up importing the THREE library into Hype as I made some changes to my previous approach and need some help.
So before, to use THREE in Hype I would just import the library with other add-ons using a script tag with source attribute in the head of the document with a URL to a CDN and that worked fine. That also meant that I could only use older versions of the library.
However, a while back Three library was changes and they are now recommending creating an import map to the latest version in their documentation:
I created an import map within the head of the document but don't know where would be a good place to put the import declarations. I included them in the function that loads the model but it does not work.
I'm not an expert on modules/imports, but was able to get it working with the following steps:
make the importmap script the top item in the head html
add a new script just below that of type "module" that has your imports (as imports I think only work from modules)
Add items from your module to the window object so they are globals
Modify your loadObject() function to remove the imports
Modify your loadObject() function to not use addons via the THREE object, as it is not possible to extend the THREE object. Instead just call the addons directly. (eg THREE.OrbitControls just becomes OrbitControls.)
Draco wa now? Sigh, my wish for Hype to one day just give everyone the ability to load 3d files compressed not compressed just simply select add and allow drag, keyframe as for now everything is just some sort of js injection, some code on top of code that needs to be added and its always a make it or break it of an experimentation.
Like @Jonathan , I am not familiar with modules but had been looking at this and got it to the point of no errors but still could not get it loading. I can see the last steps I need to do. Glad he got it working for you.
