[Babylon.js] Erreur: Unexpected end of input (at Test001.htm:151:5)

**JP CASSOU** · 28/07/2023, 10h37

Bjr à vous,

Je bloque sur une erreur incompréhensible pour moi:

: Unexpected end of input (at Test001.htm:151:5)

Enervant +++

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
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
<!DOCTYPE html>
<!-- Generated 2023-07-28 13:57:24.105 by GHTopoFPC version 3.14159265359  -  Version internationale hors Chine : Utilitaires Bureau 610 désactivés -->
<!-- BoundingBox = (Coin bas gauche: : 403429.920, 3089500.143, 492.017 , Coin haut droit: : 403584.916, 3089670.312, 583.748) -->
<HTML>
  <HEAD>
    <TITLE>Vue 3D</TITLE>
    <META charset="utf-8" />
<!-- External Babylon JS Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
    <script src="https://assets.babylonjs.com/generated/Assets.js"></script>
    <script src="https://cdn.babylonjs.com/recast.js"></script>
    <script src="https://cdn.babylonjs.com/ammo.js"></script>
    <script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
    <script src="https://cdn.babylonjs.com/cannon.js"></script>
    <script src="https://cdn.babylonjs.com/Oimo.js"></script>
    <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<!-- End -->
    <STYLE>
         html, body{
           overflow: hidden; /* Fuck the Christ */
           width: 100%; 
           height: 100%; 
           margin: 0; 
           padding: 0; 
         }
         #renderCanvas{
           width: 100%; 
           height: 100%; 
           touch-action: none; /* thurlutte */
         }
    </STYLE>
  </HEAD>
  <BODY>
<canvas id="renderCanvas"></canvas>
    <SCRIPT type="text/javascript">
// Variables globales
console.log("DEBUG: MAIN:: Initialisation variables globales");
var MyCanvas = document.getElementById("renderCanvas");
var MyEngine = new BABYLON.Engine(MyCanvas, true, {preserveDrawingBuffer: true, stencil: true});
// ==================================
console.log("DEBUG: MAIN:: 000");
 
/* --------------------------------- */
/* TCenterlines */
/* Polygonales */
function TCenterlines(QR, QG, QB, QA) {
  this.Color = new BABYLON.Color4(QR, QG, QB); // QA
} // End class: TCenterlines
/* ----------------- */
 
