-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
3d model working on flutter web (#80)
* replaced web only imports with universal imports * fixed macOS build not working * created custom 3d viewer implementation for web
- Loading branch information
1 parent
9ebe512
commit bd9b602
Showing
9 changed files
with
199 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:model_viewer_plus/model_viewer_plus.dart'; | ||
| import 'package:webview_flutter/webview_flutter.dart'; | ||
|
|
||
| class ModelViewerWidget extends StatefulWidget { | ||
| final String modelSrc; | ||
| final Color backgroundColor; | ||
| final bool cameraControls; | ||
| final bool autoRotate; | ||
| final bool disableZoom; | ||
| final bool disablePan; | ||
|
|
||
| const ModelViewerWidget({ | ||
| required this.modelSrc, | ||
| required this.backgroundColor, | ||
| this.cameraControls = false, | ||
| this.autoRotate = false, | ||
| this.disableZoom = true, | ||
| this.disablePan = true, | ||
| super.key, | ||
| }); | ||
|
|
||
| @override | ||
| State<ModelViewerWidget> createState() => ModelViewerWidgetState(); | ||
| } | ||
|
|
||
| class ModelViewerWidgetState extends State<ModelViewerWidget> { | ||
| WebViewController? _controller; | ||
|
|
||
| void updateOrientation(double pitch, double yaw, double roll) { | ||
| if (_controller != null) { | ||
| final jsCommand = "document.querySelector('model-viewer').setAttribute('orientation', '${-pitch} $roll ${-yaw}');"; | ||
| _controller?.runJavaScript(jsCommand); | ||
| } else { | ||
| print("WebViewController is not initialized yet."); | ||
| } | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return ModelViewer( | ||
| cameraControls: widget.cameraControls, | ||
| backgroundColor: widget.backgroundColor, | ||
| src: widget.modelSrc, | ||
| alt: 'A 3D model of the OpenEarable', | ||
| interactionPrompt: InteractionPrompt.none, | ||
| autoRotate: widget.autoRotate, | ||
| disableZoom: widget.disableZoom, | ||
| disablePan: widget.disablePan, | ||
| onWebViewCreated: (controller) { | ||
| _controller = controller; | ||
| controller.runJavaScript( | ||
| "document.body.style.overflow = 'hidden';document.documentElement.style.overflow = 'hidden';document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false });", | ||
| ); | ||
| }, | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import 'dart:ui_web'; | ||
|
|
||
| import 'package:universal_html/html.dart' as html; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class ModelViewerWidget extends StatefulWidget { | ||
| final String modelSrc; | ||
| final Color backgroundColor; | ||
| final bool cameraControls; | ||
| final bool autoRotate; | ||
| final bool disableZoom; | ||
| final bool disablePan; | ||
|
|
||
| const ModelViewerWidget({ | ||
| required this.modelSrc, | ||
| required this.backgroundColor, | ||
| this.cameraControls = false, | ||
| this.autoRotate = false, | ||
| this.disableZoom = true, | ||
| this.disablePan = true, | ||
| super.key, | ||
| }); | ||
|
|
||
| @override | ||
| State<ModelViewerWidget> createState() => ModelViewerWidgetState(); | ||
| } | ||
|
|
||
| class ModelViewerWidgetState extends State<ModelViewerWidget> { | ||
| final String _viewType = 'model-viewer'; | ||
|
|
||
| @override | ||
| void initState() { | ||
| super.initState(); | ||
|
|
||
| platformViewRegistry.registerViewFactory( | ||
| _viewType, | ||
| (int viewId) { | ||
| final element = html.Element.tag('model-viewer') | ||
| ..setAttribute('src', widget.modelSrc) | ||
| ..setAttribute('alt', 'A 3D model of the OpenEarable') | ||
| ..style.width = '100%' | ||
| ..style.height = '100%'; | ||
|
|
||
| if (widget.cameraControls) { | ||
| element.setAttribute('camera-controls', ''); | ||
| } | ||
| if (widget.autoRotate) { | ||
| element.setAttribute('auto-rotate', ''); | ||
| } | ||
| if (widget.disableZoom) { | ||
| element.setAttribute('disable-zoom', ''); | ||
| } | ||
| if (widget.disablePan) { | ||
| element.setAttribute('disable-pan', ''); | ||
| } | ||
|
|
||
| return element; | ||
| }, | ||
| ); | ||
| } | ||
|
|
||
| void updateOrientation(double pitch, double yaw, double roll) { | ||
| // Find the registered element and update its orientation | ||
| print("Updating orientation: $pitch, $yaw, $roll"); | ||
| final element = html.document.querySelector(_viewType); | ||
| if (element != null) { | ||
| element.setAttribute('orientation', '${-pitch} $roll ${-yaw}'); | ||
| } | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return HtmlElementView(viewType: _viewType); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters