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>