A little better support for PointSet, allthough we would need our own…

… shader to make it better

PointSet.wrl

@@ -0,0 +1,32 @@
+#VRML V2.0 utf8
+
+# This is a very basic PointSet with three points and a different color for each point.
+Transform {
+	children [
+	    Shape {
+            appearance Appearance {
+                material Material {
+                    diffuseColor 1 1 0
+                }
+            }
+            geometry PointSet {
+                coord  Coordinate {
+                    point [
+                        0 1 0,
+                        1 0 0,
+                        0 0 1,
+                    ]
+                }
+                color [
+                    1 0 0,
+                    0 1 0,
+                    0 0 1,
+                ]
+            }
+        }
+	]
+    rotation 0.4 0.2 0.1 0
+    translation -6 2 0
+    scale 4 4 4
+}
+

Renderer/ThreeJs.js

@@ -310,8 +310,11 @@ VrmlParser.Renderer.ThreeJs.prototype = {
           break;
         case 'Shape':
           var isLine = node.has('geometry') && 'IndexedLineSet' === node.geometry.node;
+          var isPoint = node.has('geometry') && 'PointSet' === node.geometry.node;
+
+          object = isLine ? new THREE.Line() : (isPoint ? new THREE.Points({size: 0.01}) : new THREE.Mesh());
+
 
-          object = isLine ? new THREE.Line() : new THREE.Mesh();
 
           if ( node.has('geometry') ) {
             object.geometry = parseNode(node.geometry);
@@ -325,13 +328,15 @@ VrmlParser.Renderer.ThreeJs.prototype = {
 
             if ( appearance.has('material') ) {
               var vrmlMaterial = appearance.material;
+              var material;
 
               // sugar
               vrmlMaterial.has = has;
 
               if ( isLine ) {
+                //scope.log('Line object');
                 // @todo: we use LineBasicMaterial, is this always appropriate for VRML?
-                var material = new THREE.LineBasicMaterial();
+                material = new THREE.LineBasicMaterial();
 
                 if ( vrmlMaterial.has('color') ) {
 
@@ -340,10 +345,30 @@ VrmlParser.Renderer.ThreeJs.prototype = {
                   material.color.setRGB(materialColor.r, materialColor.g, materialColor.b);
 
                 }
+              } else if ( isPoint ) {
+                // points in ThreeJS only support color
+                //scope.log('Points object');
+                //scope.log(vrmlMaterial);
+
+                material = new THREE.PointsMaterial();
+
+                var materialColor
+
+                if ( vrmlMaterial.has('diffuseColor') ) {
+                  materialColor = convertVectorToColor(vrmlMaterial.diffuseColor);
+                }
+                if ( vrmlMaterial.has('emissiveColor') ) {
+                  materialColor = convertVectorToColor(vrmlMaterial.emissiveColor);
+                }
+
+                material.color.setRGB(materialColor.r, materialColor.g, materialColor.b);
+
+                //scope.log(material);
               } else {
+                //scope.log('Mesh object');
 
                 // @todo: we use a MeshPhongMaterial for meshes, but is this always appropriate for VRML?
-                var material = new THREE.MeshPhongMaterial();
+                material = new THREE.MeshPhongMaterial();
 
                 if ( vrmlMaterial.has('diffuseColor') ) {
 
@@ -398,11 +423,11 @@ VrmlParser.Renderer.ThreeJs.prototype = {
             }
 
             if ( 'IndexedFaceSet' === node.geometry.node ) {
-              //if ( false === node.geometry.node.solid ) {
+              if ( false === node.geometry.node.solid ) {
 
-              object.material.side = THREE.DoubleSide;
+                object.material.side = THREE.DoubleSide;
 
-              // }
+              }
             }
 
           }
@@ -624,6 +649,7 @@ VrmlParser.Renderer.ThreeJs.prototype = {
           // @todo: is there a color property to support?
           break;
         case 'PointSet':
+
           var vec;
           var point;
           var object = new THREE.Geometry();
@@ -641,7 +667,21 @@ VrmlParser.Renderer.ThreeJs.prototype = {
             }
 
           }
-          // @todo: support color property
+
+          object.computeBoundingSphere();
+
+          // if ( node.has('color') ) {
+          //   for ( var k = 0, l = node.coord.point.length; k < l; k++ ) {
+          //
+          //     point = node.coord.point[k];
+          //
+          //     vec = new THREE.Vector3(point.x, point.y, point.z);
+          //
+          //     geometry.vertices.push(vec);
+          //
+          //   }
+          // }
+
           break;
         case 'TouchSensor':
           // just explicitly keep the object (by not setting it to false), do nothing else
@@ -671,8 +711,8 @@ VrmlParser.Renderer.ThreeJs.prototype = {
         } else if ( node.has('node') ) {
           object.name = node.node;
         }
-        object.castShadow = true;
-        object.receiveShadow = true;
+        object.castShadow = ! isPoint;
+        object.receiveShadow = ! isPoint;
       }
 
       if ( false !== surroundingGroup ) {

example.html

@@ -54,50 +54,13 @@
 <script src="node_modules/three/examples/js/controls/TrackballControls.js"></script>
 <script src="node_modules/tween.js/src/Tween.js"></script>
 
-<script type="x-shader/x-vertex" id="vertexShader">
 
-      			varying vec3 vWorldPosition;
-
-      			void main() {
-
-      				vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
-      				vWorldPosition = worldPosition.xyz;
-
-      				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-
-      			}
-
-
-
-</script>
-
-<script type="x-shader/x-fragment" id="fragmentShader">
-
-      			uniform vec3 topColor;
-      			uniform vec3 bottomColor;
-      			uniform float offset;
-      			uniform float exponent;
-
-      			varying vec3 vWorldPosition;
-
-      			void main() {
-
-      				float h = normalize( vWorldPosition + offset ).y;
-      				gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( h, exponent ), 0.0 ) ), 1.0 );
-
-      			}
-
-
-
-</script>
 <script>
 
-    var container, stats;
+    var container;
 
     var camera, controls, scene, renderer;
 
-    var cross;
-
     var animation;