I have successfully created a 3D model with Zdog that dynamically resizes based on the screen size. The model includes a dome and brim, which rotate smoothly as intended. Here is the code snippet:
const TAU = Zdog.TAU;
let hat = new Zdog.Illustration({
element: '.zdog-canvas',
dragRotate: true,
rotate: {x: TAU/4, z: TAU/-6},
translate: {y: 20},
zoom: 4,
onResize: function( width ){
this.zoom = width / 300;
}
});
var dome = new Zdog.Hemisphere({
addTo: hat,
diameter: 80,
stroke: 20,
color: 'blue',
fill: true,
});
var brim = new Zdog.Ellipse({
addTo: dome,
width: 95,
height: 73,
quarters: 2,
stroke: 20,
translate: {y: 34},
rotate: {z: TAU/4},
fill: true,
color: 'blue'
});
function animate() {
hat.rotate.z += 0.03;
hat.updateRenderGraph();
// animate next frame
requestAnimationFrame( animate );
}
animate();body{
margin: 0;
}
.myDiv{
height: 100%;
min-height: 100%;
margin: 0;
}
.zdog-canvas {
display: block;
position: absolute;
height: 100%;
background: #FDB;
cursor: move;
}<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<html>
<body>
<div>
<div class='myDiv'>
<canvas class="zdog-canvas" width="800" height="500"/>
</div>
</div>
</body>
</html>However, when I attempt to place this 3D model inside a list item, it overflows beyond the screen height instead of scaling properly. My objective is to embed the 3D model within a list item alongside text content. How can I adjust my code to ensure that the model scales relative to the height of the list item?
const TAU = Zdog.TAU;
let hat = new Zdog.Illustration({
element: '.zdog-canvas',
dragRotate: true,
rotate: {x: TAU/4, z: TAU/-6},
translate: {y: 20},
zoom: 4,
onResize: function( width ){
this.zoom = width / 300;
}
});
var dome = new Zdog.Hemisphere({
addTo: hat,
diameter: 80,
stroke: 20,
color: 'blue',
fill: true,
});
var brim = new Zdog.Ellipse({
addTo: dome,
width: 95,
height: 73,
quarters: 2,
stroke: 20,
translate: {y: 34},
rotate: {z: TAU/4},
fill: true,
color: 'blue'
});
function animate() {
hat.rotate.z += 0.03;
hat.updateRenderGraph();
// animate next frame
requestAnimationFrame( animate );
}
animate();body{
margin: 0;
}
.myIcon{
height: 100%;
min-height: 100%;
margin: 0;
}
.zdog-canvas {
display: block;
position: absolute;
height: 100%;
background: #FDB;
cursor: move;
}
li{
width: 100%;
height: 20vh;
background: red;
color: black;
}<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<html>
<body>
<div>
<ul>
<li>
<div class='flexbox-container'>
<div class='myIcon'>
<canvas class="zdog-canvas" width="800" height="500" />
</div>
<h1>some text</h1>
</div>
<div class='flexbox-container'>
<div class='myIcon'>
<canvas class="zdog-canvas" width="800" height="500" />
</div>
<h1>some text</h1>
</div>
</li>
</ul>
</div>
</body>
</html>