three.js/examples/js/loaders/VRMLLoader.js

/**
 * @author mrdoob / http://mrdoob.com/
 */

THREE.VRMLLoader = function () {};

THREE.VRMLLoader.prototype = {

	constructor: THREE.VRMLLoader,

    // for IndexedFaceSet support
    isRecordingPoints: false,
    isRecordingFaces: false,
    points: [],
    indexes : [],

    // for Background support
    isRecordingAngles: false,
    isRecordingColors: false,
    angles: [],
    colors: [],

    recordingFieldname: null,

	load: function ( url, callback ) {

		var scope = this;
		var request = new XMLHttpRequest();

		request.addEventListener( 'load', function ( event ) {

			var object = scope.parse( event.target.responseText );

			scope.dispatchEvent( { type: 'load', content: object } );

		}, false );

		request.addEventListener( 'progress', function ( event ) {

			scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );

		}, false );

		request.addEventListener( 'error', function () {

			scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );

		}, false );

		request.open( 'GET', url, true );
		request.send( null );

	},

	parse: function ( data ) {

		var parseV1 = function ( lines, scene ) {

			console.warn( 'VRML V1.0 not supported yet' );

		};

		var parseV2 = function ( lines, scene ) {
            var defines = {};
            var float_pattern = /(\b|\-|\+)([\d\.e]+)/;
            var float3_pattern = /([\d\.\+\-e]+),?\s+([\d\.\+\-e]+),?\s+([\d\.\+\-e]+)/;



            /**
            * Interpolates colors a and b following their relative distance
            * expressed by t.
            *
            * @param float a
            * @param float b
            * @param float t
            * @returns {Color}
            */
            var interpolateColors = function(a, b, t) {
               var deltaR = a.r - b.r;
               var deltaG = a.g - b.g;
               var deltaB = a.b - b.b;

               var c = new THREE.Color();

               c.r = a.r - t * deltaR;
               c.g = a.g - t * deltaG;
               c.b = a.b - t * deltaB;

               return c;
            };

            /**
             * Vertically paints the faces interpolating between the
             * specified colors at the specified angels. This is used for the Background
             * node, but could be applied to other nodes with multiple faces as well.
             *
             * The first angle is never specified, it is the Zenith (0 rad). Angles are specified
             * in radians. The geometry is thought a sphere, but could be anything.
             *
             * You must specify one more color than you have angles at the beginning of the colors array.
             * This is the color of the Zenith (the top of the shape).
             *
             * @param geometry
             * @param radius
             * @param angles
             * @param colors
             * @param boolean directionIsDown Whether to work bottom up or top down (default)
             */
            var paintFaces = function (geometry, radius, angles, colors, directionIsDown) {

                var f, n, p, vertexIndex, color;

                var direction = directionIsDown ? 1 : -1;

                var faceIndices = [ 'a', 'b', 'c', 'd' ];

                var coord = [ ], aColor, bColor, t = 1, A = {}, B = {}, applyColor = false, colorIndex;

                for ( var k = 0; k < angles.length; k++ ) {

                    var vec = { };

                    // push the vector at which the color changes
                    vec.y = direction * ( Math.cos( angles[k] ) * radius);

                    vec.x = direction * ( Math.sin( angles[k] ) * radius);

                    coord.push( vec );

                }

                // painting the colors on the faces
                for ( var i = 0; i < geometry.faces.length ; i++ ) {

                    f  = geometry.faces[ i ];

                    n = ( f instanceof THREE.Face3 ) ? 3 : 4;

                    for ( var j = 0; j < n; j++ ) {

                        vertexIndex = f[ faceIndices[ j ] ];

                        p = geometry.vertices[ vertexIndex ];

                        for ( var index = 0; index < colors.length; index++ ) {

                            // linear interpolation between aColor and bColor, calculate proportion
                            // A is previous point (angle)
                            if ( index === 0 ) {

                                A.x = 0;
                                A.y = directionIsDown ? radius : -1 * radius;

                            } else {

                                A.x = coord[ index-1 ].x;
                                A.y = coord[ index-1 ].y;

                            }

                            // B is current point (angle)
                            B = coord[index];

                            if ( undefined !== B ) {
                                // p has to be between the points A and B which we interpolate
                                applyColor = directionIsDown ? p.y <= A.y && p.y > B.y : p.y >= A.y && p.y < B.y;

                                if (applyColor) {

                                    bColor = colors[ index + 1 ];

                                    aColor = colors[ index ];

                                    // below is simple linear interpolation
                                    t = Math.abs( p.y - A.y ) / ( A.y - B.y );

                                    // to make it faster, you can only calculate this if the y coord changes, the color is the same for points with the same y
                                    color = interpolateColors( aColor, bColor, t );

                                    f.vertexColors[ j ] = color;
                                }

                            } else if ( undefined === f.vertexColors[ j ] ) {
                                colorIndex = directionIsDown ? colors.length -1 : 0;
                                f.vertexColors[ j ] = colors[ colorIndex ];

                            }
                        }


                    }

                }
            };

            var parseProperty = function (node, line) {

                var parts = [], part, property = {}, fieldName;

                /**
                 * Expression for matching relevant information, such as a name or value, but not the separators
                 * @type {RegExp}
                 */
                var regex = /[^\s,\[\]]+/g;

                var point, index, angles, colors;

                while (null != ( part = regex.exec(line) ) ) {
                    parts.push(part[0]);
                }

                fieldName = parts[0];


                // trigger several recorders
                switch (fieldName) {
                    case 'skyAngle':
                    case 'groundAngle':
                        this.recordingFieldname = fieldName;
                        this.isRecordingAngles = true;
                        this.angles = [];
                        break;
                    case 'skyColor':
                    case 'groundColor':
                        this.recordingFieldname = fieldName;
                        this.isRecordingColors = true;
                        this.colors = [];
                        break;
                    case 'point':
                        this.recordingFieldname = fieldName;
                        this.isRecordingPoints = true;
                        this.points = [];
                        break;
                    case 'coordIndex':
                        this.recordingFieldname = fieldName;
                        this.isRecordingFaces = true;
                        this.indexes = [];
                        break;
                }

                if (this.isRecordingFaces) {

                    // the parts hold the indexes as strings
                    if (parts.length > 0) {
                        index = [];

                        for (var ind = 0;ind < parts.length; ind++) {

                            // the part should either be positive integer or -1
                            if (!/(-?\d+)/.test( parts[ind]) ) {
                                continue;
                            }

                            // end of current face
                            if (parts[ind] === "-1") {
                                if (index.length > 0) {
                                   this.indexes.push(index);
                                }

                                // start new one
                                index = [];
                            } else {
                                index.push(parseInt( parts[ind]) );
                            }
                        }

                    }

                    // end
                    if (/]/.exec(line)) {
                        this.isRecordingFaces = false;
                        node.coordIndex = this.indexes;
                    }

                } else if (this.isRecordingPoints) {

                    parts = float3_pattern.exec(line);

                    // parts may be empty on first and last line
                    if (null != parts) {
                        point = {
                            x: parseFloat(parts[1]),
                            y: parseFloat(parts[2]),
                            z: parseFloat(parts[3])
                        };

                        this.points.push(point);
                    }

                    // end
                    if ( /]/.exec(line) ) {
                        this.isRecordingPoints = false;
                        node.points = this.points;
                    }

                } else if ( this.isRecordingAngles ) {

                    // the parts hold the angles as strings
                    if ( parts.length > 0 ) {

                        for ( var ind = 0;ind < parts.length; ind++ ) {

                            // the part should be a float
                            if ( ! float_pattern.test( parts[ind] ) ) {
                                continue;
                            }

                            this.angles.push( parseFloat( parts[ind] ) );
                        }

                    }

                    // end
                    if ( /]/.exec(line) ) {
                        this.isRecordingAngles = false;
                        node[this.recordingFieldname] = this.angles;
                    }

                } else if (this.isRecordingColors) {
                    // this is the float3 regex with the g modifier added, you could also explode the line by comma first (faster probably)
                    var float3_repeatable = /([\d\.\+\-e]+),?\s+([\d\.\+\-e]+),?\s+([\d\.\+\-e]+)/g;

                    while( null !== (parts = float3_repeatable.exec(line) ) ) {

                        color = {
                            r: parseFloat(parts[1]),
                            g: parseFloat(parts[2]),
                            b: parseFloat(parts[3])
                        };

                        this.colors.push(color);

                    }

                    // end
                    if (/]/.exec(line)) {
                        this.isRecordingColors = false;
                        node[this.recordingFieldname] = this.colors;
                    }

                } else if ( parts[parts.length -1] !== 'NULL' && fieldName !== 'children') {

                    switch (fieldName) {

                        case 'diffuseColor':
                        case 'emissiveColor':
                        case 'specularColor':
                        case 'color':

                            if (parts.length != 4) {
                                console.warn('Invalid color format detected for ' + fieldName );
                                break;
                            }

                            property = {
                                'r'         : parseFloat(parts[1]),
                                'g'         : parseFloat(parts[2]),
                                'b'         : parseFloat(parts[3])
                            }

                            break;

                        case 'translation':
                        case 'scale':
                        case 'size':
                            if (parts.length != 4) {
                                console.warn('Invalid vector format detected for ' + fieldName);
                                break;
                            }

                            property = {
                                'x'         : parseFloat(parts[1]),
                                'y'         : parseFloat(parts[2]),
                                'z'         : parseFloat(parts[3])
                            }

                            break;

                        case 'radius':
                        case 'topRadius':
                        case 'bottomRadius':
                        case 'height':
                        case 'transparency':
                        case 'shininess':
                        case 'ambientIntensity':
                            if (parts.length != 2) {
                                console.warn('Invalid single float value specification detected for ' + fieldName);
                                break;
                            }

                            property = parseFloat(parts[1]);

                            break;

                        case 'rotation':
                            if (parts.length != 5) {
                                console.warn('Invalid quaternion format detected for ' + fieldName);
                                break;
                            }

                            property = {
                                'x'         : parseFloat(parts[1]),
                                'y'         : parseFloat(parts[2]),
                                'z'         : parseFloat(parts[3]),
                                'w'         : parseFloat(parts[4])
                            }

                            break;

                        case 'ccw':
                        case 'solid':
                        case 'colorPerVertex':
                        case 'convex':
                            if (parts.length != 2) {
                                console.warn('Invalid format detected for ' + fieldName);
                                break;
                            }

                            property = parts[1] === 'TRUE' ? true : false;

                            break;
                    }

                    node[fieldName] = property;
                }

                return property;
            };

			var getTree = function ( lines ) {

				var tree = { 'string': 'Scene', children: [] };
				var current = tree;
                var matches;
                var specification;

				for ( var i = 0; i < lines.length; i ++ ) {

                    var comment = '';

					var line = lines[ i ];

                    // omit whitespace only lines
                    if ( null !== ( result = /^\s+?$/g.exec( line ) ) ) {
                        continue;
                    }

                    line = line.trim();

                    // skip empty lines
                    if (line === '') {
                        continue;
                    }

					if ( /#/.exec( line ) ) {

                        var parts = line.split('#');

                        // discard everything after the #, it is a comment
                        line = parts[0];

                        // well, let's also keep the comment
                        comment = parts[1];
					}

                    if ( matches = /([^\s]*){1}\s?{/.exec( line ) ) { // first subpattern should match the Node name

						var block = { 'nodeType' : matches[1], 'string': line, 'parent': current, 'children': [],'comment' : comment};
						current.children.push( block );
						current = block;

						if ( /}/.exec( line ) ) {
                            // example: geometry Box { size 1 1 1 } # all on the same line
                            specification = /{(.*)}/.exec( line )[ 1 ];

                            // todo: remove once new parsing is complete?
							block.children.push( specification );

                            parseProperty(current, specification);

							current = current.parent;

						}

					} else if ( /}/.exec( line ) ) {

						current = current.parent;

					} else if ( line !== '' ) {

                        parseProperty(current, line);
                        // todo: remove once new parsing is complete? we still do not parse geometry and appearance the new way
                        current.children.push( line );

					}

				}

                return tree;
			}

			var parseNode = function ( data, parent ) {

				// console.log( data );

				if ( typeof data === 'string' ) {

					if ( /USE/.exec( data ) ) {

                        var defineKey = /USE\s+?(\w+)/.exec( data )[ 1 ];

                        if (undefined == defines[defineKey]) {
                            console.warn(defineKey + ' is not defined.');
                        } else {

                            if ( /appearance/.exec( data ) && defineKey ) {

                                parent.material = defines[ defineKey ].clone();

                            } else if ( /geometry/.exec( data ) && defineKey ) {

                                parent.geometry = defines[ defineKey ].clone();

                                // the solid property is not cloned with clone(), is only needed for VRML loading, so we need to transfer it
                                if (undefined !== defines[ defineKey ].solid && defines[ defineKey ].solid === false) {
                                    parent.geometry.solid = false;
                                    parent.material.side = THREE.DoubleSide;
                                }

                            } else if (defineKey){

                                var object = defines[ defineKey ].clone();
                                parent.add( object );

                            }

                        }

					}

					return;

				}

				var object = parent;

				if ( 'Transform' === data.nodeType || 'Group' === data.nodeType ) {

					object = new THREE.Object3D();

					if ( /DEF/.exec( data.string ) ) {
						object.name = /DEF\s+(\w+)/.exec( data.string )[ 1 ];
						defines[ object.name ] = object;
					}

                    if ( undefined !== data['translation'] ) {

                        var t = data.translation;

                        object.position.set(t.x, t.y, t.z);

                    }

                    if ( undefined !== data.rotation ) {

                        var r = data.rotation;

                        object.quaternion.setFromAxisAngle( new THREE.Vector3( r.x, r.y, r.z ), r.w );

                    }

                    if ( undefined !== data.scale ) {

                        var s = data.scale;

                        object.scale.set( s.x, s.y, s.z );

                    }

					parent.add( object );

				} else if ( 'Shape' === data.nodeType ) {

					object = new THREE.Mesh();

					if ( /DEF/.exec( data.string ) ) {

						object.name = /DEF (\w+)/.exec( data.string )[ 1 ];

						defines[ object.name ] = object;
					}

					parent.add( object );

				} else if ( 'Background' === data.nodeType ) {

                    var segments = 20;

                    // sky (full sphere):
                    var radius = 2e4;

                    var skyGeometry = new THREE.SphereGeometry( radius, segments, segments );

                    var skyMaterial = new THREE.MeshBasicMaterial( { color: 'white', vertexColors: THREE.VertexColors, shading: THREE.NoShading } );

                    skyMaterial.side = THREE.BackSide;

                    skyMaterial.fog = false;

                    skyMaterial.color = new THREE.Color();

                    paintFaces( skyGeometry, radius, data.skyAngle, data.skyColor, true );

                    var sky = new THREE.Mesh( skyGeometry, skyMaterial );

                    scene.add( sky );

                    // ground (half sphere):

                    radius = 1.2e4;

                    var groundGeometry = new THREE.SphereGeometry( radius, segments, segments, 0, 2 * Math.PI, 0.5 * Math.PI, 1.5 * Math.PI );

                    var groundMaterial = new THREE.MeshBasicMaterial( { color: 'white', vertexColors: THREE.VertexColors, shading: THREE.NoShading } );

                    groundMaterial.side = THREE.BackSide;

                    groundMaterial.fog = false;

                    groundMaterial.color = new THREE.Color();

                    paintFaces( groundGeometry, radius, data.groundAngle, data.groundColor, false );

                    var ground = new THREE.Mesh( groundGeometry, groundMaterial );

                    scene.add( ground );

				} else if ( /geometry/.exec( data.string ) ) {

					if ( 'Box' === data.nodeType ) {

                        var s = data.size;

						parent.geometry = new THREE.CubeGeometry( s.x, s.y, s.z );

					} else if ( 'Cylinder' === data.nodeType ) {

						parent.geometry = new THREE.CylinderGeometry( data.radius, data.radius, data.height );

					} else if ( 'Cone' === data.nodeType ) {

						parent.geometry = new THREE.CylinderGeometry( data.topRadius, data.bottomRadius, data.height );

					} else if ( 'Sphere' === data.nodeType ) {

						parent.geometry = new THREE.SphereGeometry( data.radius );

					} else if ( 'IndexedFaceSet' === data.nodeType ) {

                        var geometry = new THREE.Geometry();

                        var indexes;

                        for ( var i = 0, j = data.children.length; i < j; i++ ) {

                            var child = data.children[ i ];

                            var vec;

                            if ( 'Coordinate' === child.nodeType ) {

                                for ( var k = 0, l = child.points.length; k < l; k++ ) {

                                    var point = child.points[ k ];

                                    vec = new THREE.Vector3( point.x, point.y, point.z );

                                    geometry.vertices.push( vec );
                                }

                                break;
                            }
                        }

                        var skip = 0;

                        // read this: http://math.hws.edu/eck/cs424/notes2013/16_Threejs_Advanced.html
                        for ( var i = 0, j = data.coordIndex.length; i < j; i++ ) {

                            indexes = data.coordIndex[i];

                            // vrml support multipoint indexed face sets (more then 3 vertices). You must calculate the composing triangles here
                            skip = 0;

                            // todo: this is the time to check if the faces are ordered ccw or not (cw)

                            // Face3 only works with triangles, but IndexedFaceSet allows shapes with more then three vertices, build them of triangles
                            while ( indexes.length >= 3 && skip < ( indexes.length -2 ) ) {

                                var face = new THREE.Face3(
                                    indexes[0],
                                    indexes[skip + 1],
                                    indexes[skip + 2],
                                    null // normal, will be added later
                                    // todo: pass in the color, if a color index is present
                                );

                                skip++;

                                geometry.faces.push( face );

                            }


                        }

                        if ( false === data.solid ) {
                            parent.material.side = THREE.DoubleSide;
                        }

                        // we need to store it on the geometry for use with defines
                        geometry.solid = data.solid;

                        geometry.computeFaceNormals();
                        //geometry.computeVertexNormals(); // does not show
                        geometry.computeBoundingSphere();

                        // see if it's a define
                        if ( /DEF/.exec( data.string ) ) {
                            geometry.name = /DEF (\w+)/.exec( data.string )[ 1 ];
                            defines[ geometry.name ] = geometry;
                        }

                        parent.geometry = geometry;
					}

					return;

				} else if ( /appearance/.exec( data.string ) ) {

					for ( var i = 0; i < data.children.length; i ++ ) {

						var child = data.children[ i ];

						if ( 'Material' === child.nodeType ) {
							var material = new THREE.MeshPhongMaterial();

                            if ( undefined !== child.diffuseColor ) {

                                var d = child.diffuseColor;

                                material.color.setRGB( d.r, d.g, d.b );

                            }

                            if ( undefined !== child.emissiveColor ) {

                                var e = child.emissiveColor;

                                material.emissive.setRGB( e.r, e.g, e.b );

                            }

                            if ( undefined !== child.specularColor ) {

                                var s = child.specularColor;

                                material.specular.setRGB( s.r, s.g, s.b );

                            }

                            if ( undefined !== child.transparency ) {

                                var t = child.transparency;

                                // transparency is opposite of opacity
                                material.opacity = Math.abs( 1 - t );

                                material.transparent = true;

                            }

							if ( /DEF/.exec( data.string ) ) {

								material.name = /DEF (\w+)/.exec( data.string )[ 1 ];

								defines[ material.name ] = material;

							}

							parent.material = material;

                            // material found, stop looping
                            break;
						}

					}

					return;

				}

				for ( var i = 0, l = data.children.length; i < l; i ++ ) {

					var child = data.children[ i ];

					parseNode( data.children[ i ], object );

				}

			}

			parseNode( getTree( lines ), scene );

		};

		var scene = new THREE.Scene();

		var lines = data.split( '\n' );

		var header = lines.shift();

		if ( /V1.0/.exec( header ) ) {

			parseV1( lines, scene );

		} else if ( /V2.0/.exec( header ) ) {

			parseV2( lines, scene );

		}

		return scene;

	}

};

THREE.EventDispatcher.prototype.apply( THREE.VRMLLoader.prototype );