From 817821bde54c3b6fb1d5dc065380c56d6801b1ea Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 16 Oct 2017 16:08:58 +0200 Subject: [PATCH 01/14] test --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index a9bb2cf..7d787be 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "test": "echo \"Error: no test specified\" && exit 1" }, "dependencies": { + "_PocketSVG": "https://github.com/pocketsvg/PocketSVG", "fast-deep-equal": "^1.0.0", "lodash": "^4.17.4", "prop-types": "^15.5.7", From 52f4de652b989c41456d7fb913c8e872e7348927 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 16 Oct 2017 16:22:01 +0200 Subject: [PATCH 02/14] test --- ios/RCTARKit.xcodeproj/project.pbxproj | 69 ++++++++++++++++++++++++++ yarn.lock | 4 ++ 2 files changed, 73 insertions(+) diff --git a/ios/RCTARKit.xcodeproj/project.pbxproj b/ios/RCTARKit.xcodeproj/project.pbxproj index aa4ab10..fba7ef7 100644 --- a/ios/RCTARKit.xcodeproj/project.pbxproj +++ b/ios/RCTARKit.xcodeproj/project.pbxproj @@ -16,9 +16,27 @@ 10ED47A71F38BC01004DF043 /* DeviceMotion.m in Sources */ = {isa = PBXBuildFile; fileRef = 10ED47A61F38BC00004DF043 /* DeviceMotion.m */; }; 10FEF6141F774C9000EC21AE /* RCTARKitIO.m in Sources */ = {isa = PBXBuildFile; fileRef = 10FEF6101F774C8F00EC21AE /* RCTARKitIO.m */; }; 10FEF6151F774C9000EC21AE /* RCTARKitNodes.m in Sources */ = {isa = PBXBuildFile; fileRef = 10FEF6121F774C9000EC21AE /* RCTARKitNodes.m */; }; + B13FF7611F94F72400A6C92B /* PocketSVG.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B13FF75D1F94F71500A6C92B /* PocketSVG.framework */; }; B3E7B58A1CC2AC0600A0062D /* RCTARKit.m in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* RCTARKit.m */; }; /* End PBXBuildFile section */ +/* Begin PBXContainerItemProxy section */ + B13FF75C1F94F71500A6C92B /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = C79800BB1A21CB5300380860; + remoteInfo = "PocketSVG (iOS)"; + }; + B13FF75E1F94F71500A6C92B /* PBXContainerItemProxy */ = { + isa = PBXContainerItemProxy; + containerPortal = B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */; + proxyType = 2; + remoteGlobalIDString = C79800F51A21CDFD00380860; + remoteInfo = "PocketSVG (Mac)"; + }; +/* End PBXContainerItemProxy section */ + /* Begin PBXCopyFilesBuildPhase section */ 58B511D91A9E6C8500147676 /* CopyFiles */ = { isa = PBXCopyFilesBuildPhase; @@ -52,6 +70,7 @@ 10FEF6121F774C9000EC21AE /* RCTARKitNodes.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RCTARKitNodes.m; sourceTree = ""; }; 10FEF6131F774C9000EC21AE /* RCTARKitDelegate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTARKitDelegate.h; sourceTree = ""; }; 134814201AA4EA6300B7C361 /* libRCTARKit.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTARKit.a; sourceTree = BUILT_PRODUCTS_DIR; }; + B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = PocketSVG.xcodeproj; path = ../_PocketSVG/PocketSVG.xcodeproj; sourceTree = ""; }; B3E7B5881CC2AC0600A0062D /* RCTARKit.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTARKit.h; sourceTree = ""; }; B3E7B5891CC2AC0600A0062D /* RCTARKit.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTARKit.m; sourceTree = ""; }; /* End PBXFileReference section */ @@ -61,6 +80,7 @@ isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( + B13FF7611F94F72400A6C92B /* PocketSVG.framework in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -91,6 +111,7 @@ 58B511D21A9E6C8500147676 = { isa = PBXGroup; children = ( + B11601B61F94F34700030B9A /* Libraries */, 106999E21F3EC2FB00032829 /* components */, 10ED47A51F38BC00004DF043 /* DeviceMotion.h */, 10ED47A61F38BC00004DF043 /* DeviceMotion.m */, @@ -108,7 +129,32 @@ 105F124C1F7C0718006D4BA3 /* RCTConvert+ARKit.h */, 105F124D1F7C0718006D4BA3 /* RCTConvert+ARKit.m */, 134814211AA4EA7D00B7C361 /* Products */, + B13FF7601F94F72400A6C92B /* Frameworks */, + ); + sourceTree = ""; + }; + B11601B61F94F34700030B9A /* Libraries */ = { + isa = PBXGroup; + children = ( + B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */, ); + name = Libraries; + sourceTree = ""; + }; + B13FF7581F94F71500A6C92B /* Products */ = { + isa = PBXGroup; + children = ( + B13FF75D1F94F71500A6C92B /* PocketSVG.framework */, + B13FF75F1F94F71500A6C92B /* PocketSVG.framework */, + ); + name = Products; + sourceTree = ""; + }; + B13FF7601F94F72400A6C92B /* Frameworks */ = { + isa = PBXGroup; + children = ( + ); + name = Frameworks; sourceTree = ""; }; /* End PBXGroup section */ @@ -155,6 +201,12 @@ mainGroup = 58B511D21A9E6C8500147676; productRefGroup = 58B511D21A9E6C8500147676; projectDirPath = ""; + projectReferences = ( + { + ProductGroup = B13FF7581F94F71500A6C92B /* Products */; + ProjectRef = B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */; + }, + ); projectRoot = ""; targets = ( 58B511DA1A9E6C8500147676 /* RCTARKit */, @@ -162,6 +214,23 @@ }; /* End PBXProject section */ +/* Begin PBXReferenceProxy section */ + B13FF75D1F94F71500A6C92B /* PocketSVG.framework */ = { + isa = PBXReferenceProxy; + fileType = wrapper.framework; + path = PocketSVG.framework; + remoteRef = B13FF75C1F94F71500A6C92B /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; + B13FF75F1F94F71500A6C92B /* PocketSVG.framework */ = { + isa = PBXReferenceProxy; + fileType = wrapper.framework; + path = PocketSVG.framework; + remoteRef = B13FF75E1F94F71500A6C92B /* PBXContainerItemProxy */; + sourceTree = BUILT_PRODUCTS_DIR; + }; +/* End PBXReferenceProxy section */ + /* Begin PBXSourcesBuildPhase section */ 58B511D71A9E6C8500147676 /* Sources */ = { isa = PBXSourcesBuildPhase; diff --git a/yarn.lock b/yarn.lock index 3655f10..30fd06b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,10 @@ # yarn lockfile v1 +"_PocketSVG@https://github.com/pocketsvg/PocketSVG": + version "0.0.0" + resolved "https://github.com/pocketsvg/PocketSVG#e6d84ddeb11f99c4420e354ebb9fd34db2cf507a" + acorn-jsx@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b" From 75a6372cbcfe26e378adfa315def7aad7aee9d91 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 16 Oct 2017 16:25:27 +0200 Subject: [PATCH 03/14] update --- ios/RCTARKit.xcodeproj/project.pbxproj | 40 +++++++++++++------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/ios/RCTARKit.xcodeproj/project.pbxproj b/ios/RCTARKit.xcodeproj/project.pbxproj index fba7ef7..d11b2f3 100644 --- a/ios/RCTARKit.xcodeproj/project.pbxproj +++ b/ios/RCTARKit.xcodeproj/project.pbxproj @@ -16,21 +16,21 @@ 10ED47A71F38BC01004DF043 /* DeviceMotion.m in Sources */ = {isa = PBXBuildFile; fileRef = 10ED47A61F38BC00004DF043 /* DeviceMotion.m */; }; 10FEF6141F774C9000EC21AE /* RCTARKitIO.m in Sources */ = {isa = PBXBuildFile; fileRef = 10FEF6101F774C8F00EC21AE /* RCTARKitIO.m */; }; 10FEF6151F774C9000EC21AE /* RCTARKitNodes.m in Sources */ = {isa = PBXBuildFile; fileRef = 10FEF6121F774C9000EC21AE /* RCTARKitNodes.m */; }; - B13FF7611F94F72400A6C92B /* PocketSVG.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B13FF75D1F94F71500A6C92B /* PocketSVG.framework */; }; + B14F3AF71F94F8BA00B73842 /* PocketSVG.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B14F3AF41F94F8B100B73842 /* PocketSVG.framework */; }; B3E7B58A1CC2AC0600A0062D /* RCTARKit.m in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* RCTARKit.m */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ - B13FF75C1F94F71500A6C92B /* PBXContainerItemProxy */ = { + B14F3AF31F94F8B100B73842 /* PBXContainerItemProxy */ = { isa = PBXContainerItemProxy; - containerPortal = B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */; + containerPortal = B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */; proxyType = 2; remoteGlobalIDString = C79800BB1A21CB5300380860; remoteInfo = "PocketSVG (iOS)"; }; - B13FF75E1F94F71500A6C92B /* PBXContainerItemProxy */ = { + B14F3AF51F94F8B100B73842 /* PBXContainerItemProxy */ = { isa = PBXContainerItemProxy; - containerPortal = B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */; + containerPortal = B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */; proxyType = 2; remoteGlobalIDString = C79800F51A21CDFD00380860; remoteInfo = "PocketSVG (Mac)"; @@ -70,7 +70,7 @@ 10FEF6121F774C9000EC21AE /* RCTARKitNodes.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RCTARKitNodes.m; sourceTree = ""; }; 10FEF6131F774C9000EC21AE /* RCTARKitDelegate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTARKitDelegate.h; sourceTree = ""; }; 134814201AA4EA6300B7C361 /* libRCTARKit.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTARKit.a; sourceTree = BUILT_PRODUCTS_DIR; }; - B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = PocketSVG.xcodeproj; path = ../_PocketSVG/PocketSVG.xcodeproj; sourceTree = ""; }; + B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = PocketSVG.xcodeproj; path = ../../_PocketSVG/PocketSVG.xcodeproj; sourceTree = ""; }; B3E7B5881CC2AC0600A0062D /* RCTARKit.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTARKit.h; sourceTree = ""; }; B3E7B5891CC2AC0600A0062D /* RCTARKit.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTARKit.m; sourceTree = ""; }; /* End PBXFileReference section */ @@ -80,7 +80,7 @@ isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( - B13FF7611F94F72400A6C92B /* PocketSVG.framework in Frameworks */, + B14F3AF71F94F8BA00B73842 /* PocketSVG.framework in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -136,25 +136,25 @@ B11601B61F94F34700030B9A /* Libraries */ = { isa = PBXGroup; children = ( - B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */, + B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */, ); name = Libraries; sourceTree = ""; }; - B13FF7581F94F71500A6C92B /* Products */ = { + B13FF7601F94F72400A6C92B /* Frameworks */ = { isa = PBXGroup; children = ( - B13FF75D1F94F71500A6C92B /* PocketSVG.framework */, - B13FF75F1F94F71500A6C92B /* PocketSVG.framework */, ); - name = Products; + name = Frameworks; sourceTree = ""; }; - B13FF7601F94F72400A6C92B /* Frameworks */ = { + B14F3AEF1F94F8B100B73842 /* Products */ = { isa = PBXGroup; children = ( + B14F3AF41F94F8B100B73842 /* PocketSVG.framework */, + B14F3AF61F94F8B100B73842 /* PocketSVG.framework */, ); - name = Frameworks; + name = Products; sourceTree = ""; }; /* End PBXGroup section */ @@ -203,8 +203,8 @@ projectDirPath = ""; projectReferences = ( { - ProductGroup = B13FF7581F94F71500A6C92B /* Products */; - ProjectRef = B13FF7571F94F71500A6C92B /* PocketSVG.xcodeproj */; + ProductGroup = B14F3AEF1F94F8B100B73842 /* Products */; + ProjectRef = B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */; }, ); projectRoot = ""; @@ -215,18 +215,18 @@ /* End PBXProject section */ /* Begin PBXReferenceProxy section */ - B13FF75D1F94F71500A6C92B /* PocketSVG.framework */ = { + B14F3AF41F94F8B100B73842 /* PocketSVG.framework */ = { isa = PBXReferenceProxy; fileType = wrapper.framework; path = PocketSVG.framework; - remoteRef = B13FF75C1F94F71500A6C92B /* PBXContainerItemProxy */; + remoteRef = B14F3AF31F94F8B100B73842 /* PBXContainerItemProxy */; sourceTree = BUILT_PRODUCTS_DIR; }; - B13FF75F1F94F71500A6C92B /* PocketSVG.framework */ = { + B14F3AF61F94F8B100B73842 /* PocketSVG.framework */ = { isa = PBXReferenceProxy; fileType = wrapper.framework; path = PocketSVG.framework; - remoteRef = B13FF75E1F94F71500A6C92B /* PBXContainerItemProxy */; + remoteRef = B14F3AF51F94F8B100B73842 /* PBXContainerItemProxy */; sourceTree = BUILT_PRODUCTS_DIR; }; /* End PBXReferenceProxy section */ From 9786239fa75e15991346b421fe283a7415affa82 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 16 Oct 2017 23:09:44 +0200 Subject: [PATCH 04/14] wip --- ios/RCTARKit.xcodeproj/project.pbxproj | 2 ++ ios/RCTConvert+ARKit.h | 1 + ios/RCTConvert+ARKit.m | 16 ++++++++++++++++ ios/components/ARGeosManager.m | 5 +++++ 4 files changed, 24 insertions(+) diff --git a/ios/RCTARKit.xcodeproj/project.pbxproj b/ios/RCTARKit.xcodeproj/project.pbxproj index d11b2f3..867f076 100644 --- a/ios/RCTARKit.xcodeproj/project.pbxproj +++ b/ios/RCTARKit.xcodeproj/project.pbxproj @@ -338,6 +338,7 @@ "$(SRCROOT)/../../react-native-arcl/ios", ../../../ios/Pods/Headers/Public/, ../../../ios/Pods/Headers/Public/React, + "$(SRCROOT)/../../_PocketSVG/**", ); IPHONEOS_DEPLOYMENT_TARGET = 11.0; LIBRARY_SEARCH_PATHS = "$(inherited)"; @@ -359,6 +360,7 @@ "$(SRCROOT)/../../react-native-arcl/ios", ../../../ios/Pods/Headers/Public/, ../../../ios/Pods/Headers/Public/React, + "$(SRCROOT)/../../_PocketSVG/**", ); IPHONEOS_DEPLOYMENT_TARGET = 11.0; LIBRARY_SEARCH_PATHS = "$(inherited)"; diff --git a/ios/RCTConvert+ARKit.h b/ios/RCTConvert+ARKit.h index 0576ed0..7a122ce 100644 --- a/ios/RCTConvert+ARKit.h +++ b/ios/RCTConvert+ARKit.h @@ -31,6 +31,7 @@ + (SCNTorus *)SCNTorus:(id)json; + (SCNCapsule *)SCNCapsule:(id)json; + (SCNPlane *)SCNPlane:(id)json; ++ (SCNShape * )SCNShape:(id)json; + (SCNTextNode *)SCNTextNode:(id)json; diff --git a/ios/RCTConvert+ARKit.m b/ios/RCTConvert+ARKit.m index 91a22c2..768d011 100644 --- a/ios/RCTConvert+ARKit.m +++ b/ios/RCTConvert+ARKit.m @@ -7,6 +7,7 @@ // #import "RCTConvert+ARKit.h" +#import "SVGBezierPath.h" @implementation RCTConvert (ARKit) @@ -167,6 +168,21 @@ + (SCNPlane *)SCNPlane:(id)json { return geometry; } ++ (SCNShape * )SCNShape:(id)json { + NSDictionary* shape = json[@"shape"]; + NSString * pathString =shape[@"path"]; + + id path = [SVGBezierPath pathsFromSVGString:pathString]; + + CGFloat extrusion = [shape[@"extrusion"] floatValue]; + SCNPlane *geometry = [SCNShape shapeWithPath:path extrusionDepth:extrusion]; + + SCNMaterial *material = [self SCNMaterial:json[@"material"]]; + + geometry.materials = @[material]; + return geometry; +} + + (SCNTextNode *)SCNTextNode:(id)json { // init SCNText diff --git a/ios/components/ARGeosManager.m b/ios/components/ARGeosManager.m index 754cc4b..1157f35 100644 --- a/ios/components/ARGeosManager.m +++ b/ios/components/ARGeosManager.m @@ -58,6 +58,11 @@ @implementation ARGeosManager [[RCTARKitNodes sharedInstance] addNodeToScene:node inReferenceFrame:frame]; } +RCT_EXPORT_METHOD(addShape:(SCNShape *)geometry node:(SCNNode *)node frame:(NSString *)frame) { + node.geometry = geometry; + [[RCTARKitNodes sharedInstance] addNodeToScene:node inReferenceFrame:frame]; +} + RCT_EXPORT_METHOD(unmount:(NSString *)identifier) { [[RCTARKitNodes sharedInstance] removeNodeForKey:identifier]; } From 775608cc8b0ed68a7987b87e33c1f5575c890bd1 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 16 Oct 2017 23:36:56 +0200 Subject: [PATCH 05/14] wip --- components/ARShape.js | 12 ++++++++++ components/lib/createArComponent.js | 19 ++++++++-------- index.js | 4 +++- ios/RCTARKit.xcodeproj/project.pbxproj | 14 ++++++++++-- ios/RCTConvert+ARKit.h | 1 + ios/RCTConvert+ARKit.m | 31 ++++++++++++++++++++++++++ ios/components/ARGeosManager.m | 5 +++++ 7 files changed, 74 insertions(+), 12 deletions(-) create mode 100644 components/ARShape.js diff --git a/components/ARShape.js b/components/ARShape.js new file mode 100644 index 0000000..0b38f16 --- /dev/null +++ b/components/ARShape.js @@ -0,0 +1,12 @@ +import PropTypes from 'prop-types'; + +import createArComponent from './lib/createArComponent'; + +const ARShape = createArComponent('addShape', { + shape: PropTypes.shape({ + extrusion: PropTypes.number, + path: PropTypes.string + }) +}); + +module.exports = ARShape; diff --git a/components/lib/createArComponent.js b/components/lib/createArComponent.js index f48ecd7..df09ebe 100644 --- a/components/lib/createArComponent.js +++ b/components/lib/createArComponent.js @@ -15,7 +15,7 @@ import { orientation, position, rotation, - transition, + transition } from './propTypes'; import { processColorInMaterial } from './parseColor'; import generateId from './generateId'; @@ -25,14 +25,15 @@ const NODE_PROPS = [ 'position', 'eulerAngles', 'rotation', + 'scale', 'orientation', - 'transition', + 'transition' ]; const KEYS_THAT_NEED_REMOUNT = ['material', 'shape', 'model']; const nodeProps = (id, props) => ({ id, - ...pick(props, NODE_PROPS), + ...pick(props, NODE_PROPS) }); export default (mountConfig, propTypes = {}) => { @@ -40,11 +41,11 @@ export default (mountConfig, propTypes = {}) => { typeof mountConfig === 'string' ? { shape: props.shape, - material: processColorInMaterial(props.material), + material: processColorInMaterial(props.material) } : { ...pick(props, mountConfig.pick), - material: processColorInMaterial(props.material), + material: processColorInMaterial(props.material) }; const mountFunc = @@ -56,7 +57,7 @@ export default (mountConfig, propTypes = {}) => { mountFunc( getShapeAndMaterialProps(props), nodeProps(id, props), - props.frame, + props.frame ); }; @@ -71,7 +72,7 @@ export default (mountConfig, propTypes = {}) => { componentWillUpdate(props) { const changedKeys = filter( keys(this.props), - key => !isDeepEqual(props[key], this.props[key]), + key => !isDeepEqual(props[key], this.props[key]) ); if (isEmpty(changedKeys)) { @@ -87,7 +88,7 @@ export default (mountConfig, propTypes = {}) => { // always include transition ARGeosManager.update( this.identifier, - pick(props, ['transition', ...changedKeys]), + pick(props, ['transition', ...changedKeys]) ); } } @@ -108,7 +109,7 @@ export default (mountConfig, propTypes = {}) => { rotation, orientation, material, - ...propTypes, + ...propTypes }; return ARComponent; diff --git a/index.js b/index.js index d54139e..e832bb3 100644 --- a/index.js +++ b/index.js @@ -21,6 +21,7 @@ import ARText from './components/ARText'; import ARModel from './components/ARModel'; import ARSprite from './components/ARSprite'; import ARGroup from './components/ARGroup'; +import ARShape from './components/ARShape'; ARKit.Box = ARBox; ARKit.Sphere = ARSphere; @@ -35,6 +36,7 @@ ARKit.Text = ARText; ARKit.Model = ARModel; ARKit.Sprite = ARSprite; ARKit.Group = ARGroup; +ARKit.Shape = ARShape; module.exports = { ARKit, @@ -50,5 +52,5 @@ module.exports = { ARPlane, ARText, ARModel, - ARGroup, + ARGroup }; diff --git a/ios/RCTARKit.xcodeproj/project.pbxproj b/ios/RCTARKit.xcodeproj/project.pbxproj index d11b2f3..2167f79 100644 --- a/ios/RCTARKit.xcodeproj/project.pbxproj +++ b/ios/RCTARKit.xcodeproj/project.pbxproj @@ -16,7 +16,6 @@ 10ED47A71F38BC01004DF043 /* DeviceMotion.m in Sources */ = {isa = PBXBuildFile; fileRef = 10ED47A61F38BC00004DF043 /* DeviceMotion.m */; }; 10FEF6141F774C9000EC21AE /* RCTARKitIO.m in Sources */ = {isa = PBXBuildFile; fileRef = 10FEF6101F774C8F00EC21AE /* RCTARKitIO.m */; }; 10FEF6151F774C9000EC21AE /* RCTARKitNodes.m in Sources */ = {isa = PBXBuildFile; fileRef = 10FEF6121F774C9000EC21AE /* RCTARKitNodes.m */; }; - B14F3AF71F94F8BA00B73842 /* PocketSVG.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B14F3AF41F94F8B100B73842 /* PocketSVG.framework */; }; B3E7B58A1CC2AC0600A0062D /* RCTARKit.m in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* RCTARKit.m */; }; /* End PBXBuildFile section */ @@ -47,6 +46,15 @@ ); runOnlyForDeploymentPostprocessing = 0; }; + B14C363A1F9504D70047CB67 /* CopyFiles */ = { + isa = PBXCopyFilesBuildPhase; + buildActionMask = 2147483647; + dstPath = ""; + dstSubfolderSpec = 10; + files = ( + ); + runOnlyForDeploymentPostprocessing = 0; + }; /* End PBXCopyFilesBuildPhase section */ /* Begin PBXFileReference section */ @@ -80,7 +88,6 @@ isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( - B14F3AF71F94F8BA00B73842 /* PocketSVG.framework in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -167,6 +174,7 @@ 58B511D71A9E6C8500147676 /* Sources */, 58B511D81A9E6C8500147676 /* Frameworks */, 58B511D91A9E6C8500147676 /* CopyFiles */, + B14C363A1F9504D70047CB67 /* CopyFiles */, ); buildRules = ( ); @@ -338,6 +346,7 @@ "$(SRCROOT)/../../react-native-arcl/ios", ../../../ios/Pods/Headers/Public/, ../../../ios/Pods/Headers/Public/React, + "$(SRCROOT)/../../_PocketSVG/**", ); IPHONEOS_DEPLOYMENT_TARGET = 11.0; LIBRARY_SEARCH_PATHS = "$(inherited)"; @@ -359,6 +368,7 @@ "$(SRCROOT)/../../react-native-arcl/ios", ../../../ios/Pods/Headers/Public/, ../../../ios/Pods/Headers/Public/React, + "$(SRCROOT)/../../_PocketSVG/**", ); IPHONEOS_DEPLOYMENT_TARGET = 11.0; LIBRARY_SEARCH_PATHS = "$(inherited)"; diff --git a/ios/RCTConvert+ARKit.h b/ios/RCTConvert+ARKit.h index 0576ed0..7a122ce 100644 --- a/ios/RCTConvert+ARKit.h +++ b/ios/RCTConvert+ARKit.h @@ -31,6 +31,7 @@ + (SCNTorus *)SCNTorus:(id)json; + (SCNCapsule *)SCNCapsule:(id)json; + (SCNPlane *)SCNPlane:(id)json; ++ (SCNShape * )SCNShape:(id)json; + (SCNTextNode *)SCNTextNode:(id)json; diff --git a/ios/RCTConvert+ARKit.m b/ios/RCTConvert+ARKit.m index 91a22c2..a38eb45 100644 --- a/ios/RCTConvert+ARKit.m +++ b/ios/RCTConvert+ARKit.m @@ -7,6 +7,7 @@ // #import "RCTConvert+ARKit.h" +#import "SVGBezierPath.h" @implementation RCTConvert (ARKit) @@ -167,6 +168,30 @@ + (SCNPlane *)SCNPlane:(id)json { return geometry; } ++ (SCNShape * )SCNShape:(id)json { + NSDictionary* shape = json[@"shape"]; + NSString * pathString =shape[@"path"]; + + NSArray * paths = [SVGBezierPath pathsFromSVGString:pathString]; + SVGBezierPath * fullPath; + for(SVGBezierPath *path in paths) { + if(!fullPath) { + fullPath = path; + } else { + [fullPath appendPath:path]; + } + } + + fullPath.flatness = 0.01; + CGFloat extrusion = [shape[@"extrusion"] floatValue]; + SCNShape *geometry = [SCNShape shapeWithPath:fullPath extrusionDepth:extrusion]; + + SCNMaterial *material = [self SCNMaterial:json[@"material"]]; + material.doubleSided = YES; + geometry.materials = @[material]; + return geometry; +} + + (SCNTextNode *)SCNTextNode:(id)json { // init SCNText @@ -265,6 +290,12 @@ + (void)setNodeProperties:(SCNNode *)node properties:(id)json { node.position = [self SCNVector3:json[@"position"]]; } + if (json[@"scale"]) { + CGFloat scale = [json[@"scale"] floatValue]; + node.scale = SCNVector3Make(scale, scale, scale); + + } + if (json[@"eulerAngles"]) { node.eulerAngles = [self SCNVector3:json[@"eulerAngles"]]; } diff --git a/ios/components/ARGeosManager.m b/ios/components/ARGeosManager.m index 754cc4b..1157f35 100644 --- a/ios/components/ARGeosManager.m +++ b/ios/components/ARGeosManager.m @@ -58,6 +58,11 @@ @implementation ARGeosManager [[RCTARKitNodes sharedInstance] addNodeToScene:node inReferenceFrame:frame]; } +RCT_EXPORT_METHOD(addShape:(SCNShape *)geometry node:(SCNNode *)node frame:(NSString *)frame) { + node.geometry = geometry; + [[RCTARKitNodes sharedInstance] addNodeToScene:node inReferenceFrame:frame]; +} + RCT_EXPORT_METHOD(unmount:(NSString *)identifier) { [[RCTARKitNodes sharedInstance] removeNodeForKey:identifier]; } From c74b021ec5a8ca17c1015c92953cf6ac54793b10 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 11:02:57 +0200 Subject: [PATCH 06/14] fix crash in onFeaturesDetected --- ios/RCTARKit.m | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ios/RCTARKit.m b/ios/RCTARKit.m index 8d6b2b6..393e182 100644 --- a/ios/RCTARKit.m +++ b/ios/RCTARKit.m @@ -451,10 +451,11 @@ - (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame { }]; } - + if(self.onFeaturesDetected) { self.onFeaturesDetected(@{ @"featurePoints":featurePoints }); + } }); } } From 5049bfd9af79df6cd6a246b9d37fd7f8d9c16d83 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 11:38:06 +0200 Subject: [PATCH 07/14] improve --- ios/RCTARKit.m | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/ios/RCTARKit.m b/ios/RCTARKit.m index 393e182..9abc35b 100644 --- a/ios/RCTARKit.m +++ b/ios/RCTARKit.m @@ -435,26 +435,27 @@ - (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame { } } if (self.onFeaturesDetected) { + NSMutableArray * featurePoints = [NSMutableArray array]; + for (int i = 0; i < frame.rawFeaturePoints.count; i++) { + vector_float3 point = frame.rawFeaturePoints.points[i]; + + NSString * pointId = [NSString stringWithFormat:@"featurepoint_%lld",frame.rawFeaturePoints.identifiers[i]]; + + [featurePoints addObject:@{ + @"x": @(point[0]), + @"y": @(point[1]), + @"z": @(point[2]), + @"id":pointId, + }]; + + } dispatch_async(dispatch_get_main_queue(), ^{ - NSMutableArray * featurePoints = [NSMutableArray array]; - for (int i = 0; i < frame.rawFeaturePoints.count; i++) { - vector_float3 point = frame.rawFeaturePoints.points[i]; - - NSString * pointId = [NSString stringWithFormat:@"featurepoint_%lld",frame.rawFeaturePoints.identifiers[i]]; - - [featurePoints addObject:@{ - @"x": @(point[0]), - @"y": @(point[1]), - @"z": @(point[2]), - @"id":pointId, - }]; - - } + if(self.onFeaturesDetected) { - self.onFeaturesDetected(@{ - @"featurePoints":featurePoints - }); + self.onFeaturesDetected(@{ + @"featurePoints":featurePoints + }); } }); } From d543c5cddc5882f32ac5cbcc8a4a1404ba0ddb3e Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 11:02:57 +0200 Subject: [PATCH 08/14] fix crash in onFeaturesDetected --- ios/RCTARKit.m | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ios/RCTARKit.m b/ios/RCTARKit.m index 8d6b2b6..393e182 100644 --- a/ios/RCTARKit.m +++ b/ios/RCTARKit.m @@ -451,10 +451,11 @@ - (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame { }]; } - + if(self.onFeaturesDetected) { self.onFeaturesDetected(@{ @"featurePoints":featurePoints }); + } }); } } From aea7a5a0d9b535cffc18f5e619538472a31bd5de Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 11:38:06 +0200 Subject: [PATCH 09/14] improve --- ios/RCTARKit.m | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/ios/RCTARKit.m b/ios/RCTARKit.m index 393e182..9abc35b 100644 --- a/ios/RCTARKit.m +++ b/ios/RCTARKit.m @@ -435,26 +435,27 @@ - (void)session:(ARSession *)session didUpdateFrame:(ARFrame *)frame { } } if (self.onFeaturesDetected) { + NSMutableArray * featurePoints = [NSMutableArray array]; + for (int i = 0; i < frame.rawFeaturePoints.count; i++) { + vector_float3 point = frame.rawFeaturePoints.points[i]; + + NSString * pointId = [NSString stringWithFormat:@"featurepoint_%lld",frame.rawFeaturePoints.identifiers[i]]; + + [featurePoints addObject:@{ + @"x": @(point[0]), + @"y": @(point[1]), + @"z": @(point[2]), + @"id":pointId, + }]; + + } dispatch_async(dispatch_get_main_queue(), ^{ - NSMutableArray * featurePoints = [NSMutableArray array]; - for (int i = 0; i < frame.rawFeaturePoints.count; i++) { - vector_float3 point = frame.rawFeaturePoints.points[i]; - - NSString * pointId = [NSString stringWithFormat:@"featurepoint_%lld",frame.rawFeaturePoints.identifiers[i]]; - - [featurePoints addObject:@{ - @"x": @(point[0]), - @"y": @(point[1]), - @"z": @(point[2]), - @"id":pointId, - }]; - - } + if(self.onFeaturesDetected) { - self.onFeaturesDetected(@{ - @"featurePoints":featurePoints - }); + self.onFeaturesDetected(@{ + @"featurePoints":featurePoints + }); } }); } From 9225b47994e012cab8397a25cebaaa6c12f8dd92 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 13:01:43 +0200 Subject: [PATCH 10/14] update installation instruction --- README.md | 9 ++-- ios/RCTARKit.xcodeproj/project.pbxproj | 63 ++------------------------ 2 files changed, 10 insertions(+), 62 deletions(-) diff --git a/README.md b/README.md index 726bfaa..89edfe0 100644 --- a/README.md +++ b/README.md @@ -23,15 +23,18 @@ There is a Slack group that anyone can join for help / support / general questio `$ react-native link react-native-arkit` +! Currently automatic installation does not work as PocketSVG is missing. Follow the manual installation + ### Manual installation #### iOS 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` -2. Go to `node_modules` ➜ `react-native-arkit` and add `RCTARKit.xcodeproj` -3. In XCode, in the project navigator, select your project. Add `libRCTARKit.a` to your project's `Build Phases` ➜ `Link Binary With Libraries` -4. Run your project (`Cmd+R`)< +2. Go to `node_modules` ➜ add `react-native-arkit/RCTARKit.xcodeproj` and `_PocketSVG/_PocketSVG.xcodeproj` +3. In XCode, in the project navigator, select your project. Add `libRCTARKit.a` `and PocketSVG.framework` to your project's `Build Phases` ➜ `Link Binary With Libraries` +4. In Tab `General` ➜ `Embedded Binaries` ➜ `+` ➜ Add `PocketSVG.framework ios` +5. Run your project (`Cmd+R`)< ## Usage diff --git a/ios/RCTARKit.xcodeproj/project.pbxproj b/ios/RCTARKit.xcodeproj/project.pbxproj index 2167f79..b180ffd 100644 --- a/ios/RCTARKit.xcodeproj/project.pbxproj +++ b/ios/RCTARKit.xcodeproj/project.pbxproj @@ -19,23 +19,6 @@ B3E7B58A1CC2AC0600A0062D /* RCTARKit.m in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* RCTARKit.m */; }; /* End PBXBuildFile section */ -/* Begin PBXContainerItemProxy section */ - B14F3AF31F94F8B100B73842 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = C79800BB1A21CB5300380860; - remoteInfo = "PocketSVG (iOS)"; - }; - B14F3AF51F94F8B100B73842 /* PBXContainerItemProxy */ = { - isa = PBXContainerItemProxy; - containerPortal = B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */; - proxyType = 2; - remoteGlobalIDString = C79800F51A21CDFD00380860; - remoteInfo = "PocketSVG (Mac)"; - }; -/* End PBXContainerItemProxy section */ - /* Begin PBXCopyFilesBuildPhase section */ 58B511D91A9E6C8500147676 /* CopyFiles */ = { isa = PBXCopyFilesBuildPhase; @@ -78,7 +61,8 @@ 10FEF6121F774C9000EC21AE /* RCTARKitNodes.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RCTARKitNodes.m; sourceTree = ""; }; 10FEF6131F774C9000EC21AE /* RCTARKitDelegate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTARKitDelegate.h; sourceTree = ""; }; 134814201AA4EA6300B7C361 /* libRCTARKit.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTARKit.a; sourceTree = BUILT_PRODUCTS_DIR; }; - B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = PocketSVG.xcodeproj; path = ../../_PocketSVG/PocketSVG.xcodeproj; sourceTree = ""; }; + B14C36631F960C500047CB67 /* PocketSVG.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = PocketSVG.framework; sourceTree = BUILT_PRODUCTS_DIR; }; + B14C36651F960C6E0047CB67 /* PocketSVG.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = PocketSVG.framework; sourceTree = BUILT_PRODUCTS_DIR; }; B3E7B5881CC2AC0600A0062D /* RCTARKit.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTARKit.h; sourceTree = ""; }; B3E7B5891CC2AC0600A0062D /* RCTARKit.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTARKit.m; sourceTree = ""; }; /* End PBXFileReference section */ @@ -118,7 +102,6 @@ 58B511D21A9E6C8500147676 = { isa = PBXGroup; children = ( - B11601B61F94F34700030B9A /* Libraries */, 106999E21F3EC2FB00032829 /* components */, 10ED47A51F38BC00004DF043 /* DeviceMotion.h */, 10ED47A61F38BC00004DF043 /* DeviceMotion.m */, @@ -140,30 +123,15 @@ ); sourceTree = ""; }; - B11601B61F94F34700030B9A /* Libraries */ = { - isa = PBXGroup; - children = ( - B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */, - ); - name = Libraries; - sourceTree = ""; - }; B13FF7601F94F72400A6C92B /* Frameworks */ = { isa = PBXGroup; children = ( + B14C36651F960C6E0047CB67 /* PocketSVG.framework */, + B14C36631F960C500047CB67 /* PocketSVG.framework */, ); name = Frameworks; sourceTree = ""; }; - B14F3AEF1F94F8B100B73842 /* Products */ = { - isa = PBXGroup; - children = ( - B14F3AF41F94F8B100B73842 /* PocketSVG.framework */, - B14F3AF61F94F8B100B73842 /* PocketSVG.framework */, - ); - name = Products; - sourceTree = ""; - }; /* End PBXGroup section */ /* Begin PBXNativeTarget section */ @@ -209,12 +177,6 @@ mainGroup = 58B511D21A9E6C8500147676; productRefGroup = 58B511D21A9E6C8500147676; projectDirPath = ""; - projectReferences = ( - { - ProductGroup = B14F3AEF1F94F8B100B73842 /* Products */; - ProjectRef = B14F3AEE1F94F8B100B73842 /* PocketSVG.xcodeproj */; - }, - ); projectRoot = ""; targets = ( 58B511DA1A9E6C8500147676 /* RCTARKit */, @@ -222,23 +184,6 @@ }; /* End PBXProject section */ -/* Begin PBXReferenceProxy section */ - B14F3AF41F94F8B100B73842 /* PocketSVG.framework */ = { - isa = PBXReferenceProxy; - fileType = wrapper.framework; - path = PocketSVG.framework; - remoteRef = B14F3AF31F94F8B100B73842 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; - B14F3AF61F94F8B100B73842 /* PocketSVG.framework */ = { - isa = PBXReferenceProxy; - fileType = wrapper.framework; - path = PocketSVG.framework; - remoteRef = B14F3AF51F94F8B100B73842 /* PBXContainerItemProxy */; - sourceTree = BUILT_PRODUCTS_DIR; - }; -/* End PBXReferenceProxy section */ - /* Begin PBXSourcesBuildPhase section */ 58B511D71A9E6C8500147676 /* Sources */ = { isa = PBXSourcesBuildPhase; From 661eb822365772a5923179b1485b70007290f65b Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 13:19:19 +0200 Subject: [PATCH 11/14] add more shape properties --- components/ARShape.js | 8 ++++- components/lib/propTypes.js | 17 ++++++----- ios/RCTARKitManager.m | 6 ++++ ios/RCTConvert+ARKit.m | 61 ++++++++++++++++++++++++++----------- 4 files changed, 65 insertions(+), 27 deletions(-) diff --git a/components/ARShape.js b/components/ARShape.js index 0b38f16..4cf6cfd 100644 --- a/components/ARShape.js +++ b/components/ARShape.js @@ -1,11 +1,17 @@ import PropTypes from 'prop-types'; +import { chamferMode } from './lib/propTypes'; import createArComponent from './lib/createArComponent'; const ARShape = createArComponent('addShape', { shape: PropTypes.shape({ extrusion: PropTypes.number, - path: PropTypes.string + pathSvg: PropTypes.string, + pathFlatness: PropTypes.number, + chamferMode, + chamferRadius: PropTypes.number, + chamferProfilePathSvg: PropTypes.string, + chamferProfilePathFlatness: PropTypes.string }) }); diff --git a/components/lib/propTypes.js b/components/lib/propTypes.js index 97a48d4..db9d52f 100644 --- a/components/lib/propTypes.js +++ b/components/lib/propTypes.js @@ -8,43 +8,44 @@ const ARKitManager = NativeModules.ARKitManager; export const position = PropTypes.shape({ x: PropTypes.number, y: PropTypes.number, - z: PropTypes.number, + z: PropTypes.number }); export const transition = PropTypes.shape({ - duration: PropTypes.number, + duration: PropTypes.number }); export const eulerAngles = PropTypes.shape({ x: PropTypes.number, y: PropTypes.number, - z: PropTypes.number, + z: PropTypes.number }); export const rotation = PropTypes.shape({ x: PropTypes.number, y: PropTypes.number, z: PropTypes.number, - w: PropTypes.number, + w: PropTypes.number }); export const orientation = PropTypes.shape({ x: PropTypes.number, y: PropTypes.number, z: PropTypes.number, - w: PropTypes.number, + w: PropTypes.number }); export const shaders = PropTypes.shape({ [ARKitManager.ShaderModifierEntryPoint.Geometry]: PropTypes.string, [ARKitManager.ShaderModifierEntryPoint.Surface]: PropTypes.string, [ARKitManager.ShaderModifierEntryPoint.LightingModel]: PropTypes.string, - [ARKitManager.ShaderModifierEntryPoint.Fragment]: PropTypes.string, + [ARKitManager.ShaderModifierEntryPoint.Fragment]: PropTypes.string }); export const lightingModel = PropTypes.oneOf( - values(ARKitManager.LightingModel), + values(ARKitManager.LightingModel) ); export const blendMode = PropTypes.oneOf(values(ARKitManager.BlendMode)); +export const chamferMode = PropTypes.oneOf(values(ARKitManager.ChamferMode)); export const material = PropTypes.shape({ color: PropTypes.string, @@ -52,5 +53,5 @@ export const material = PropTypes.shape({ roughness: PropTypes.number, blendMode, lightingModel, - shaders, + shaders }); diff --git a/ios/RCTARKitManager.m b/ios/RCTARKitManager.m index 5c22021..585e5fd 100644 --- a/ios/RCTARKitManager.m +++ b/ios/RCTARKitManager.m @@ -51,6 +51,12 @@ - (NSDictionary *)constantsToExport @"Screen": [@(SCNBlendModeScreen) stringValue], @"Replace": [@(SCNBlendModeReplace) stringValue], + }, + @"ChamferMode": @{ + @"Both": [@(SCNChamferModeBoth) stringValue], + @"Back": [@(SCNChamferModeBack) stringValue], + @"Front": [@(SCNChamferModeBack) stringValue], + } }; } diff --git a/ios/RCTConvert+ARKit.m b/ios/RCTConvert+ARKit.m index 4836187..233a5fd 100644 --- a/ios/RCTConvert+ARKit.m +++ b/ios/RCTConvert+ARKit.m @@ -38,10 +38,10 @@ + (SCNVector4)SCNVector4:(id)json { + (SCNNode *)SCNNode:(id)json { SCNNode *node = [SCNNode new]; - + node.name = [NSString stringWithFormat:@"%@", json[@"id"]]; [self setNodeProperties:node properties:json]; - + return node; } @@ -52,10 +52,9 @@ + (SCNBox *)SCNBox:(id)json { CGFloat length = [shape[@"length"] floatValue]; CGFloat chamfer = [shape[@"chamfer"] floatValue]; SCNBox *geometry = [SCNBox boxWithWidth:width height:height length:length chamferRadius:chamfer]; - SCNMaterial *material = [self SCNMaterial:json[@"material"]]; geometry.materials = @[material, material, material, material, material, material]; - + return geometry; } @@ -66,7 +65,7 @@ + (SCNSphere *)SCNSphere:(id)json { SCNMaterial *material = [self SCNMaterial:json[@"material"]]; geometry.materials = @[material]; - + return geometry; } @@ -132,7 +131,7 @@ + (SCNTorus *)SCNTorus:(id)json { return geometry; } - + + (SCNCapsule *)SCNCapsule:(id)json { NSDictionary* shape = json[@"shape"]; CGFloat capR = [shape[@"capR"] floatValue]; @@ -168,10 +167,7 @@ + (SCNPlane *)SCNPlane:(id)json { return geometry; } -+ (SCNShape * )SCNShape:(id)json { - NSDictionary* shape = json[@"shape"]; - NSString * pathString =shape[@"path"]; - ++ (SVGBezierPath *)svgStringToBezier:(NSString *)pathString { NSArray * paths = [SVGBezierPath pathsFromSVGString:pathString]; SVGBezierPath * fullPath; for(SVGBezierPath *path in paths) { @@ -181,14 +177,43 @@ + (SCNShape * )SCNShape:(id)json { [fullPath appendPath:path]; } } - - fullPath.flatness = 0.01; + return fullPath; +} + ++ (SCNShape * )SCNShape:(id)json { + NSDictionary* shape = json[@"shape"]; + NSString * pathString = shape[@"pathSvg"]; + + SVGBezierPath * path = [self svgStringToBezier:pathString]; + + if (shape[@"pathFlatness"]) { + path.flatness = [shape[@"pathFlatness"] floatValue]; + } else { + path.flatness = 0.01; + } CGFloat extrusion = [shape[@"extrusion"] floatValue]; - SCNShape *geometry = [SCNShape shapeWithPath:fullPath extrusionDepth:extrusion]; + SCNShape *geometry = [SCNShape shapeWithPath:path extrusionDepth:extrusion]; + if (shape[@"chamferMode"]) { + geometry.chamferMode = (SCNChamferMode) [shape[@"chamferMode"] integerValue]; + } + if (shape[@"chamferRadius"]) { + geometry.chamferRadius = [shape[@"chamferRadius"] floatValue]; + } + + if (shape[@"chamferProfilePathSvg"]) { + + SVGBezierPath * path = [self svgStringToBezier:shape[@"chamferProfilePathSvg"]]; + if(shape[@"chamferProfilePathFlatness"]) { + path.flatness = [shape[@"chamferProfilePathFlatness"] floatValue]; + } + geometry.chamferProfile = path; + } + + SCNMaterial *material = [self SCNMaterial:json[@"material"]]; material.doubleSided = YES; - + geometry.materials = @[material]; return geometry; } @@ -209,7 +234,7 @@ + (SCNTextNode *)SCNTextNode:(id)json { CGFloat fontSize = [font[@"size"] floatValue]; CGFloat size = fontSize / 12; SCNText *scnText = [SCNText textWithString:text extrusionDepth:depth / size]; - + scnText.flatness = 0.1; // font @@ -241,7 +266,7 @@ + (SCNTextNode *)SCNTextNode:(id)json { SCNVector3 min = SCNVector3Zero; SCNVector3 max = SCNVector3Zero; [textNode getBoundingBoxMin:&min max:&max]; - + textNode.position = SCNVector3Make(-(min.x + max.x) / 2 * size, -(min.y + max.y) / 2 * size, -(min.z + max.z) / 2 * size); @@ -283,7 +308,7 @@ + (void)setNodeProperties:(SCNNode *)node properties:(id)json { } else { [SCNTransaction setAnimationDuration:0.0]; } - + } else { [SCNTransaction setAnimationDuration:0.0]; } @@ -294,7 +319,7 @@ + (void)setNodeProperties:(SCNNode *)node properties:(id)json { if (json[@"scale"]) { CGFloat scale = [json[@"scale"] floatValue]; node.scale = SCNVector3Make(scale, scale, scale); - + } if (json[@"eulerAngles"]) { From 5f1dc08c2542a5d06d21bdd4d25c17f95325eccd Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 13:53:38 +0200 Subject: [PATCH 12/14] normalize chamferProfile path --- ARKit.js | 26 +++++++++++++------------- ios/RCTConvert+ARKit.m | 16 +++++++++++++--- 2 files changed, 26 insertions(+), 16 deletions(-) diff --git a/ARKit.js b/ARKit.js index 6d85c68..3981e34 100644 --- a/ARKit.js +++ b/ARKit.js @@ -13,7 +13,7 @@ import { View, Text, NativeModules, - requireNativeComponent, + requireNativeComponent } from 'react-native'; import generateId from './components/lib/generateId'; @@ -26,7 +26,7 @@ const TRACKING_REASONS = [ 'NONE', 'INITIALIZING', 'EXCESSIVE_MOTION', - 'INSUFFICIENT_FEATURES', + 'INSUFFICIENT_FEATURES' ]; const TRACKING_STATES_COLOR = ['red', 'orange', 'green']; @@ -34,7 +34,7 @@ class ARKit extends Component { state = { state: 0, reason: 0, - floor: null, + floor: null }; componentWillMount() { ARKitManager.clearScene(); @@ -55,7 +55,7 @@ class ARKit extends Component { @@ -84,13 +84,13 @@ class ARKit extends Component { _onTrackingState = ({ state = this.state.state, reason = this.state.reason, - floor, + floor }) => { if (this.props.onTrackingState) { this.props.onTrackingState({ state: TRACKING_STATES[state] || state, reason: TRACKING_REASONS[reason] || reason, - floor, + floor }); } @@ -98,7 +98,7 @@ class ARKit extends Component { this.setState({ state, reason, - floor: floor ? floor.toFixed(2) : this.state.floor, + floor: floor ? floor.toFixed(2) : this.state.floor }); } }; @@ -138,19 +138,19 @@ const styles = StyleSheet.create({ borderRadius: 10, padding: 4, backgroundColor: 'black', - flexDirection: 'row', + flexDirection: 'row' }, stateIcon: { width: 12, height: 12, borderRadius: 6, - marginRight: 4, + marginRight: 4 }, stateText: { color: 'white', fontSize: 10, - height: 12, - }, + height: 12 + } }); // copy all ARKitManager properties to ARKit @@ -160,7 +160,7 @@ Object.keys(ARKitManager).forEach(key => { const addDefaultsToSnapShotFunc = funcName => ({ target = 'cameraRoll', - format = 'png', + format = 'png' }) => ARKitManager[funcName]({ target, format }); ARKit.snapshot = addDefaultsToSnapShotFunc('snapshot'); @@ -182,7 +182,7 @@ ARKit.propTypes = { onTrackingState: PropTypes.func, onTapOnPlaneUsingExtent: PropTypes.func, onTapOnPlaneNoExtent: PropTypes.func, - onEvent: PropTypes.func, + onEvent: PropTypes.func }; const RCTARKit = requireNativeComponent('RCTARKit', ARKit); diff --git a/ios/RCTConvert+ARKit.m b/ios/RCTConvert+ARKit.m index 233a5fd..ecc263e 100644 --- a/ios/RCTConvert+ARKit.m +++ b/ios/RCTConvert+ARKit.m @@ -188,8 +188,6 @@ + (SCNShape * )SCNShape:(id)json { if (shape[@"pathFlatness"]) { path.flatness = [shape[@"pathFlatness"] floatValue]; - } else { - path.flatness = 0.01; } CGFloat extrusion = [shape[@"extrusion"] floatValue]; SCNShape *geometry = [SCNShape shapeWithPath:path extrusionDepth:extrusion]; @@ -206,7 +204,19 @@ + (SCNShape * )SCNShape:(id)json { if(shape[@"chamferProfilePathFlatness"]) { path.flatness = [shape[@"chamferProfilePathFlatness"] floatValue]; } - geometry.chamferProfile = path; + // normalize path + CGRect boundingBox = path.bounds; + if(path.bounds.size.width !=0 && path.bounds.size.height != 0) { + CGFloat scaleX = 1/boundingBox.size.width; + CGFloat scaleY = scaleY = 1/boundingBox.size.height; + + CGAffineTransform transform = CGAffineTransformMakeScale(scaleX, scaleY); + [path applyTransform:transform]; + geometry.chamferProfile = path; + } else { + NSLog(@"Invalid chamferProfilePathFlatness"); + } + } From 4b967885528d7f360e4defae61a639ddb5eb3252 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 14:06:42 +0200 Subject: [PATCH 13/14] update readme --- README.md | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 89edfe0..ed1866f 100644 --- a/README.md +++ b/README.md @@ -103,11 +103,32 @@ export default class ReactNativeARKit extends Component { /> + + + `, + pathFlatness: 0.1, + // it's also possible to specify a chamfer profile: + chamferRadius: 5, + chamferProfilePathSvg: ` + + `, + extrusion: 10, + }} + /> ); @@ -276,6 +297,20 @@ SceneKit only supports `.scn` and `.dae` formats. | `eulerAngles` | `{ x, y, z }` | | `model` | `{ file, node, scale, alpha }` | +#### `` + +Creates a extruded shape by an svg path. +See https://github.com/HippoAR/react-native-arkit/pull/89 for details + +##### Props + +| Prop | Type | +|---|---| +| `position` | `{ x, y, z }` | +| `eulerAngles` | `{ x, y, z }` | +| `shape` | `{ pathSvg, extrusion, pathFlatness, chamferRadius, chamferProfilePathSvg, chamferProfilePathFlatness }` | + + ## Contributing From 26617f9db38e50e4bb9faecb7c5838a4e5c4d0b3 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 17 Oct 2017 21:07:00 +0200 Subject: [PATCH 14/14] change dep --- components/ARSprite.js | 16 ++++++++-------- package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/components/ARSprite.js b/components/ARSprite.js index f44022a..0052f36 100644 --- a/components/ARSprite.js +++ b/components/ARSprite.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import withAnimationFrame from 'react-animation-frame'; +import withAnimationFrame from '@panter/react-animation-frame'; import { NativeModules, Animated } from 'react-native'; @@ -13,7 +13,7 @@ const ARSprite = withAnimationFrame( super(props); this.state = { zIndex: new Animated.Value(), - pos2D: new Animated.ValueXY(), // inits to zero + pos2D: new Animated.ValueXY() // inits to zero }; } onAnimationFrame() { @@ -22,9 +22,9 @@ const ARSprite = withAnimationFrame( { x: this.state.pos2D.x, y: this.state.pos2D.y, - z: this.state.zIndex, - }, - ]), + z: this.state.zIndex + } + ]) ); } @@ -34,18 +34,18 @@ const ARSprite = withAnimationFrame( style={{ position: 'absolute', transform: this.state.pos2D.getTranslateTransform(), - ...this.props.style, + ...this.props.style }} > {this.props.children} ); } - }, + } ); ARSprite.propTypes = { - position, + position }; module.exports = ARSprite; diff --git a/package.json b/package.json index 7d787be..67b4f1e 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "lodash": "^4.17.4", "prop-types": "^15.5.7", "react": "16.0.0-alpha.12", - "react-animation-frame": "^0.3.5" + "@panter/react-animation-frame": "^0.3.6" }, "devDependencies": { "babel-eslint": "^7.2.3",