diff --git a/examples/jsm/loaders/SVGLoader.js b/examples/jsm/loaders/SVGLoader.js index 756efffb1fd162..12f914b07433a4 100644 --- a/examples/jsm/loaders/SVGLoader.js +++ b/examples/jsm/loaders/SVGLoader.js @@ -1,10 +1,13 @@ import { Box2, BufferGeometry, + Color, + DoubleSide, FileLoader, Float32BufferAttribute, Loader, Matrix3, + MeshBasicMaterial, Path, Shape, ShapePath, @@ -2000,6 +2003,48 @@ class SVGLoader extends Loader { } + /** + * Creates a material for rendering the fill of the given path. + * + * @param {ShapePath} shapePath - The shape path. + * @return {?MeshBasicMaterial} The fill material. `null` if the path has no fill. + */ + static createFillMaterial( shapePath ) { + + const style = shapePath.userData.style; + if ( style.fill === undefined || style.fill === 'none' ) return null; + + return new MeshBasicMaterial( { + color: shapePath.color, + opacity: style.fillOpacity * ( style.opacity || 1 ), + transparent: true, + side: DoubleSide, + depthWrite: false, + } ); + + } + + /** + * Creates a material for rendering the stroke of the given path. + * + * @param {ShapePath} shapePath - The shape path. + * @return {?MeshBasicMaterial} The stroke material. `null` if the path has no stroke. + */ + static createStrokeMaterial( shapePath ) { + + const style = shapePath.userData.style; + if ( style.stroke === undefined || style.stroke === 'none' ) return null; + + return new MeshBasicMaterial( { + color: new Color().setStyle( style.stroke, COLOR_SPACE_SVG ), + opacity: style.strokeOpacity * ( style.opacity || 1 ), + transparent: true, + side: DoubleSide, + depthWrite: false, + } ); + + } + /** * Creates from the given shape path and array of shapes. * diff --git a/examples/webgl_loader_svg.html b/examples/webgl_loader_svg.html index 34d96963246c93..f54681485bb79a 100644 --- a/examples/webgl_loader_svg.html +++ b/examples/webgl_loader_svg.html @@ -173,56 +173,50 @@ for ( const path of data.paths ) { - const fillColor = path.userData.style.fill; + if ( guiData.drawFillShapes ) { - if ( guiData.drawFillShapes && fillColor !== undefined && fillColor !== 'none' ) { + const material = SVGLoader.createFillMaterial( path ); - const material = new THREE.MeshBasicMaterial( { - color: new THREE.Color().setStyle( fillColor ), - opacity: path.userData.style.fillOpacity, - transparent: true, - side: THREE.DoubleSide, - depthWrite: false, - wireframe: guiData.fillShapesWireframe - } ); + if ( material ) { - const shapes = SVGLoader.createShapes( path ); + material.wireframe = guiData.fillShapesWireframe; - for ( const shape of shapes ) { + const shapes = SVGLoader.createShapes( path ); - const geometry = new THREE.ShapeGeometry( shape ); - const mesh = new THREE.Mesh( geometry, material ); - mesh.renderOrder = renderOrder ++; + for ( const shape of shapes ) { - group.add( mesh ); + const geometry = new THREE.ShapeGeometry( shape ); + const mesh = new THREE.Mesh( geometry, material ); + mesh.renderOrder = renderOrder ++; + + group.add( mesh ); + + } } } - const strokeColor = path.userData.style.stroke; + if ( guiData.drawStrokes ) { - if ( guiData.drawStrokes && strokeColor !== undefined && strokeColor !== 'none' ) { + const material = SVGLoader.createStrokeMaterial( path ); - const material = new THREE.MeshBasicMaterial( { - color: new THREE.Color().setStyle( strokeColor ), - opacity: path.userData.style.strokeOpacity, - transparent: true, - side: THREE.DoubleSide, - depthWrite: false, - wireframe: guiData.strokesWireframe - } ); + if ( material ) { - for ( const subPath of path.subPaths ) { + material.wireframe = guiData.strokesWireframe; - const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style ); + for ( const subPath of path.subPaths ) { - if ( geometry ) { + const geometry = SVGLoader.pointsToStroke( subPath.getPoints(), path.userData.style ); - const mesh = new THREE.Mesh( geometry, material ); - mesh.renderOrder = renderOrder ++; + if ( geometry ) { - group.add( mesh ); + const mesh = new THREE.Mesh( geometry, material ); + mesh.renderOrder = renderOrder ++; + + group.add( mesh ); + + } } diff --git a/src/Three.TSL.js b/src/Three.TSL.js index 9eb134670164e2..589b13885fc808 100644 --- a/src/Three.TSL.js +++ b/src/Three.TSL.js @@ -54,7 +54,6 @@ export const anisotropyT = TSL.anisotropyT; export const any = TSL.any; export const append = TSL.append; export const array = TSL.array; -export const arrayBuffer = TSL.arrayBuffer; export const asin = TSL.asin; export const asinh = TSL.asinh; export const assign = TSL.assign; @@ -519,7 +518,6 @@ export const stepElement = TSL.stepElement; export const storage = TSL.storage; export const storageBarrier = TSL.storageBarrier; export const storageTexture = TSL.storageTexture; -export const string = TSL.string; export const struct = TSL.struct; export const sub = TSL.sub; export const subgroupAdd = TSL.subgroupAdd; diff --git a/src/nodes/tsl/TSLCore.js b/src/nodes/tsl/TSLCore.js index 10d5b5bbfa587f..8494efedbd3acb 100644 --- a/src/nodes/tsl/TSLCore.js +++ b/src/nodes/tsl/TSLCore.js @@ -1192,9 +1192,6 @@ export const mat2 = new ConvertType( 'mat2' ); export const mat3 = new ConvertType( 'mat3' ); export const mat4 = new ConvertType( 'mat4' ); -export const string = ( value = '' ) => new ConstNode( value, 'string' ); -export const arrayBuffer = ( value ) => new ConstNode( value, 'ArrayBuffer' ); - addMethodChaining( 'toColor', color ); addMethodChaining( 'toFloat', float ); addMethodChaining( 'toInt', int );