From c8ab671d2796d00f2d1719f0cc5273e4609ec64a Mon Sep 17 00:00:00 2001 From: Bart McLeod Date: Tue, 23 Aug 2016 09:01:22 +0200 Subject: [PATCH] A little better support for PointSet, allthough we would need our own shader to make it better --- PointSet.wrl | 32 +++++++++++++++++++++++++ Renderer/ThreeJs.js | 58 ++++++++++++++++++++++++++++++++++++++------- example.html | 39 +----------------------------- 3 files changed, 82 insertions(+), 47 deletions(-) create mode 100644 PointSet.wrl diff --git a/PointSet.wrl b/PointSet.wrl new file mode 100644 index 0000000..ccd0578 --- /dev/null +++ b/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 +} + diff --git a/Renderer/ThreeJs.js b/Renderer/ThreeJs.js index b3d76a5..cf23502 100644 --- a/Renderer/ThreeJs.js +++ b/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 ) { diff --git a/example.html b/example.html index e3d63a1..aca542b 100644 --- a/example.html +++ b/example.html @@ -54,50 +54,13 @@ - - -