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

Version imprimable

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:

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 :

Citation:

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

1 pièce(s) jointe(s)

appeler la dernière version de three.js

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

Code:

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

par :

Code:

<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)
Pièce jointe 257200
Je suppose qu'il doit être dans le même répertoire que le .html de la source ?

Code:

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>

25/03/2017, 08h07
LittleWhite

Bonjour,

Je ne connais pas vraiment le JavaScript, mais ceci :

Code:

loader.load('b.png')

ne devrait pas être avec des '"' :

Code:

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.
25/03/2017, 10h37
jdddeschamps

emplacement des fichiers appelé par un script js [RESOLU]

@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.
04/05/2017, 21h59
jdddeschamps

La solution est assez complexe

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