[THREE JS] Squelette humain (sphères et cylindres)

Messages postés
234
Date d'inscription
dimanche 14 septembre 2014
Statut
Membre
Dernière intervention
1 septembre 2019
-
Bonjour,

Je travaille actuellement sur un projet Three.JS et je souhaite animer un squelette humanoide (sous forme de stickman :


Ci dessus le point où j'en suis (avec les articulations en jaunes et les membres en bleu) mon but est de pouvoir placer des articulations dans l'espace et faire placer automatiquement les membres par un script.

Actuellement :
- J'ai obtenu la longueur du cylindre
- Jai la position du cylindre

Mon problème :
Je dois trouver les angles (rad) A, B et C tel que les extrémités du cylindre soit placées aux même coordonnées que les points.

Mon script actuel :
var playerTool = {
 drawPoint: function(x, y, z) {
  var geometry = new THREE.SphereGeometry( 0.25, 32, 32 );
  var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
  var sphere = new THREE.Mesh( geometry, material );
  sphere.position.x = x;
  sphere.position.z = y;
  sphere.position.y = z;
  sphere.receiveShadow = true;
  
  return sphere;
 },
 drawLine: function(x, y, z, size, rotations) {
  var geometry = new THREE.CylinderBufferGeometry( 0.25, 0.25, size, 32 );
  var material = new THREE.MeshBasicMaterial( {color: 0x00ffff} );
  var cylinder = new THREE.Mesh( geometry, material );
  cylinder.position.x = x;
  cylinder.position.y = y;
  cylinder.position.z = z;
  cylinder.receiveShadow = true;
  
  if(!isNaN(rotations.y)) { cylinder.rotation.x = rotations.y; }
  
  var group = new THREE.Group();
  group.add( cylinder );
  
  if(!isNaN(rotations.x)) { group.rotation.y = rotations.x; }
  
  return group;
 },
 getLength: function(xa, ya, za, xb, yb, zb) {
  return Math.sqrt( Math.pow(xb - xa , 2) + Math.pow(yb - ya , 2) + Math.pow(zb - za , 2) );
 },
 getRotations: function(xa, ya, za, xb, yb, zb, size) {
  var dx = xb - xa;
  var dy = yb - ya;
  var dz = zb - za;
  
  return {
   x: Math.asin(dy / size),
   y: Math.asin(dx / size)
  };
 },
 getPosition: function(xa, ya, za, xb, yb, zb) {
  return { x: ((xa + xb) / 2), y: ((ya + yb) / 2), z: ((za + zb) / 2) };
 }
};


Je travaille sur la fonction drawLine, pour les articulations sur la même verticale, le script fonctionne mais dès qu'il faut effectuer une rotation, il y a des décalages (voir image ci-dessus)

Cordialement,
Faure Lucas.
Afficher la suite 

2 réponses

Messages postés
234
Date d'inscription
dimanche 14 septembre 2014
Statut
Membre
Dernière intervention
1 septembre 2019
4
0
Merci
Up s.v.p
[Dal]
Messages postés
5210
Date d'inscription
mercredi 15 septembre 2004
Statut
Contributeur
Dernière intervention
16 septembre 2019
801 -
Si tu n'as pas de réponses, c'est sans doutes que personne ici ne peut réellement te renseigner.

Quelques remarques quand même, au cas où cela peut t'aider.

Sans connaître Three.js, je trouve quand même bizarre que tu veuilles aligner un objet sur des points dans l'espace, alors que, si par définition tu as les coordonnées de tes points dans l'espace, il paraîtrait plus simple de construire ta ligne ou ton objet par rapport à ces points avec les primitives de Three.js permettant le tracé de lignes ou de tes objets en spécifiant ces points...

Sinon, si tu tiens à faire des rotations, tu peux voir cette discussion : https://github.com/mrdoob/three.js/issues/2077

et cette intervention qui indique que si les rotations (à faire en radians) ne donnent pas le résultat attendu, cela peut être lié à l'ordre dans lequel les rotations sont faites, qui sont des rotations de Euler, Three.js utilisantl'ordre par défaut XYZ (à moins que tu ne le change) :

WestLangley commented on 19 Jun 2012

Rotations occur in the order specified by object.eulerOrder, not in the order you specify them.

The default Euler order is 'XYZ', so rotations are by default performed in the order X-first, then Y, then Z.

Rotations are performed with respect to the oject's internal coordinate system -- not the world coordinate system. So, for example, after the X-rotation occurs, the object's Y- and Z- axes will generally no longer be aligned with the world axes.


et t'aider d'exemples comme celui-ci : https://jsfiddle.net/MadLittleMods/n6u6asza/

Tu as aussi : https://discourse.threejs.org/ où tu devrais trouver de l'aide :-)
Commenter la réponse de electroking
Messages postés
234
Date d'inscription
dimanche 14 septembre 2014
Statut
Membre
Dernière intervention
1 septembre 2019
4
0
Merci
Je te remercie pour ta réponse, je pense que j'ai eu du mal à trouver ma reponse car mes explications étaient peu claires.

En tout cas ta réponse va bien m'aider.

Actuellement en utilisant des lignes pour créer une surface autoure de deux sphères (mes deux points), j'obtiens ce résultat :


Malheureusement, le temps de génération de ce squelette prend presque quelques dixièmes de secondes et je trouve cela assez long.

Bref, je vais regarder les liens que tu m'as envoyé ;)
Commenter la réponse de electroking