How to insert ThreeJS scene into DIV

Questions
,
1

Can you help me find answer? How to insert scene into div block on the html page?

I created tag canvas and placed in this tag my script, but my code like a example was creating new scene on the full height and width of screen below my div.

Страница 
	<!-- Подключаем библиотеки 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>
1 Like
2

You should place <script src="js/scene.js"></script> into the <head> tag. Inside your JavaScript, do something like this:

// get a reference to your canvas container

const container = document.getElementById( 'CanvasFrame' );

// create your renderer

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

// apply the internal canvas of the renderer to the DOM

container.appendChild( renderer.domElement );
2 Likes
3

Ok, but if I place into the tag the threejs.min.js cannot get size of my div.

I did your proposed idea.

4

Why did you use thr const for variable?

5

Sry, i don’t understand your issue. Which <div> element do you refer to?

BTW: You can also check the three.js examples to see how the canvas element is appended to the DOM.

E.g.: three.js examples

It’s just ES6 syntax. You can also use var.

6

Thanks! I found my mistake! =)

7

thanks @Mugen87. This helped me right before my brain was about to explode : )