Some issue with scene

Questions
1

Hi to everyone!
I use this code, but have problem: I see scene into my div, but don’t see objects(cube). What wrong?
I just see only 1/3 on my div-block

function onResize(element, callback) {
	var height = element.clientHeight;
	var width  = element.clientWidth;
	
	return setInterval(function() {
            if (element.clientHeight != height || element.clientWidth != width) {
              height = element.clientHeight;
              width  = element.clientWidth;
              callback();
            }
        }, 500);
}

// Point to work with canvas
var canvas = document.getElementById('Scene3D');

// Scene
var scene = new THREE.Scene();
// Scene color
scene.background = new THREE.Color(0x3333ff);

// Render
var renderer = new THREE.WebGLRenderer( { canvas: Scene3D } );
canvas.height = canvas.clientHeight;
canvas.width = canvas.clientWidth;
renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);

// Camera
var camera = new THREE.PerspectiveCamera(75, canvas.clientWidth/canvas.clientHeight, 0.1, 1000);


// Scale set Viewport
onResize(canvas, function () {
	canvas.width  = canvas.clientWidth;
	canvas.height = canvas.clientHeight;
	renderer.setViewport(0, 0, canvas.clientWidth, canvas.clientHeight);
	camera.aspect = canvas.clientWidth / canvas.clientHeight;
	camera.updateProjectionMatrix();
});

// Make Geometry
//-------------------------------------------------------------------------------------------------------------
// Cube
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
// 2-Cube
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xFF00FF } );
var cube_2 = new THREE.Mesh( geometry, material );
// SphereGeometry
var geometry = new THREE.SphereGeometry( 2, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );

//Add Objects
scene.add( cube );
scene.add( sphere );
scene.add( cube_2 );

// Controls
var controls = new THREE.OrbitControls( camera );
// Set camera position
camera.position.z = 20;

var t,k;


// Animate Scene
function animate() {
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
			
	t += 0.02; // speed cube
	k += 0.05; // speed cube_2
						
	//Rotate cube
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.05;
			
	//Rotate cube_2
	cube.rotation.x += 0.03;
	cube.rotation.y += 0.06;
						
	
			
	// Rotate cube around sphere
	cube.position.x = 5*Math.cos(t) + 0;
	cube.position.y = 5*Math.sin(t) + 0; // These to strings make it work
	// Rotate cube_2 around sphere
	cube_2.position.x = 10*Math.cos(k) + 0;
	cube_2.position.z = 8*Math.sin(k) + 0; // These to strings make it work
											
	// Updating controls			
	controls.update();
			
	}
	
animate();

//document.body.appendChild( renderer.domElement );


and code of HTML Page 

<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>Страница</title>
		<meta charset="utf-8">
		<link rel="icon" type="image/x-icon" href="img/ico/3.png"> <!-- Установка иконки на вкладку в браузере -->
		<link rel="stylesheet" type="text/css" href="css/style.css"> <!-- Подключаем CSS-стили -->
		
		<!-- Подключаем библиотеки JS -->
		<script src="js/three.min.js"></script>
		<script src="js/OrbitControls.js"></script>
		<script src="js/OBJLoader.js"></script>
		<script src="js/stats.min.js"></script>
				
	</head>

	<body>
		<header>
			 <span id="Caption"> Система графического анализа информации <br> 
								 софт цуп: НДС ТР; АДС; ОДС 
			 </span>
		</header>
		
		<nav>
		Навигация по основным разделам и сценам
		</nav>
		
		<main>
			<section id="Control_Bar">
			Контрольная обасть
			</section>
			
			<section id="CanvasFrame">
				<!-- Вставляем здесь свой канвас для отрисовки сцены -->
				<canvas id="Scene3D" >
					<script src="js/scene.js"></script>   <!-- Здесь вставляем скрипт нашей 3д сцены -->
				</canvas>
				
			</section>
			
			<section id="Information_Bar">
			Информация по элементам на сцене
			</section>

		</main>
				
		<footer>
		Нижняя колнка с краткой информацией. Ссылаками на авторов и прочей дополнительой справочной информацией.
		</footer>
		
	</body>
</html>
2

I’ve cleaned up your code a little bit and created a simplified version here: https://jsfiddle.net/f2Lommf5/944/
I’ve also added some minor comments to give you some feedback. The problem was that your cubes were hidden inside the sphere.

To be honest, i can see at your code that you are doing certain basic things wrong (resizing the scene, setting the size of the renderer or the way you create geometries). I recommend to do some three.js tutorials (e.g. Creating a scene) or study the official examples so you better understand the basic elements of a scene.

3

So… about resizing the scene. I have a page that can be change by scale, and I need the resize the scene.
Your code work perfect, but don’t resize the scale of objects. This is not big problem for me… but impotart for portable device that can be use for my app. I don’t need full screen of my display. I need set size my scene equal of my div.

4

So i found the solve the problem.