I've been attempting to embed a 3D model viewer in a responsive layout along with other content like text. Initially, I used window.innerWidth and window.innerHeight for setting the renderer size, but later switched to .clientWidth and .clientHeight to control it with CSS. However, the rendering does not seem to work correctly.
This website was quite helpful:
<!DOCTYPE html>
<html>
<head>
<title>threejs - basic</title>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
canvas{
display: inline-block;
background: red;
width: 40%;
height: 40%;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<canvas>
<p>hi</p>
</canvas>
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas"></canvas>
<canvas id="myCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.js"></script>
<script >
var renderer,
scene,
camera,
myCanvas = document.getElementById('myCanvas');
...
...
};
</script>
</body>
</html>