JS webgl three.js - Sprite - Error: Uncaught TypeError: Cannot read property 'x' of undefined

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

http://www.planetarium2016.com/sprite.html

Bonjour,

J'essai d'exécuter le code trouvé sur :
https://threejs.org/docs/index.html#...eating_a_scene
et
https://threejs.org/docs/index.html#...Objects/Sprite

Mais j'obtiens l'erreur suivante dont je ne comprends pas l'origine:

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

Le fichier html se trouve ici :
http://www.planetarium2016.com/sprite.html

Je le reproduis ci-dessous :

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
<!DOCTYPE html>
<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 );
 
			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );
 
			camera.position.z = 5;
 
			var render = function () {
				requestAnimationFrame( render );
 
				cube.rotation.x += 0.1;
				cube.rotation.y += 0.1;
 
				renderer.render(scene, camera);
			};
 
			render();
    </script>
</body>
</html>

**jdddeschamps** · 26/03/2017, 12h42

En fait, le code trouvé ici :
https://threejs.org/docs/index.html#...eating_a_scene

propose des fonctionnalités d'animation qui ne fonctionnent pas avec mon sprite (je ne sais pas pourquoi).

J'ai donc commenté les lignes suivantes :

Code :

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

1
2
3
4
5
//var render = function () {
//    requestAnimationFrame( render );
    renderer.render(scene, camera);
//};
//render();

Il n'y a plus d'erreur.

Je peux également afficher les lignes trouvées ici:
https://threejs.org/docs/index.html#.../Drawing_Lines

En revanche, mon sprite n'apparaît pas...

**jdddeschamps** · 04/05/2017, 22h02

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