Estoy tratando de mostrar una escena de tres js dentro de div anidado. Incluso cambiando el tamaño del renderizador, el lienzo sigue ocupando demasiado espacio.
Inicializando renderizador:
// 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)El lienzo que contiene la escena (en el div 'buildingDispplay') tiene un tamaño que llena todo el div principal.
Estructura div 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;"> <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>tal vez intente limitar el tamaño de su contenedor de lienzo con píxeles/valores fijos.
Al final conseguí que funcionara así:
Renderizador en archivo JS:
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>