{"id":32294950,"url":"https://github.com/marlonjd/babylonjs_viewer","last_synced_at":"2025-10-23T03:49:51.713Z","repository":{"id":44399447,"uuid":"352166716","full_name":"MarlonJD/babylonjs_viewer","owner":"MarlonJD","description":"Flutter 3D Model Viewer with BabylonJS Viewer","archived":false,"fork":false,"pushed_at":"2025-03-24T11:36:10.000Z","size":6049,"stargazers_count":31,"open_issues_count":2,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-23T03:49:33.529Z","etag":null,"topics":["babylonjs","flutter","glb","gltf","model-viewer"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/babylonjs_viewer","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MarlonJD.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"MarlonJD"}},"created_at":"2021-03-27T20:07:22.000Z","updated_at":"2025-06-26T06:22:03.000Z","dependencies_parsed_at":"2023-02-19T00:30:25.890Z","dependency_job_id":null,"html_url":"https://github.com/MarlonJD/babylonjs_viewer","commit_stats":{"total_commits":32,"total_committers":2,"mean_commits":16.0,"dds":0.125,"last_synced_commit":"b28f630421455326e8302951200e604cba3a884b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MarlonJD/babylonjs_viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarlonJD%2Fbabylonjs_viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarlonJD%2Fbabylonjs_viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarlonJD%2Fbabylonjs_viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarlonJD%2Fbabylonjs_viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarlonJD","download_url":"https://codeload.github.com/MarlonJD/babylonjs_viewer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarlonJD%2Fbabylonjs_viewer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280557055,"owners_count":26350569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-23T02:00:06.710Z","response_time":142,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babylonjs","flutter","glb","gltf","model-viewer"],"created_at":"2025-10-23T03:49:48.219Z","updated_at":"2025-10-23T03:49:51.708Z","avatar_url":"https://github.com/MarlonJD.png","language":"Dart","funding_links":["https://github.com/sponsors/MarlonJD"],"categories":[],"sub_categories":[],"readme":"# babylonjs_viewer\n\n3D Model viewer with [BabylonJS Viewer](https://pub.dev/packages/babylonjs_viewer) for Flutter. This project highly inspired from [model_viewer](https://pub.dev/packages/model_viewer) flutter pub package. Its simple model viewer, next release, json settings will be implented\n\n# Pub.dev\n[https://pub.dev/packages/babylonjs_viewer](https://pub.dev/packages/babylonjs_viewer)\n\n# Install\nThis will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):\n```\ndependencies:\n  babylonjs_viewer: ^1.3.0\n```\n\n### What's new in 1.3.0\n - Update dependency to webview_flutter 4.10.0\n\n#### Why I need Controller\nController is optional. You can use this controller for run Javascript code, go back, get current url, change url and many others that WebView Flutter can allow. \nFunctions is optional. You can use this parameter for add javascript code to your viewer.\nExamples can be found at bottom of this [document](https://github.com/MarlonJD/babylonjs_viewer#controller-and-function-example)\n\n\n# Requirements\nOn your Android Project (android/app/build.gradle) set the \"minSdkVersion\" to 19\n```\ndefaultConfig {\n        applicationId \"com.example.example\"\n        minSdkVersion 19\n        targetSdkVersion 30\n        versionCode flutterVersionCode.toInteger()\n        versionName flutterVersionName\n    }\n```\n\nThen add the line \"android:usesCleartextTraffic=\"true\"\" to your android manifest (android/app/src/main/AndroidManifest.xml)\n```\n\u003capplication\n        android:label=\"example\"\n        android:icon=\"@mipmap/ic_launcher\"\n        android:usesCleartextTraffic=\"true\"\u003e\n```\n\nOn your iOS Project go to the info.plist file (ios/Runner/Info.plist) and add the following line\n```\n\u003ckey\u003eio.flutter.embedded_views_preview\u003c/key\u003e\n\u003ctrue/\u003e\n```\n\n\n# Import it\nNow in your Dart code, you can use:\n```\nimport 'package:babylonjs_viewer/babylonjs_viewer.dart';\n```\n\n# Using\n```\n  class MyApp extends StatelessWidget {\n    @override\n    Widget build(BuildContext context) {\n      return MaterialApp(\n        home: Scaffold(\n          appBar: AppBar(title: Text(\"BabylonJS Viewer\")),\n          body: BabylonJSViewer(\n            src: 'https://models.babylonjs.com/boombox.glb',\n          ),\n        ),\n      );\n    }\n  }\n```\n# Asset, FILE or HTTP(s)\n\n## HTTP(s)\n```\n  BabylonJSViewer(\n    src: 'https://models.babylonjs.com/boombox.glb',\n  ),\n```\n## FILE\n```\n  BabylonJSViewer(\n    src: 'file:///path/to/MyModel.glb',\n  ),\n```\n## Asset\n```\n  BabylonJSViewer(\n    src: 'assets/MyModel.glb',\n  ),\n``` \n\n### Controller and Function Example\nAdd `webview_flutter` to your pubspec.yaml\n```\ndependencies:\n  webview_flutter: ^4.10.0\n```\n\nAdd this to your state\n```\nimport 'package:webview_flutter/webview_flutter.dart';\n\nWebViewController? _controller;\n```\n\nAdd your custom javascript functions. This will print to your flutter console.\n```\nBabylonJSViewer(\n  controller: (WebViewController controller) {\n    _controller = controller;\n  },\n  functions:\n      '''function sayHello() { Print.postMessage(\"Hello World!\"); }''',\n  src:\n      'https://models.babylonjs.com/boombox.glb',\n),\n```\n\nUse this function wherever you want\n```\nElevatedButton(\n  onPressed: () {\n      _controller?.runJavaScript('''\nsayHello();\n''');\n  },\n  child: const Text(\"Run Function\")),\n```\n\n### Use case for Controller and Function\n\nYou can access to viewer variable of babylonjs viewer. You can found all methods on [there](https://github.com/BabylonJS/Babylon.js/blob/master/packages/tools/viewer/src/viewer/viewer.ts)\n\nIn this example show you that how you can toggle auto rotate.\n```\nBabylonJSViewer(\n  controller: (WebViewController controller) {\n    _controller = controller;\n  },\n  functions: '''\nfunction toggleAutoRotate(texture) {\nlet viewer = BabylonViewer.viewerManager.getViewerById('viewer-id');\nviewer.sceneManager.camera.useAutoRotationBehavior = !viewer.sceneManager.camera.useAutoRotationBehavior\n}\n''',\n  src:\n      'https://models.babylonjs.com/boombox.glb',\n),\n```\n\nuse this function\n```\nElevatedButton(\n  onPressed: () {\n      _controller?.runJavascript('''\ntoggleAutoRotate();\n''');\n  },\n  child: const Text(\"Toggle\")),\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarlonjd%2Fbabylonjs_viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarlonjd%2Fbabylonjs_viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarlonjd%2Fbabylonjs_viewer/lists"}