Appliquer texture sur sphère 3D

**roukgreg** · 09/05/2014, 09h02

Bonjour,

Pour mon travail mon boss m'a demandé d'ajouter des sphères sur un site Internet. J'ai cherché pas mal de choses pour le réaliser seul mais sans grand résultat.
Et en cherchant un peu plus, j'ai trouvé un script qui me permet d'afficher un vrai sphère en 3D.
Aprés avoir modifier un peu le code pour obtenir ce que je souhaitais, je cherche maintenant à appliquer une "texture" sur ma sphère qui suit le mouvement. Là la texture n'est appliquée que sur mon canvas et pas sur m'objet.
Auriez-vous une idée pour appliquer la texture sur la sphère et non sur mon canvas.

Si vous avez une autre idée pour réaliser une sphère façon 3D, je suis preneur.

Voici le code JavaScript :

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
 
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" /><title>forked: 変体 - js do it</title>
<meta name="Description" content="jsdo.it - share JavaScript, HTML5 and CSS - " />
<meta name="Keywords"  content="JavaScript,HTML5,CSS" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 
 
<style type="text/css">* {margin:0;padding:0;}
body {background:#003747;overflow:hidden;}
#canvas {cursor:pointer;position:relative;z-index:6;border-radius:200px 200px 200px 200px;}
</style></head>
<body>
 
<canvas id='canvas' width="240" height="240"></canvas>
<script type="text/javascript" src="test_un.js"></script>
 
<script type="text/javascript" src="flatshader.js"></script>
 
<script type="text/javascript" src="light.js"></script>
 
<script type="text/javascript" src="matrix.js"></script>
 
<script type="text/javascript" src="triangle.js"></script>
 
<script type="text/javascript" src="vertex.js"></script>
 
<script type="text/javascript">
var canvasW = 240;
var canvasH = 240;
var ctx, do3d, mouseX, mouseY;
var fps = 5;
var vpX = canvasW>>1;
var vpY = canvasH>>1;
 
 
 
var cnt = 0;
var motion_cnt = 0;
var velocity = 0;
 
var IDLING_TIME = 1;
 
(function()
{
  window.onload = function(){
 
    //Canvas
    var _canvas = document.getElementById("canvas");
    _canvas.addEventListener("mouseover", onMouseOver, true);
 
    //Context
    ctx = _canvas.getContext("2d");
 
 
 
    //3D Object
    //do3d = new ExtraDisplayObject3D(this, "#0C89AD");
    do3d = new ExtraDisplayObject3D(this, "#FFFFF");
 
    setInterval(update, 300/fps);
  }
}
)();
 
function onMouseOver(e)
{
  mouseX = e.clientX - document.body.scrollLeft;
  mouseY = e.clientY - document.body.scrollTop;
}
 
function update()
{
  cnt++;
 
  var i, vertex, target_v;
  var angleX = 5 * .029;
  var angleY = 50 * .029;
 
  if(isNaN(angleX)) angleX = 3;
  if(isNaN(angleY)) angleY = 2.5;
 
  do3d.rotationX += angleX;
  do3d.rotationY += angleY;
  //do3d.rotationZ += angleX;
  do3d.setTransformMatrix();
 
  if(do3d.isDeform){
   // motion_cnt++;
   // if(motion_cnt >= IDLING_TIME) velocity += 2.93;
    //if(motion_cnt == IDLING_TIME) (do3d.formType == "sphere") ? do3d.deform_vertices = do3d.all_vertices_sphere.slice(0) : do3d.deform_vertices = do3d.all_vertices_cube.slice(0);
 
    for(i = 0; i < 216; i++)  {
      (do3d.formType == "sphere") ? vertex = do3d.all_vertices_sphere[i] : vertex = do3d.all_vertices_cube[i];
 
      if(motion_cnt >= IDLING_TIME) {
 
        (do3d.formType == "sphere") ? target_v = do3d.all_vertices_cube[i] : target_v = do3d.all_vertices_sphere[i];
 
        do3d.vertices[i] = do3d.transMatrix.transformPoint(do3d.deform_vertices[i]);
      }else{
        do3d.vertices[i] = do3d.transMatrix.transformPoint(vertex);
      }
      //do3d.vertices[i].project(do3d.vertices[i].getPerspective(do3d.distance));
    }
 
  }else{
    if(cnt > IDLING_TIME){
      do3d.isDeform = true;
    }else{
      for(var i = 0; i < do3d.vertices.length; i++)
        do3d.vertices[i] = do3d.transMatrix.transformPoint(do3d.vertices[i]);
        //do3d.vertices[i].project(do3d.vertices[i].getPerspective(do3d.distance));
    }
  }
 
  this.ctx.clearRect(0,0,canvasW,canvasH);
//  this.ctx.shadowBlur = 1;
//  this.ctx.shadowColor = "#000000";
 
  //do3d.triangles.sort( function(a, b){ return ( b.screenZ() - a.screenZ() ); } );
 
  if(do3d.isDeform) {
    //Vertex Dot Rendering
    for(i in do3d.vertices) {
      this.ctx.beginPath();
 
      var mon_image = new Image();
      mon_image.src = "texture.png";
      ctx.drawImage(mon_image, 0, 0);
 
      // this.ctx.arc(do3d.vertices[i].x, do3d.vertices[i].y, 2, 4,Math.PI*4.5);
      this.ctx.arc(do3d.vertices[i].x, do3d.vertices[i].y, 2, 4,Math.PI*4.5);
 
      this.ctx.closePath();
     $(this).attr('id','test');
      this.ctx.fillStyle = do3d.rgbaString;
      this.ctx.fill();
    }
  }else{
    //Face Rendering
    for(i in do3d.triangles) {
      var t = do3d.triangles[i];
      t.transformPoint(do3d.transMatrix);
      //t.perspective(1000);
      if(t.isBackFace()) continue;
      t.draw(this.ctx);
    }
  }
}
 
</script>
</body>
</html>

J'espère avoir bien réussi à vous expliquer mon problème.

Par avance merci

**danielhagnoul** · 09/05/2014, 10h08

Bonjour

Pour la 3D il y a WebGL

**roukgreg** · 09/05/2014, 10h30

Tout d'abord merci pour ta réponse.

J'avais déjà vu la 3D avec WebGL, mais le truc c'est qu'il faudrait que ce soit compatible avec le maximum de navigateur et également les tablettes et smartphones. La sphère que j'utilise actuellement elle passe bien sur les différents supports, je n 'ai pas testé IE8, mais sur tablettes et smartphone c'est bon.

Appliquer texture sur sphère 3D

JavaScript

Discussions similaires

Partager

Partager