3D axisHelper dans un DIV indépendant mais axisHelper dépendant de la scène principale

Bonjour à tous,

Je n'en suit qu'un débutant en javascript et un copain m'a demandé un coup de main pour un travail qui dépasse mes compétences.

J'utilise la librairie THREE pour réaliser un projet 3D en HTML avec la suite POTREE.

J'ai donc une scène principale avec mon animation.
J'ai ajouté un DIV afin d'y mettre dedans un axisHelper qui soit orienté en fonction de la scène principale.
Ce que j'aimerais c'est que mon axisHelper pivote sur lui même en fonction de la rotation de la scène principale (pour cela, j'y arrive).
Toutefois, j'aimerais que ce axisHelper reste à l'intérieur de mon DIV.
Actuellement, il pivote autour d'un axe qui m'échappe.

Mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
setAxis(sceneG){
		// DIV des axes XYZ
		var container = $("#potree_map_axis");
		// Dimensions du DIV
		var w = container.width();
		var h = container.height();
		// Nouvelle scène
		var scene = new THREE.Scene();	
		// Nouveaux axes YYZ
		var axisHelper = new THREE.AxisHelper(1000);
		// Couleur de fond
		var bg = '#000000';
		// Nouvelle camera
	        var camera = new THREE.PerspectiveCamera(75, 1, 1, 10000);
	        // La caméra récupère la position de la caméra de la scène générale
		camera.position.copy(sceneG.cameraP.position);
		// La caméra récupère la rotation de la caméra de la scène générale
		camera.rotation.copy(sceneG.cameraP.rotation);
	        // La camera vise les axes XYZ
	        camera.lookAt(axisHelper.position);
		// Création du rendu de la scène
	        var renderer = new THREE.WebGLRenderer({antialias: true});
		// Couleur de fond
	       renderer.setClearColor(bg);
		// Dimensions du rendu de scène
	        renderer.setSize(w, h);
		// Ajoute les axes XYZ à la scène
		scene.add(axisHelper);
		// Ajoute la caméra à la scène
		scene.add(camera);
		// Injecte le tout dans le DIV
		container.append(renderer.domElement);
 
		// Rotation des axes XYZ en fonction de la rotation de la scène principale
		function animate() {
		  requestAnimationFrame(animate);
		  camera.rotation.copy(sceneG.cameraP.rotation);
		  render();
		}
 
		// Actualise le rendu
		function render() {
			renderer.render(scene, camera);
		}
 
		animate();
	};

Merci beaucoup de votre aide