From ed525498c7372f9aba477977665ea175bc4527b9 Mon Sep 17 00:00:00 2001 From: EddyVerbruggen Date: Tue, 10 Oct 2017 12:10:46 +0200 Subject: [PATCH] Allow undefined plane material #2 --- demo/app/main-page.ts | 2 +- demo/app/main-page.xml | 2 +- demo/app/main-view-model.ts | 11 ++++++++++- docs/ar-angular.md | 14 +++++++++++--- docs/tag-properties.md | 2 +- src/nodes/ios/armaterialfactory.d.ts | 2 +- src/nodes/ios/armaterialfactory.ts | 7 ++++++- src/nodes/ios/arplane.d.ts | 2 +- src/nodes/ios/arplane.ts | 4 ++-- src/package.json | 4 ++-- 10 files changed, 36 insertions(+), 14 deletions(-) diff --git a/demo/app/main-page.ts b/demo/app/main-page.ts index 9e4b97a..c5403e5 100644 --- a/demo/app/main-page.ts +++ b/demo/app/main-page.ts @@ -115,7 +115,7 @@ export function planeTapped(args: ARPlaneTappedEventData): void { "Assets.scnassets/Materials/tnsgranite/tnsgranite-diffuse.png", { name: "Assets.scnassets/Materials/tnsgranite2/tnsgranite2-diffuse.png", - transparency: 0.8 // 0 - 1, lower number is more transparent + transparency: 0.9 // 0 - 1, lower number is more transparent } ], mass: 0.0000001, diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml index d5b9a24..aa07ec8 100644 --- a/demo/app/main-page.xml +++ b/demo/app/main-page.xml @@ -4,7 +4,7 @@ { + diffuse: new Color("white"), + transparency: 0.2 + }; + constructor() { super(); diff --git a/docs/ar-angular.md b/docs/ar-angular.md index e4ed3a9..8132816 100644 --- a/docs/ar-angular.md +++ b/docs/ar-angular.md @@ -21,9 +21,10 @@ Open a view that's in the same module (or you've added it to the global app modu @@ -34,10 +35,17 @@ Open its component and, for instance, add: ```typescript // add to imports -import { AR, ARPlaneTappedEventData } from "nativescript-ar"; +import { AR, ARMaterial,ARPlaneTappedEventData } from "nativescript-ar"; +import { Color } from "tns-core-modules/color"; export class MyComponent { - thePlaneOpacity: number = 0.2; + // All these are valid plane materials: + // public planeMaterial = "Assets.scnassets/Materials/tron/tron-diffuse.png"; + // public planeMaterial = new Color("red"); + public planeMaterial = { + diffuse: new Color("white"), + transparency: 0.2 + }; constructor() { console.log("AR supported? " + AR.isSupported()); diff --git a/docs/tag-properties.md b/docs/tag-properties.md index 7f5dd8e..2f7a7a4 100644 --- a/docs/tag-properties.md +++ b/docs/tag-properties.md @@ -14,7 +14,7 @@ But to help add behavior to the AR experience, here are the properties and event |`debugLevel`|`NONE`|One of the options in the `ARDebugLevel` enum: `NONE`, `WORLD_ORIGIN`, `FEATURE_POINTS`, `PHYSICS_SHAPES`. |`detectPlanes`|`false`|You can have the plugin detecting planes right away by setting this to `true`. |`showStatistics`|`false`|Draw a few statistics at the bottom. -|`planeMaterial`|-|A texture for the planes. For instance, the demo uses ['tron'](https://github.com/EddyVerbruggen/nativescript-ar/tree/master/demo/app/App_Resources/iOS/Assets.scnassets/Materials/tron). +|`planeMaterial`|-|A `string` referencing a texture for the planes. For instance, the demo uses ['tron'](https://github.com/EddyVerbruggen/nativescript-ar/tree/master/demo/app/App_Resources/iOS/Assets.scnassets/Materials/tron). Can also be a `Color` or `ARMaterial` instance. You won't see the planes if not set. |`planeOpacity`|`0.1`|Determines how transparent the planes are, where 0 is invisible, and 1 is 'solid'. ## Events diff --git a/src/nodes/ios/armaterialfactory.d.ts b/src/nodes/ios/armaterialfactory.d.ts index eeb7800..2cedc50 100644 --- a/src/nodes/ios/armaterialfactory.d.ts +++ b/src/nodes/ios/armaterialfactory.d.ts @@ -1,7 +1,7 @@ import { ARMaterial } from "../../ar-common"; import { Color } from "tns-core-modules/color"; export declare class ARMaterialFactory { - static getMaterial(material: string | Color | ARMaterial): SCNMaterial; + static getMaterial(material?: string | Color | ARMaterial): SCNMaterial | null; private static applyMaterialByColor(mat, material); private static applyMaterialByString(mat, material); private static applyMaterialByARMaterial(mat, material); diff --git a/src/nodes/ios/armaterialfactory.ts b/src/nodes/ios/armaterialfactory.ts index 859e0d6..c15164e 100644 --- a/src/nodes/ios/armaterialfactory.ts +++ b/src/nodes/ios/armaterialfactory.ts @@ -3,7 +3,11 @@ import { Color } from "tns-core-modules/color"; export class ARMaterialFactory { - static getMaterial(material: string | Color | ARMaterial): SCNMaterial { + static getMaterial(material?: string | Color | ARMaterial): SCNMaterial | null { + if (!material) { + return null; + } + const mat = SCNMaterial.new(); // I'm sure these can be cached mat.lightingModelName = SCNLightingModelPhysicallyBased; if (typeof material === "string") { @@ -49,6 +53,7 @@ export class ARMaterialFactory { } if (typeof materialProperty === "string") { + console.log(">>> UIImage.imageNamed(materialProperty): " + UIImage.imageNamed(materialProperty)); scnMaterialProperty.contents = UIImage.imageNamed(materialProperty); scnMaterialProperty.wrapS = SCNWrapMode.Repeat; scnMaterialProperty.wrapT = SCNWrapMode.Repeat; diff --git a/src/nodes/ios/arplane.d.ts b/src/nodes/ios/arplane.d.ts index 6deb12c..053cad1 100644 --- a/src/nodes/ios/arplane.d.ts +++ b/src/nodes/ios/arplane.d.ts @@ -6,7 +6,7 @@ export declare class ARPlane implements IARPlane { position: ARPosition; ios: SCNNode; static create(anchor: ARAnchor, opacity: number, material: SCNMaterial): ARPlane; - setMaterial(material: SCNMaterial, opacity: number): void; + setMaterial(material: SCNMaterial | null, opacity: number): void; update(anchor: any): void; remove(): void; private static setTextureScale(planeGeometry); diff --git a/src/nodes/ios/arplane.ts b/src/nodes/ios/arplane.ts index c390adb..2f90391 100644 --- a/src/nodes/ios/arplane.ts +++ b/src/nodes/ios/arplane.ts @@ -41,7 +41,7 @@ export class ARPlane implements IARPlane { return instance; } - setMaterial(material: SCNMaterial, opacity: number): void { + setMaterial(material: SCNMaterial | null, opacity: number): void { const transparentMaterial = SCNMaterial.new(); transparentMaterial.diffuse.contents = UIColor.colorWithWhiteAlpha(1.0, 0.0); @@ -50,7 +50,7 @@ export class ARPlane implements IARPlane { materialArray.addObject(transparentMaterial); materialArray.addObject(transparentMaterial); materialArray.addObject(transparentMaterial); - if (opacity === 0) { + if (opacity === 0 || material === null) { materialArray.addObject(transparentMaterial); } else { material.transparency = opacity; diff --git a/src/package.json b/src/package.json index 7a8fb0b..799af0e 100644 --- a/src/package.json +++ b/src/package.json @@ -1,6 +1,6 @@ { "name": "nativescript-ar", - "version": "0.3.1", + "version": "0.3.2", "description": "NativeScript Augmented Reality plugin. ARKit on iOS and (in the future) ARCore on Android.", "main": "ar", "typings": "index.d.ts", @@ -13,7 +13,7 @@ "scripts": { "tsc": "tsc -skipLibCheck", "build": "npm i && npm run tsc", - "postclone": "npm i && node scripts/postclone.js && cd ../demo && npm i && cd ../src && npm run plugin.link", + "postclone": "npm i && cd ../demo && npm i && cd ../src && npm run plugin.link", "test.android": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build android && tns test android --justlaunch", "test.ios": "npm i && npm run tsc && npm run tslint && cd ../demo && tns build ios && tns test ios --justlaunch", "tslint": "cd .. && tslint \"**/*.ts\" --config tslint.json --exclude \"**/node_modules/**\" --exclude \"**/typings/**\"",