THREEJS et texture sur sphere

**Archimède** · 29/04/2022, 22h09

Salut, je n'arrive pas à charger une texture sur une sphère avec three.js :

Code HTML :

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
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { margin: 0; padding: 0; overflow: hidden; }
        canvas { width: 100%; height: 100% }
    </style>
    <script src="three.min.js"></script>
</head>
<body>
    <script>
let w = window.innerWidth;
let h = window.innerHeight;
 
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(10, w/h, .1, 50);
camera.position.z=8;
 
const renderer = new THREE.WebGLRenderer();
renderer.setSize(w,h);
renderer.setClearColor('#000', 1);
document.body.appendChild( renderer.domElement );
 
const geometry = new THREE.SphereBufferGeometry(.5, 50, 50);
const textureLoader = new THREE.TextureLoader(); 
const texture = textureLoader.load('earth_color.jpg'); 
const material = new THREE.MeshPhongMaterial({
    //color: 0xffffff,
      map: texture
});
 
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
    
 
const light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set(20,10,20);
scene.add( light );
 
const alf=Math.PI/180;
 
function animate() {
    sphere.rotation.y +=alf ;
    renderer.render(scene, camera);
    window.requestAnimationFrame(animate);
}
animate();
 
window.addEventListener("resize",()=>{
  w= window.innerWidth;
  h= window.innerHeight;
  renderer.setSize(w,h);
  camera.aspect = w / h;                
  camera.updateProjectionMatrix();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.render(scene, camera);
});
</script>
</body>
</html>

le fichier html est dans le même dossier que l'image.
Je n'ai pas la texture de l'image de la Terre sur la sphère...

Merci pour vos lumières.

**NoSmoking** · 02/05/2022, 10h46

Bonjour,
vérifie déjà que tu n'as pas de message d'« Erreur CORS » dans la console, généralement il faut tester sous serveur local.

**Archimède** · 02/05/2022, 17h39

Merci ! Effectivement, je l'ai mis en ligne pour faire un test, et ça fonctionne. Je n'avais pas de message particulier dans la console...
Nickel pour le test, je n'y avais pas pensé pour le coup...

**NoSmoking** · 02/05/2022, 18h32

Tu peux également utiliser les fonctions de renvoi pour avoir un aperçu de ce qui se passe:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const texture = textureLoader.load(
  'earth_color.jpg',
  function(texture) {
    console.log('Texture :', texture);
  },
  // onProgress callback currently not supported
  function(progress) {
    console.log('Progress :', progress);
  },
  function(error) {
    console.error('Error :', error);
  }
);