/* --------------------------------- */
/* TSceneContainer */
/* Conteneur de scène */
function TSceneContainer(QX1, QY1, QZ1, QX2, QY2, QZ2) {
console.log("DEBUG: TSceneContainer: 001");
  this.CoinBasGauche = new BABYLON.Vector3(QX1, QY1, QZ1); // Coin bas gauche
  this.CoinHautDroit = new BABYLON.Vector3(QX2, QY2, QZ2); // Coin haut droit
  this.Centerlines = new TCenterlines(0, 0, 255, 255); /* Conteneur de la centerline */
  this.DimensionsBox = new BABYLON.Vector3(this.CoinHautDroit.x - this.CoinBasGauche.x, this.CoinHautDroit.y - this.CoinBasGauche.y, this.CoinHautDroit.z - this.CoinBasGauche.z); // Dimensions de la boite englobante
  this.Offset = new BABYLON.Vector3(0.50 * this.DimensionsBox.x, 0.50 * this.DimensionsBox.y, 0.50 * this.DimensionsBox.z); // Offset
  
  /* Fonction retournant un BABYLON.Vector3 */
  this.CalcCoordsFromXYZ = function (QX1, QY1, QZ1) {
      return new BABYLON.Vector3(QX1 - this.CoinBasGauche.x - this.Offset.x,
                    QY1 - this.CoinBasGauche.y - this.Offset.y,
                    QZ1 - this.CoinBasGauche.z - this.Offset.z);
  } // End method: CalcCoordsFromXYZ
 
  
  /* Lignes verticales du cube */
  this.DrawVerticalLinesBoundingBox = function (QScene, QX1, QY1, QColor) {
      var QArrayPoints = [ /*  */
                this.CalcCoordsFromXYZ(QX1, QY1, this.CoinBasGauche.z),
                this.CalcCoordsFromXYZ(QX1, QY1, this.CoinHautDroit.z)
               ]; //QArrayPoints */
                var QPath = new BABYLON.MeshBuilder.CreateLines("BoundingBox", {points: QArrayPoints}, QScene);
                QPath.color = QColor;
                return QPath;
  } // End method: DrawVerticalLinesBoundingBox
 
  
  /* Retourne la longueur de la diagonale du cube */
  this.GetDiagonal = function () {
     return Math.hypot(this.CoinHautDroit.x - this.CoinBasGauche.x,
                       this.CoinHautDroit.y - this.CoinBasGauche.y,
                       this.CoinHautDroit.z - this.CoinBasGauche.z);
  } // End method: GetDiagonal
 
  
  /* Trace la bounding box */
  this.DrawCube = function (QScene, QR, QG, QB, QA) {
      var QArrayPoints = [ /*  */
                this.CalcCoordsFromXYZ(this.CoinBasGauche.x, this.CoinBasGauche.y, this.CoinBasGauche.z),
                this.CalcCoordsFromXYZ(this.CoinHautDroit.x, this.CoinBasGauche.y, this.CoinBasGauche.z),
                this.CalcCoordsFromXYZ(this.CoinHautDroit.x, this.CoinHautDroit.y, this.CoinBasGauche.z),
                this.CalcCoordsFromXYZ(this.CoinBasGauche.x, this.CoinHautDroit.y, this.CoinBasGauche.z),
                this.CalcCoordsFromXYZ(this.CoinBasGauche.x, this.CoinBasGauche.y, this.CoinBasGauche.z),
                this.CalcCoordsFromXYZ(this.CoinBasGauche.x, this.CoinBasGauche.y, this.CoinHautDroit.z),
                this.CalcCoordsFromXYZ(this.CoinHautDroit.x, this.CoinBasGauche.y, this.CoinHautDroit.z),
                this.CalcCoordsFromXYZ(this.CoinHautDroit.x, this.CoinHautDroit.y, this.CoinHautDroit.z),
                this.CalcCoordsFromXYZ(this.CoinBasGauche.x, this.CoinHautDroit.y, this.CoinHautDroit.z),
                this.CalcCoordsFromXYZ(this.CoinBasGauche.x, this.CoinBasGauche.y, this.CoinHautDroit.z),
                this.CalcCoordsFromXYZ(this.CoinBasGauche.x, this.CoinBasGauche.y, this.CoinHautDroit.z)
               ]; //QArrayPoints */
                var QPath = new BABYLON.MeshBuilder.CreateLines("Cube", {points: QArrayPoints}, QScene);
                QPath.color = new BABYLON.Color4(QR, QG, QB, QA);
// Les lignes verticales
                var L1 = this.DrawVerticalLinesBoundingBox(QScene, this.CoinHautDroit.x, this.CoinBasGauche.y, QPath.color);
                var L2 = this.DrawVerticalLinesBoundingBox(QScene, this.CoinHautDroit.x, this.CoinHautDroit.y, QPath.color);
                var L3 = this.DrawVerticalLinesBoundingBox(QScene, this.CoinBasGauche.x, this.CoinHautDroit.y, QPath.color);
  
  
 
} // End class: TSceneContainer
/* ----------------- */
 
/* Construction de la scène */
function createScene() {
  var SceneContainer = new TSceneContainer(403429.920, 3089500.143, 492.017,  403584.916, 3089670.312, 583.748);
console.log("DEBUG:   createScene: 001");
  var QScene = new BABYLON.Scene(MyEngine); /*  <--- WTF: Erreur ici  */
console.log("DEBUG: createScene: 002");
  var QCameraDir = new BABYLON.Vector3(0.000, 0.000, 0.000); // Direction de la caméra
console.log("DEBUG: createScene: 003");
  var QCamera = new BABYLON.ArcRotateCamera("Camera01", 0.000, 0.000, 0.000, QCameraDir, QScene);
  QCamera.setPosition(new BABYLON.Vector3(0.000, 0.000, -SceneContainer.GetDiagonal()));
  console.log("Diagonale = " +  SceneContainer.GetDiagonal());
  QCamera.attachControl(MyCanvas, true); // This attaches the camera to the canvas
  // Les objets ici
  SceneContainer.DrawCube(QScene, 0, 0, 255, 128);
  return QScene;
} // End function: createScene
/* --------------------------------- */
console.log("DEBUG: MAIN: 001");
var MyScene = createScene();
console.log("DEBUG: MAIN: 002");
MyEngine.runRenderLoop(function () {
  if (MyScene) // 
  {
    MyScene.render();
    } // 
}); /* L'accolade ferme la fonction anonyme, la parenthèse ferme l'appel runRenderLoop */
    </SCRIPT>
  <noscript>JavaScript is required</noscript>
  </BODY>
</HTML>

**NoSmoking** · 28/07/2023, 19h18

Bonjour,
l'avantage de bien indenter son code et de voir qu'il te manque une accolade fermante pour fermer ta fonction TSceneContainer, contrairement à ce qui est écrit à la ligne ligne 117 (qui ferme this.DrawCube).

Nota : prend habitude de mettre les balises en minuscule.

**JP CASSOU** · 02/08/2023, 19h00

Bjr,

Je veux dessiner un morceau de tube composé de 12 facettes adjacentes.
Je me base sur les tutoriaux.

J'obtiens bien évidemment un écran noir. Le débogueur n'est d'aucun secours ...

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
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
        <title>Babylon.js sample code</title>
 
        <!-- Babylon.js -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="https://assets.babylonjs.com/generated/Assets.js"></script>
        <script src="https://cdn.babylonjs.com/recast.js"></script>
        <script src="https://cdn.babylonjs.com/ammo.js"></script>
        <script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
        <script src="https://cdn.babylonjs.com/cannon.js"></script>
        <script src="https://cdn.babylonjs.com/Oimo.js"></script>
        <script src="https://cdn.babylonjs.com/earcut.min.js"></script>
        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
        <script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
        <script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
        <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
        <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
 
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
 
            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
 
            #canvasZone {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
<body>
    <div id="canvasZone"><canvas id="renderCanvas"></canvas></div>
    <script>
	    function TTubeGalerie(QScene, QName, QX, QY, QZ)
		{
		  this.Name = QName;
		  this.Position = new  BABYLON.Vector3(QX, QY, QZ);
		  this.positions = [];
		  this.indices = [0, 6, 7,  // Facette 1
                          1, 7, 8,  // Facette 3
                          2, 8, 9,  // Facette 5
                             3, 9, 10,  // Facette 7
                             4, 10, 11,  // Facette 9
                             5, 11, 6,  // Facette 11
                             0, 7, 1,  // Facette 2
                             1, 8, 2,  // Facette 4
                             2, 9, 3,  // Facette 6
                             3, 10, 4,  // Facette 8
                             4, 11, 5,  // Facette 10
                             5, 6, 0  // Facette 12  
							 ];
		  this.normals   = [];
          this.AddVertex = function(QX, QY, QZ) 		  
		  {
		     this.positions.push(new BABYLON.Vector3(QX , QY , QZ ));
                     console.log(QX +", " + QY + ", " + QZ + ", PosX " + (QX+ this.Position.x));
		  }
 
		  this.Make = function()
		  {
 
		     console.log("Make");
		     this.AddVertex(-1,  0.0, -1.0);
			 this.AddVertex(-1,  1.0, -0.5);
			 this.AddVertex(-1,  0.9,  0.6);
			 this.AddVertex(-1,  0.0,  1.2);
			 this.AddVertex(-1, -0.8,  0.7);
			 this.AddVertex(-1, -0.7, -0.4);
 
			 this.AddVertex(1,  0.0, -1.0);
			 this.AddVertex(1,  1.0, -0.5);
			 this.AddVertex(1,  0.9,  0.6);
			 this.AddVertex(1,  0.0,  1.2);
			 this.AddVertex(1, -0.8,  0.7);
			 this.AddVertex(1, -0.7, -0.4);
			 console.log('Vertex: ' + this.positions.length);
             console.log('Indices: ' + this.indices.length);
			 var customMesh = new BABYLON.Mesh(this.Name, QScene);
        	 var vertexData = new BABYLON.VertexData();
        	 BABYLON.VertexData.ComputeNormals(this.positions, this.indices, this.normals);
 
        	 //Assign positions, indices and normals to vertexData
        	 vertexData.positions = this.positions;
        	 vertexData.indices   = this.indices;
        	 vertexData.normals   = this.normals;
        	 //vertexData.colors = colors;
 
        	//Apply vertexData to custom mesh
        	vertexData.applyToMesh(customMesh);
		  }					
 
		}
 
        var canvas = document.getElementById("renderCanvas");
 
        var startRenderLoop = function (engine, canvas) {
            engine.runRenderLoop(function () {
                if (sceneToRender && sceneToRender.activeCamera) {
                    sceneToRender.render();
                }
            });
        }
 
        var engine = null;
        var scene = null;
        var sceneToRender = null;
        var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
        var createScene = function () {
        	var scene = new BABYLON.Scene(engine);
 
        	var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
            light.intensity = 0.7;	
 
 
        	var camera = new BABYLON.ArcRotateCamera("camera1",  0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
          	camera.setPosition(new BABYLON.Vector3(0, 0, -2));
        	camera.attachControl(canvas, true);
 
			var MyTube1 = new TTubeGalerie(scene, "Tube01", 0, 0, 0);
			//var MyTube2 = new TTubeGalerie(scene, "Tube02", 2, 2, 2);
 
        	MyTube1.Make();
			//MyTube2.Make();
 
 
        	return scene;
        };
                window.initFunction = async function() {
 
 
 
                    var asyncEngineCreation = async function() {
                        try {
                        return createDefaultEngine();
                        } catch(e) {
                        console.log("the available createEngine function failed. Creating the default engine instead");
                        return createDefaultEngine();
                        }
                    }
 
                    window.engine = await asyncEngineCreation();
        if (!engine) throw 'engine should not be null.';
        startRenderLoop(engine, canvas);
        window.scene = createScene();
		};
        initFunction().then(() => {sceneToRender = scene                    
        });
 
        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

[Babylon.js] Erreur: Unexpected end of input (at Test001.htm:151:5)

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager