Bonjour,

Je suis sur la créa d'un globe webgl en utilisant Three.js, je rencontre des difficultés pour creer les pays sous forme de Mesh, j'ai du oublier un détail qui fera certainement la différence, j'arrive à créer un simple globe avec une texture maintenant j'aimerai créer des pays pour intéragir...

Voici un morceau de code (le principal), pour le moment niveau rendu, j'ai des points de couleurs hazardeux qui apparaissent sur ma sphére..

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
,
  latLongToVector3:function(lat,lon,r,h){
    var phi = (lat)*Math.PI/180;
    var theta = (lon-180)*Math.PI/180;
    var x = -(r+h) * Math.cos(phi) * Math.cos(theta);
    var y = (r+h) * Math.sin(phi);
    var z = (r+h) * Math.cos(phi) * Math.sin(theta);   
    return new THREE.Vector3(x,y,z);
  },
  clearScene: function(){
   for(i=0;i<this.group-1;i++)
     this.renderer.deallocateObject(this.group[i]);
  },
  addBoundaries: function(){
    this.landsGeometries = [];
    webgl.prototype.countriesGeo.forEach(function(c){
      var geometry = new THREE.Geometry();
      geometry.name = c.name;
      c.borders.forEach(function(c){
        c.forEach(function(c){
         geometry.vertices.push(self.latLongToVector3(c.lat, c.lng, 600, 2));
       });
      geometry.faces.push(new THREE.Face3(0, 1, 2));
      geometry.mergeVertices();
      geometry.computeBoundingSphere();
      self.landsGeometries.push(geometry);
      self.scene.add(new THREE.Mesh(geometry));
      })
    });
 
  },
  testGlobe: function(){
    var geometry = new THREE.SphereGeometry(600,32,32);
    var material = new THREE.MeshPhongMaterial({
                    wireframe:true,color:0xffffff});
    this.globe = new THREE.Mesh(geometry,material);
 
    this.scene.add(this.globe);
    this.addLights();
  },
  addEarth: function(){
    this.addBoundaries();
    this.scene.add(this.group);
    this.render(function(m,o){
       var timer = Date.now() * 0.0001;
       o.light.position = o.camera.position;
       m.rotation.y += (o.tRotation - m.rotation.y)* 0.05;
       //o.clouds.rotation.z+=0.00015;
      },self.globe);
  }
Un exemple de l'array Countries:

Code : Sélectionner tout - Visualiser dans une fenêtre à part
{code:"LU", name:"Luxembourg", borders:[[[6.04305983,50.12805176],[6.24272013,49.90224075],[6.18628979,49.46382904],[5.89773989,49.44268036],[5.67404985,49.52947998],[5.78239012,50.09032822],[6.04305983,50.12805176],[6.04305983,50.12805176]]]}
j'ai pas eu le temps de me familiariser avec l'API native.

Coté traitement: Recup positions latitude, longtitude, conversion vers un vecteur 3 dimensions, injection du vecteur dans la geometry du pays concerné, création de Mesh avec la geometry correspondante .