implementation of the ability to change the base color

lib/model_viewer.dart

@@ -11,3 +11,4 @@
 library model_viewer;
 
 export 'src/model_viewer.dart';
+export 'src/controller.dart';

lib/src/controller.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+typedef ChangeColorTypeDef = Future<String> Function(String);
+
+/// The [ModelViewerColorController] is used to control the color settings of the model viewer.
+/// If the function [changeColor(colorString)] is called, then the base color of the model will be changed.
+/// 
+/// At the moment the [ModelViewerColorController] can only change the base color of the model.
+/// The base color is auto detected by the biggest size object of the model.
+class ModelViewerColorController {
+  /// change the color by a given colorString
+  ChangeColorTypeDef changeColor;
+  // ToDo: Add a function to get possibble color areas
+  // ToDo: set colors for detected areas
+
+  void dispose() {
+    changeColor = null;
+  }
+}

lib/src/html_builder.dart

@@ -19,6 +19,7 @@ abstract class HTMLBuilder {
       final int autoRotateDelay,
       final bool autoPlay,
       final bool cameraControls,
+      final bool enableColorChange,
       final String iosSrc}) {
     final html = StringBuffer(htmlTemplate);
     html.write('<model-viewer');
@@ -64,6 +65,11 @@ abstract class HTMLBuilder {
     if (iosSrc != null) {
       html.write(' ios-src="${htmlEscape.convert(iosSrc)}"');
     }
+
+    if (enableColorChange ?? false) {
+      html.write(' id="color"');
+    }
+
     // TODO: max-camera-orbit
     // TODO: max-field-of-view
     // TODO: min-camera-orbit
@@ -75,6 +81,25 @@ abstract class HTMLBuilder {
     // TODO: shadow-intensity
     // TODO: shadow-softness
     html.writeln('></model-viewer>');
+
+    if (enableColorChange ?? false) {
+      html.write(_buildColorChangeJSFunction());
+    }
+
     return html.toString();
   }
+
+  static String _buildColorChangeJSFunction() {
+    return '''
+    <script type="text/javascript">
+      function changeColor(colorString) {
+        const modelViewerColor = document.querySelector("model-viewer#color");
+        const color = colorString.split(',')
+                .map(numberString => parseFloat(numberString));
+        const [material] = modelViewerColor.model.materials;
+        material.pbrMetallicRoughness.setBaseColorFactor(color);
+      }
+    </script>
+    ''';
+  }
 }

lib/src/model_viewer.dart

@@ -12,6 +12,7 @@ import 'package:flutter_android/android_content.dart' as android_content;
 import 'package:webview_flutter/platform_interface.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
+import 'controller.dart';
 import 'html_builder.dart';
 
 /// Flutter widget for rendering interactive 3D models.
@@ -28,6 +29,8 @@ class ModelViewer extends StatefulWidget {
       this.autoRotateDelay,
       this.autoPlay,
       this.cameraControls,
+      this.enableColorChange,
+      this.colorController,
       this.iosSrc})
       : super(key: key);
 
@@ -66,6 +69,15 @@ class ModelViewer extends StatefulWidget {
   /// Defaults to "auto" which allows the model to be resized.
   final String arScale;
 
+  /// Enable the ability to change the color of the model with the [ModelViewerColorController]
+  /// If this value is set to true, it's possible to set the color of the model.
+  final bool enableColorChange;
+
+  /// Controller to set the color of the model
+  /// Call the Function [ModelViewerColorController.changeColor(colorString)]
+  /// to set a color by an given colorString
+  ModelViewerColorController colorController;
+
   /// Enables the auto-rotation of the model.
   final bool autoRotate;
 
@@ -98,6 +110,10 @@ class _ModelViewerState extends State<ModelViewer> {
   @override
   void initState() {
     super.initState();
+    var _colorController = widget.colorController;
+    if (_colorController != null) {
+      _colorController.changeColor = _changeColor;
+    }
     _initProxy();
   }
 
@@ -170,6 +186,19 @@ class _ModelViewerState extends State<ModelViewer> {
     );
   }
 
+  Future<String> _changeColor(String color) async {
+    var c = Completer<String>();
+    var webviewcontroller = await _controller.future;
+    await webviewcontroller
+        .evaluateJavascript('changeColor("$color")')
+        .then((result) {
+      c.complete(result);
+    }).catchError((onError) {
+      c.completeError(onError.toString());
+    });
+    return c.future;
+  }
+
   String _buildHTML(final String htmlTemplate) {
     return HTMLBuilder.build(
       htmlTemplate: htmlTemplate,
@@ -183,6 +212,7 @@ class _ModelViewerState extends State<ModelViewer> {
       autoRotateDelay: widget.autoRotateDelay,
       autoPlay: widget.autoPlay,
       cameraControls: widget.cameraControls,
+      enableColorChange: widget.enableColorChange,
       iosSrc: widget.iosSrc,
     );
   }