How can I make responsive container

Questions
1

I display an FBX animation in a container 800px / 600px, located in the upper left corner.

indent preformatted text by 4 spaces

 #container {
   background: #ffffff;
   border:4px solid black;
   margin: 0 auto;
   max-height: 600px;
   max-width: 800px;
   width: 93%;
   height: 60%;
   margin-top:10px;
   margin-left:10px;								
}

  /////////////////////////////

  var clock = new THREE.Clock();
  var currentArray = -1;
  var mixer, skeletonHelper, helper, helper1;	
  var mesh, container, controls, head, sound;
  var result;

 // Darstellung in einem Container
  var container = document.getElementById( 'container' ); 	

 // Load the background texture		
  var backgroundTex = new THREE.TextureLoader().load('./three/models/textures/background/Büro_2.jpg' );        
  var backgroundMesh = new THREE.Mesh(
  new THREE.PlaneGeometry(2, 2, 0),
  new THREE.MeshBasicMaterial({
  map: backgroundTex
 }));        

 // Create your background scene
  var backgroundScene = new THREE.Scene();
  var backgroundCamera = new THREE.Camera();

 // Load 3DScene
  var scene = new THREE.Scene();
   scene.background = backgroundTex;

// load Kamera Perspektive
  var camera = new THREE.PerspectiveCamera( 1, window.innerWidth / window.innerHeight, 1, 10000 );
   camera.position.x = 300;		        // Kamera näher ran, weiter weg 2670
   camera.position.y = 015;			// Kamera hoch + und runter -   050
   camera.position.z = 040;			// Kamera links und rechts	 030
   camera.target = new THREE.Vector3( 0, 0, 0 );     

 // Load Render  
   renderer = new THREE.WebGLRenderer({ alpha: false });
   renderer.setClearColor( 0x000000 );
   renderer.setPixelRatio( window.devicePixelRatio );
   renderer.setSize(800, 600);	
   //renderer.setSize( window.innerWidth, window.innerHeight );
   container.appendChild( renderer.domElement );

Something like this, it works, but it is certainly not perfect.

// Load Renderer   
renderer = new THREE.WebGLRenderer({ alpha: false });		
renderer.setSize(window.innerWidth * 0.43, window.innerHeight * 0.63);	
container.appendChild( renderer.domElement );

function resize() {		
renderer.setSize(window.innerWidth * 0.96, window.innerHeight * 0.50);
camera.aspect = w / h;		
camera.updateProjectionMatrix();
};
window.addEventListener("resize", resize);
2

I would use the container to set the renderer and camera. Something like this:

const container = document.querySelector('#container');

renderer = new THREE.WebGLRenderer({ alpha: false });		
renderer.setSize(container.clientWidth, container.clientHeight);	
container.appendChild( renderer.domElement );

function resize() {		
   renderer.setSize(container.clientWidth, container.clientHeight);
   camera.aspect = container.clientWidth / container.clientHeight;		
   camera.updateProjectionMatrix();
};
window.addEventListener("resize", resize);
1 Like
3

Thank you, now it works!