Как вывести окно с 3Д объектом созданным с помощью (three.js) в определённое место?

Question

[tokoronad]

Как сделать так что бы 3д модель была допустим на верху сайта, а не снизу как появляется обычно
JS:

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import Stats from 'three/addons/libs/stats.module.js';
import {  FBXLoader  }  from 'three/addons/loaders/FBXLoader.js';
THREE.ColorManagement.enabled = true;
let camera, scene, renderer, stats, model;
const clock = new THREE.Clock();
const canvasEl = document.querySelector('#canvas');
let mixer;
init();
animate();
function init() {
	const container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.set( 100, 200, 300 );

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xa0a0a0 );
	scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

	const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 1.5 );
	hemiLight.position.set( 0, 200, 0 );
	scene.add( hemiLight );

	const dirLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
	dirLight.position.set( 0, 200, 100 );
	dirLight.castShadow = true;
	dirLight.shadow.camera.top = 180;
	dirLight.shadow.camera.bottom = - 100;
	dirLight.shadow.camera.left = - 120;
	dirLight.shadow.camera.right = 120;
	scene.add( dirLight );

	const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
	mesh.rotation.x = - Math.PI / 2;
	mesh.receiveShadow = true;
	scene.add( mesh );

	const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
	grid.material.opacity = 0.2;
	grid.material.transparent = true;
	scene.add( grid );
				
	const loader = new FBXLoader ();
	loader.load( 'script/3dmodel/Flair.fbx', function ( FBX ) {
		mixer = new THREE.AnimationMixer( FBX );

		const action = mixer.clipAction( FBX.animations[0] );
		action.play();

		FBX.traverse( function ( child ) {

			if ( child.isMesh ) {

				child.castShadow = true;
				child.receiveShadow = true;

			}

		} );

		scene.add( FBX );

	} );

	renderer = new THREE.WebGLRenderer( { 
		canvas: canvasEl,
		antialias: true 
	
	} );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.outputEncoding = THREE.sRGBEncoding;
	renderer.shadowMap.enabled = true;
	container.appendChild( renderer.domElement );

	const controls = new OrbitControls( camera, renderer.domElement );
	controls.target.set( 0, 100, 0 );
	controls.update();

	window.addEventListener( 'resize', onWindowResize );

	stats = new Stats();
	container.appendChild( stats.dom );
	function onWindowResize() {

		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();

		renderer.setSize( window.innerWidth, window.innerHeight );

	}

}
function animate() {
	requestAnimationFrame( animate );
	const delta = clock.getDelta();
	if ( mixer ) mixer.update( delta );
	renderer.render( scene, camera );
	stats.update();
}

Comments

[Александр Павлюк]

Поместите ваш канвас в то место страницы, где хотите видеть модель и все.

[ProjectSoft]

function init() {
  const container = document.createElement( 'div' );
  document.body.appendChild( container );

Вы же сами его вставляете вниз.
Осмыслите это