Integrate X3D JSON into loader so it can load either JSON or XML files

README.md

@@ -33,6 +33,25 @@ var scene = new THREE.Scene();
 X3DLoader.x3dParser(THREE, parsedXml, scene /* Optional. Created if missing */, useImageTexture/* Optional. Default true */);
 ```
 
+## Running in a web server
+
+```
+1$ git clone https://github.com/coderextreme/three-x3d-loader
+2$ cd three-x3d-loader
+3$ npm install
+4$ node app.js
+```
+Then go to http://localhost:3000/ in a web browser.
+
+
+Or, after running npm install, do
+```
+npm run start
+```
+Then go to http://localhost:8080/
+
+To change file you are viewing, edit example/example.js.  Replace "example/example.xml" with an X3D XML or X3D JSON file (probably in Interchange profile), with a .x3d, .xml or .json extension.  Then type CTRL-c to stop the web server, and go to step 3 and continue to see a new picture.
+
 [version-image]: https://img.shields.io/npm/v/three-x3d-loader.svg?style=flat
 [version-url]: https://www.npmjs.com/package/three-x3d-loader
 [license-image]: https://img.shields.io/github/license/jonaskello/three-x3d-loader.svg?style=flat

app.js

@@ -0,0 +1,48 @@
+var express = require('express');
+var app = express();
+var port = process.env.PORT || 3000;
+var fs = require("fs");
+
+function send(res, file, type, next) {
+	fs.readFile(file, function(err, data) {
+		if (err) throw err;
+		res.header("Content-Type", type);
+		res.send(data);
+		next();
+	});
+}
+
+app.get("/", function(req, res, next) {
+	send(res, "example/index.html", "text/html", next);
+});
+
+function magic(path, type) {
+    app.get(path, function(req, res, next) {
+	send(res, req._parsedUrl.pathname.substr(1), type, next);
+    });
+}
+
+magic("*.vs", "text/plain");//"x-shader/x-vertex");
+magic("*.fs", "text/plain");//"x-shader/x-fragment");
+magic("*.html", "text/html");
+magic("*.x3d", "text/xml");
+magic("*.xml", "text/xml");
+magic("*.xslt", "text/xsl");
+magic("*.xhtml", "application/xhtml+xml");
+magic("*.js", "text/javascript");
+magic("*.css", "text/css");
+magic("*.gif", "image/gif");
+magic("*.jpg", "image/jpeg");
+magic("*.jpeg", "image/jpeg");
+magic("*.png", "image/png");
+magic("*.mpg", "video/mpeg");
+magic("*.wav", "audio/wav");
+magic("*.mp3", "audio/mpeg3");
+magic("*.swf", "application/x-shockwave-flash");
+magic("*.ply", "application/octet-stream");
+magic("*.stl", "application/octet-stream");
+magic("*.json", "text/json");
+
+console.log("Listing to port "+port);
+
+app.listen(port);

example/example.js

@@ -1,4 +1,4 @@
-var THREE = require('three');
+var THREE = require('../node_modules/three');
 var loader = require('../index');
 loader.x3dLoader(THREE);
 
@@ -8,21 +8,36 @@ var renderer = new THREE.WebGLRenderer();
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );
 
-camera.position.z = 1000;
-camera.position.x = 400;
-camera.position.y = -400;
-camera.lookAt(new THREE.Vector3(0, 0, 0));
-
 const httpRequest = new XMLHttpRequest();
-httpRequest.overrideMimeType('text/xml');
+
+var file = "example.xml";
+
+if (file.endsWith(".xml")) {
+	camera.position.z = 1000;
+	camera.position.x = 400;
+	camera.position.y = -400;
+	httpRequest.overrideMimeType('text/xml');
+} else if (file.endsWith(".x3d")) {
+	camera.position.z = 3;
+	camera.position.x = 3;
+	camera.position.y = 3;
+	httpRequest.overrideMimeType('text/xml');
+} else {
+	camera.position.z = 3;
+	camera.position.x = 3;
+	camera.position.y = 3;
+	httpRequest.overrideMimeType('text/json');
+}
+
+camera.lookAt(new THREE.Vector3(0, 0, 0));
 
 httpRequest.onreadystatechange = () => {
     if (httpRequest.readyState === XMLHttpRequest.DONE) {
         if (httpRequest.status === 200) {
-            var xmlText = httpRequest.responseText;
+            var text = httpRequest.responseText;
 
             var loader = new THREE.X3DLoader();
-            const scene = loader.parse(xmlText);
+            const scene = loader.parse(text);
             var light = new THREE.AmbientLight( 0x404040 ); // soft white light
             scene.add( light );
             renderer.render(scene, camera);
@@ -32,5 +47,5 @@ httpRequest.onreadystatechange = () => {
     }
 };
 
-httpRequest.open("GET", "example.xml");
+httpRequest.open("GET", file);
 httpRequest.send(null);

example/example.json

@@ -0,0 +1,79 @@
+{ "X3D": {
+    "encoding":"UTF-8",
+    "@profile":"Interchange",
+    "@version":"3.3",
+    "@xsd:noNamespaceSchemaLocation":"http://www.web3d.org/specifications/x3d-3.3.xsd",
+    "JSON schema":"http://www.web3d.org/specifications/x3d-3.3-JSONSchema.json",
+    "Scene": {
+        "-children":[
+          { "Group":
+            {
+              "-children":[
+                { "Shape":
+                  {
+                    "-appearance":
+                      { "Appearance":
+                        {
+                          "-material":
+                            { "Material":
+                              {
+                                "@diffuseColor":[1,0,0]
+                              }
+                            }
+                        }
+                      },
+                    "-geometry":
+                      { "Sphere":
+                        {
+				"@radius":1
+                        }
+                      }
+                  }
+                },{ "Shape":
+                  {
+                    "-appearance":
+                      { "Appearance":
+                        {
+                          "-material":
+                            { "Material":
+                              {
+                                "@diffuseColor":[0,1,0]
+                              }
+                            }
+                        }
+                      },
+                    "-geometry":
+                      { "Sphere":
+                        {
+				"@radius":2
+                        }
+                      }
+                  }
+                },{ "Shape":
+                  {
+                    "-appearance":
+                      { "Appearance":
+                        {
+                          "-material":
+                            { "Material":
+                              {
+                                "@diffuseColor":[0,0,1]
+                              }
+                            }
+                        }
+                      },
+                    "-geometry":
+                      { "Sphere":
+                        {
+				"@radius":3
+                        }
+                      }
+                  }
+                }
+              ]
+            }
+          }
+        ]
+    }
+  }
+}

example/index.html

@@ -5,6 +5,6 @@
     <title>Title</title>
 </head>
 <body>
-<script src="bundle.js"></script>
+<script src="../bundle.js"></script>
 </body>
-</html>
+</html>

example/webpack.example.config.js

@@ -7,4 +7,4 @@ module.exports = {
         publicPath: "/",
         filename: "bundle.js"
     }
-};
+};