JS webgl three.js - impossible d'afficher un sprite

**jdddeschamps** · 24/03/2017, 10h27

Bonjour,

Je débute avec three.js.
J'ai donc commencé par https://threejs.org/docs/index.html#...eating_a_scene
ça marche
Puis j'ai voulu ajouter un sprite : https://threejs.org/docs/index.html#...SpriteMaterial
ça ne marche pas

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
<html>
	<head>
		<title>My first three.js app</title>
		<style>
                        body { margin: 0; }
                        canvas { width: 100%; height: 100% }
                </style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
                        var scene = new THREE.Scene();
                        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
                        var renderer = new THREE.WebGLRenderer();
                        renderer.setSize( window.innerWidth, window.innerHeight );
                        document.body.appendChild( renderer.domElement );
                        // instantiate a loader
                        var loader = new THREE.TextureLoader();
                        //allow cross origin loading
                                //loader.crossOrigin = '';
                        // load a resource
                        loader.load('b.png')
                        var spriteMaterial = new THREE.SpriteMaterial( { map: loader, color: 0xffffff } );
                        var sprite = new THREE.Sprite( spriteMaterial );
                        scene.add( sprite );
                        camera.position.z = 2;
                        var render = function () {
                                requestAnimationFrame( render );
                                renderer.render(scene, camera);
                        };
                        render();
                </script>
	</body>
</html>

Erreur dans la console :

Uncaught TypeError: Cannot read property 'x' of undefined
at SpritePlugin.render (three.js:6973)
at WebGLRenderer.render (three.js:21007)
at render (sprite.html:29)
at sprite.html:31

Les questions que je me pose :
1. où doit se trouver l'image b.png ?
- dans le répertoire de mon code (sprite.html) ?
- dans le répertoire /js ?

2. pourquoi l'exemple fourni par three.js ne fonctionne pas chez moi ?

Merci

**jdddeschamps** · 24/03/2017, 10h56

Si vous souhaitez tester le code dans votre navigateur, j'ai remplacé la ligne

Code html :

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

<script src="js/three.js"></script>

par :

Code html :

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

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>

il faut aussi un fichier b.png. Je crois qu'il doit être d'une puissance de 2 (256x256)

Je suppose qu'il doit être dans le même répertoire que le .html de la source ?

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
<html>
	<head>
		<title>My first three.js app</title>
		<style>
                        body { margin: 0; }
                        canvas { width: 100%; height: 100% }
                </style>
	</head>
	<body>
		<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
		<script>
                        var scene = new THREE.Scene();
                        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
                        var renderer = new THREE.WebGLRenderer();
                        renderer.setSize( window.innerWidth, window.innerHeight );
                        document.body.appendChild( renderer.domElement );
                        // instantiate a loader
                        var loader = new THREE.TextureLoader();
                        //allow cross origin loading
                                //loader.crossOrigin = '';
                        // load a resource
                        loader.load('b.png')
                        var spriteMaterial = new THREE.SpriteMaterial( { map: loader, color: 0xffffff } );
                        var sprite = new THREE.Sprite( spriteMaterial );
                        scene.add( sprite );
                        camera.position.z = 2;
                        var render = function () {
                                requestAnimationFrame( render );
                                renderer.render(scene, camera);
                        };
                        render();
                </script>
	</body>
</html>

**LittleWhite** · 25/03/2017, 08h07

Bonjour,

Je ne connais pas vraiment le JavaScript, mais ceci :

Code javascript :

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

loader.load('b.png')

ne devrait pas être avec des '"' :

Code javascript :

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

loader.load("b.png")

Sinon, le fichier doit être avec votre HTML. Mais vous avez aussi le choix de spécifier un chemin complet (comme http://developpez.com/example.png) ou encore de spécifier un chemin relatif (comme ./ressources/b.png). Donc c'est à vous de voir.
Si vous ouvrez la console de développement de votre navigateur, ce dernier vous dira sans doute s'il n'a pas réussi à trouver la texture.

**jdddeschamps** · 25/03/2017, 10h37

@LittleWhite
Effectivement, le fichier doit bien se trouver dans le répertoire du .html
peu importe les guillemets utilisés ('b.png' ou "b.png")

J'ai remplacé le fichier local par un fichier distant sur le web et j'ai copié le html sur un serveur pour que les lecteurs du forum puissent l'exécuter dans un navigateur.
Quand le chemin n'est pas le bon, le debbugeur de Chrome signale l'erreur dans la console...

Je clos ce post et en démarre un nouveau.

**jdddeschamps** · 04/05/2017, 21h59

d'une part il faut convertir l'image en binaire, d'autre part il faut s'assurer que l'image a fini d'être chargée avant de poursuivre :
La solution ici :
http://stackoverflow.com/questions/4...27669#43027669

JS webgl three.js - impossible d'afficher un sprite

API graphiques

Discussions similaires

Partager

Partager