Discussion :

[yonochi]

Bonjour à tous, j'utilise actuellement la librairie Three.js pour faire des affichages de fichiers mais le mode de déplacement ne convient (du moins une partie), j'utilise le contrôleur TrackballControls.js mais la partie panCamera n'est pas optimale, je voulais faire en sorte que le centre de l'objet reste toujours le cente de rotation mais il est modifié à chaque fois qu'on fait un pan. J'espère que c'est possible

Voici la partie panCamera :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
this.panCamera = (function(){
 
		var mouseChange = new THREE.Vector2(),
			objectUp = new THREE.Vector3(),
			pan = new THREE.Vector3();
 
		return function () {
 
			mouseChange.copy( _panEnd ).sub( _panStart );
 
			if ( mouseChange.lengthSq() ) {
 
				mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
 
				pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
				pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );
 
				_this.object.position.add( pan );
				_this.target.add( pan );
 
				if ( _this.staticMoving ) {
 
					_panStart.copy( _panEnd );
 
				} else {
 
					_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
 
				}
 
			}
		}
 
	}());

[p3ga5e]

Tout l’intérêt d’une scène graphe réside dans le fait de pouvoir exprimer une entité 3D dans le repère d’une autre entité par une hiérarchisation matriciel !

Comme tu sembles être novice (sans vouloir te vexer) avec la 3D, je vais tenter de t’expliquer le concept de scène graph

Par exemple un verre est posé sur une table, il est alors attaché en que fils de Table, si le perso déplace la table le verre se déplacera automatiquement avec...
ensuite si le perso attrape le verre dans çà main, pour que le verre suive les mouvements du perso, il suffit de détacher l’entité verre de table pour l’attacher, en tant que fils, a l’entité poignée du perso , lui-même attaché à l’entité coude , et ainsi de suite le long du squelette du perso.
Si tu désires obtenir une vue à la troisième personne, tu as juste a attaché ta camera en tant que fils de l’entité perso, la propriété position devient alors le vecteur d’offset par rapport à la position du personnage :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 camera.position = new THREE.Vector3( 0, 5, -10 );

place la camera dans le dos du perso a une distance de 10 et a une hauteur de 5.

Voilà si tu maîtrise ton arbre de matrices de ta scène 3D, tu maîtriseras, alors, le rendu !
Juste quelques rappels et conseils pour finir:

• Le systeme de calcule matriciel n’est pas commutatif A * B != B * A, si tu pan avant de tiller tu n’obtiendras pas le même changement de repère que si tu tilt et ensuite tu pan !
• Les entités 3D ( proto Object3D ), par défaut, recompose la matrice 4x4 à partir des 3 angles d’Euler composant la propriété rotation ,et cela en utilisant la propriété eulerOrder, qui par défaut est égale a "XYZ" , il est préférable, pour éviter les surprise, d’utiliser l’ordre "YXZ", pour effectuer dans l’ordre : le pan (axe Y) , le tilt (axe X) et en dernier le roll (axe Z) , sinon y aussi les quaternions, a la places des angles, par les propriétés quaternion et useQuaternion.
• N’hésite pas à créer des point de pivot dans ton scène graph pour t’aider à la manipulation, en instanciant directement le proto Obect3D.

Voilou bonne chance pour ton applis 3D !

[yonochi]

Bonjour,

J'ai dû mal m'exprimer, en fait au départ l'image est centré sur le centre de l'objet et donc la rotation se fait autour de ce point mais lorsque je fais un pan, donc une translation, la camera reprend comme axe de rotation le centre de l'écran et non le centre de mon objet, j'aimerais donc pouvoir copier les coordonnées du centre de l'objet au lancement de la page web et ensuite faire en sorte que toutes les rotations se fasse autour de cette axe et pas autour du centre de l'écran.

J'ai essayé lookAt, pushMatrix, popMatrix, modifier les targets de TrackballControls.js mais sans succès