I am trying to display a threejs scene inside nested div. Even changing renderer size, I keep having the canvas occupy too much space.
Initializing renderer:
// Init renderer
renderer = new THREE.WebGLRenderer({
antialias: true,
// canvas: document.getElementById("buildingDisplay")
})
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(document.getElementById("buildingDisplay").getBoundingClientRect().width,
document.getElementById("buildingDisplay").getBoundingClientRect().height)
document.getElementById("buildingDisplay").appendChild(renderer.domElement)
The canvas containing the scene (in the 'buildingDispplay' div) has a size that fills the whole parent div.
HTML div structure:
<div id="parent" style="display:flex; width: 100%; height: 100%;">
<div id="blastMapID" style="height: 100%;">
<button type="button" id="expTA" style="margin-top: 100px;"><strong>LoadTargetArea</strong></button>
</div>
<div id="buildingDetails" style="display:none; width: 100%; height: 100%; border:1px solid black;">
<button id="closeDiv">Close</button>
<div id="buildingDisplay" style="width: 100%; height: 60%; background-color: rgb(187, 187, 187);">
<!-- <canvas id="renderCanvas" style="width: 100%; height: 100%;"></canvas> -->
</div>
<div id="statsDisplay" style="width: 100%; height: 40%; background-color: rgb(255, 255, 255);"></div>
</div>
</div>
maybe try to limit the size of your canvas container with fixed pixels/value.
In the end I managed to make it work like this:
Renderer in JS file:
renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: document.getElementById("renderCanvas")
})
HTML:
<div id="parent" style="display:flex; width: 100%; height: 100%;">
<div id="blastMapID" style="height: 100%;">
<button type="button" id="expTA" style="margin-top: 100px;"><strong>LoadTargetArea</strong></button>
</div>
<div id="buildingDetails" style="display:none; width: 100%; height: 100%; border:1px solid black;">
<div id="buildingDisplay" style="max-width: 100%; max-height: 60%; background-color: rgb(255, 255, 255);">
<canvas id="renderCanvas" style="max-width: 100%; max-height:600px;"></canvas>
<button id="closeDiv">Close</button>
</div>
<div id="statsDisplay" style="width: 100%; height: 200px; background-color: rgb(255, 255, 255);"></div>
</div>
</div>