wasabia
Loading Gltf file doesn't work
I was trying to load gltf file using three_dart and three_dart_jsm. Using the current packages available from pubdev it displays blank page. Some examples work but the game_fps doesn't work at all. I also tried to add Gltfloader on a new file (not from example). It displays nothing. When I tried the latest version from this repo (add this repo to pubdev file) it installs both packages but basic functions and getters are not defined... I really love the package but loading gltf files is not working for me.
'GLTFMeshStandardSGMaterial' is from 'package:three_dart_jsm/three_dart_jsm/loaders/gltf/index.dart' ('../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/index.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'uniforms'. uniforms["glossinessMap"]["value"] = v; ^^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFMeshStandardSGMaterial.dart:131:12: Error: The getter 'defines' isn't defined for the class 'GLTFMeshStandardSGMaterial'.
-
'GLTFMeshStandardSGMaterial' is from 'package:three_dart_jsm/three_dart_jsm/loaders/gltf/index.dart' ('../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/index.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'defines'. this.defines!["USE_GLOSSINESSMAP"] = ''; ^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFMeshStandardSGMaterial.dart:132:12: Error: The getter 'defines' isn't defined for the class 'GLTFMeshStandardSGMaterial'.
-
'GLTFMeshStandardSGMaterial' is from 'package:three_dart_jsm/three_dart_jsm/loaders/gltf/index.dart' ('../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/index.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'defines'. this.defines!["USE_UV"] = ''; ^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFMeshStandardSGMaterial.dart:136:12: Error: The getter 'defines' isn't defined for the class 'GLTFMeshStandardSGMaterial'.
-
'GLTFMeshStandardSGMaterial' is from 'package:three_dart_jsm/three_dart_jsm/loaders/gltf/index.dart' ('../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/index.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'defines'. this.defines!.remove("USE_GLOSSINESSMAP"); ^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFMeshStandardSGMaterial.dart:137:12: Error: The getter 'defines' isn't defined for the class 'GLTFMeshStandardSGMaterial'.
-
'GLTFMeshStandardSGMaterial' is from 'package:three_dart_jsm/three_dart_jsm/loaders/gltf/index.dart' ('../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/index.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'defines'. this.defines!.remove("USE_UV"); ^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:61:24: Error: The method 'setCrossOrigin' isn't defined for the class 'TextureLoader'.
-
'TextureLoader' is from 'package:three_dart/three3d/loaders/index.dart' ('../../../../../../.pub-cache/git/three_dart-b51a826cbbb3fcbabaff083a6a4579b753f07ba0/lib/three3d/loaders/index.dart'). Try correcting the name to the name of an existing method, or defining a method named 'setCrossOrigin'. this.textureLoader.setCrossOrigin(this.options["crossOrigin"]); ^^^^^^^^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:62:24: Error: The method 'setRequestHeader' isn't defined for the class 'TextureLoader'.
-
'TextureLoader' is from 'package:three_dart/three3d/loaders/index.dart' ('../../../../../../.pub-cache/git/three_dart-b51a826cbbb3fcbabaff083a6a4579b753f07ba0/lib/three3d/loaders/index.dart'). Try correcting the name to the name of an existing method, or defining a method named 'setRequestHeader'. this.textureLoader.setRequestHeader(this.options["requestHeader"]); ^^^^^^^^^^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:68:23: Error: The method 'setWithCredentials' isn't defined for the class 'FileLoader'.
-
'FileLoader' is from 'package:three_dart/three3d/loaders/index.dart' ('../../../../../../.pub-cache/git/three_dart-b51a826cbbb3fcbabaff083a6a4579b753f07ba0/lib/three3d/loaders/index.dart'). Try correcting the name to the name of an existing method, or defining a method named 'setWithCredentials'. this.fileLoader.setWithCredentials(true); ^^^^^^^^^^^^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:692:11: Error: The method 'Blob' isn't defined for the class 'GLTFParser'.
-
'GLTFParser' is from 'package:three_dart_jsm/three_dart_jsm/loaders/gltf/index.dart' ('../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/index.dart'). Try correcting the name to the name of an existing method, or defining a method named 'Blob'. Blob(bufferView.asUint8List(), {"type": sourceDef["mimeType"]}); ^^^^ I/flutter (14955): render cost: 3 I/flutter (14955): {geometries: 0, textures: 1} I/flutter (14955): {frame: 119815.0, calls: 0, triangles: 0, points: 0, lines: 0} I/flutter (14955): render: sourceTexture: 3 I/flutter (14955): render cost: 1 I/flutter (14955): {geometries: 0, textures: 1} I/flutter (14955): {frame: 119816.0, calls: 0, triangles: 0, points: 0, lines: 0} I/flutter (14955): render: sourceTexture: 3 ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:771:17: Error: 'Points' isn't a type. if (mesh is Points) { ^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:788:24: Error: 'Line' isn't a type. } else if (mesh is Line) { ^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:892:37: Error: Couldn't find constructor 'Color'. materialParams["color"] = new Color(1.0, 1.0, 1.0); ^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:962:45: Error: Couldn't find constructor 'Vector2'. materialParams["normalScale"] = new Vector2( ^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:982:15: Error: Couldn't find constructor 'Color'. new Color(1, 1, 1).fromArray(List
.from(materialDef["emissiveFactor"].map((e) => e.toDouble()))); ^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1150:19: Error: Couldn't find constructor 'Mesh'. : new Mesh(geometry, material); ^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1169:20: Error: Couldn't find constructor 'Line'. mesh = new Line(geometry, material); ^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1173:20: Error: Couldn't find constructor 'Points'. mesh = new Points(geometry, material); ^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1199:21: Error: Couldn't find constructor 'Group'. var group = new Group(); ^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1153:19: Error: The getter 'geometry' isn't defined for the class 'SkinnedMesh'. -
'SkinnedMesh' is from 'package:three_dart/three3d/objects/index.dart' ('../../../../../../.pub-cache/git/three_dart-b51a826cbbb3fcbabaff083a6a4579b753f07ba0/lib/three3d/objects/index.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'geometry'. !mesh.geometry!.attributes["skinWeight"].normalized) { ^^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1499:18: Error: Couldn't find constructor 'Bone'. node = new Bone(); ^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1501:18: Error: Couldn't find constructor 'Group'. node = new Group(); ^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1525:24: Error: Couldn't find constructor 'Matrix4'. var matrix = new Matrix4(); ^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1576:16: Error: 'Bone' isn't a type. List<Bone> bones = []; ^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1577:16: Error: 'Matrix4' isn't a type. List<Matrix4> boneInverses = []; ^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1585:29: Error: Couldn't find constructor 'Matrix4'. var mat = new Matrix4(); ^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1598:25: Error: Couldn't find constructor 'Skeleton'. mesh.bind(new Skeleton(bones, boneInverses), ^^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1599:20: Error: The getter 'matrixWorld' isn't defined for the class 'SkinnedMesh'.
-
'SkinnedMesh' is from 'package:three_dart/three3d/objects/index.dart' ('../../../../../../.pub-cache/git/three_dart-b51a826cbbb3fcbabaff083a6a4579b753f07ba0/lib/three3d/objects/index.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'matrixWorld'. mesh.matrixWorld); ^^^^^^^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/loaders/gltf/GLTFParser.dart:1626:21: Error: Couldn't find constructor 'Group'. var scene = new Group(); ^^^^^ ../../../../../../.pub-cache/git/three_dart_jsm-3f65834519e80f693d89627114bcbe11c1ae8381/lib/three_dart_jsm/shaders/ConvolutionShader.dart:13:38: Error: Couldn't find constructor 'Vector2'. 'uImageIncrement': {"value": new Vector2(0.001953125, 0.0)},
this is the snippet of error I get when I try to use the git repo in the pubspec.yaml as a source
An Observatory debugger and profiler on SM N975F is available at: http://127.0.0.1:33531/P0_hE5iniuw=/
I/Gralloc4(15953): mapper 4.x is not supported
W/Gralloc3(15953): mapper 3.x is not supported
I/gralloc (15953): Arm Module v1.0
W/Gralloc4(15953): allocator 4.x is not supported
W/Gralloc3(15953): allocator 3.x is not supported
The Flutter DevTools debugger and profiler on SM N975F is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:33531/P0_hE5iniuw=/
I/SurfaceView@c34b04(15953): uSP: rtp = Rect(0, 0 - 1080, 2094) rtsw = 1080 rtsh = 2094
I/SurfaceView@c34b04(15953): onSSPAndSRT: pl = 0 pt = 0 sx = 1.0 sy = 1.0
I/SurfaceView@c34b04(15953): aOrMT: uB = true t = android.view.SurfaceControl$Transaction@3578700 fN = 1 android.view.SurfaceView.access$500:124 android.view.SurfaceView$SurfaceViewPositionUpdateListener.positionChanged:1728 android.graphics.RenderNode$CompositePositionUpdateListener.positionChanged:319
I/SurfaceView@c34b04(15953): aOrMT: vR.mWNT, vR = ViewRootImpl@892b8a5[MainActivity]
I/ViewRootImpl@892b8a5MainActivity: mWNT: t = android.view.SurfaceControl$Transaction@3578700 fN = 1 android.view.SurfaceView.applyOrMergeTransaction:1628 android.view.SurfaceView.access$500:124 android.view.SurfaceView$SurfaceViewPositionUpdateListener.positionChanged:1728
I/ViewRootImpl@892b8a5MainActivity: mWNT: merge t to BBQ
I/ViewRootImpl@892b8a5MainActivity: [DP] pdf(0) 1 android.view.ViewRootImpl.lambda$addFrameCompleteCallbackIfNeeded$3$ViewRootImpl:4987 android.view.ViewRootImpl$$ExternalSyntheticLambda16.run:6 android.os.Handler.handleCallback:938
I/ViewRootImpl@892b8a5MainActivity: [DP] rdf()
D/ViewRootImpl@892b8a5MainActivity: reportDrawFinished (fn: -1)
I/ViewRootImpl@892b8a5MainActivity: MSG_WINDOW_FOCUS_CHANGED 1 1
D/InputMethodManager(15953): startInputInner - Id : 0
I/InputMethodManager(15953): startInputInner - mService.startInputOrWindowGainedFocus
D/InputMethodManager(15953): startInputInner - Id : 0
I/flutter (15953): Important warn: make sure set samples before setRenderTarget
I/flutter (15953): render cost: 55
I/flutter (15953): {geometries: 0, textures: 1}
I/flutter (15953): {frame: 1.0, calls: 0, triangles: 0, points: 0, lines: 0}
I/flutter (15953): render: sourceTexture: 3
D/com.futouapp.flutter_gl.flutter_gl.EglEnv(15953): egl make current
I/System.out(15953): Results of compiling source:
I/System.out(15953): Results of compiling source:
E/flutter (15953): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: NoSuchMethodError: Class 'GLTFParser' has no instance getter '_markDefs'.
E/flutter (15953): Receiver: Instance of 'GLTFParser'
E/flutter (15953): Tried calling: _markDefs
E/flutter (15953): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:38:5)
E/flutter (15953): #1 GLTFParser.parse.
And this is the error I get when i use the packages available from pubdev
Hi @alazarLaz,
This is the same issue as https://github.com/wasabia/three_dart/issues/133.
if tl;dr there is 2 options
- Use the older version of the repo e.g.(three_dart: 0.0.14 and three_dart_jsm:0.0.9)
or
- Use the forked version of this repo, which is still an older version, but some of the small issues have been fixed while they are working on getting a new version of this repo into pub.dev.
in you pubspec.yaml file add these
flutter_gl: 0.0.21
three_dart:
git:
url: https://github.com/Knightro63/three_dart.git
three_dart_jsm:
git:
url: https://github.com/Knightro63/three_dart_jsm.git
you need to use the examples from this repo or the examples from the older repo to get this to work since some of the variable names have changed from 0.0.14 to 0.0.16.
If you are using web and notice that your textures only load once please add the line below to you dispose function.
THREE.loading = {};
If you have a issue with flutter_gl kotlin-gradle-plugin:1.3.61 take a look at this issue https://github.com/wasabia/three_dart/issues/135.
Finally this does not work on iOS simulator or Linux.
Hope this helps.
Hi @alazarLaz,
This is the same issue as #133.
if tl;dr there is 2 options
- Use the older version of the repo e.g.(three_dart: 0.0.14 and three_dart_jsm:0.0.9)
or
- Use the forked version of this repo, which is still an older version, but some of the small issues have been fixed while they are working on getting a new version of this repo into pub.dev.
in you pubspec.yaml file add these
flutter_gl: 0.0.21 three_dart: git: url: https://github.com/Knightro63/three_dart.git three_dart_jsm: git: url: https://github.com/Knightro63/three_dart_jsm.git
you need to use the examples from this repo or the examples from the older repo to get this to work since some of the variable names have changed from 0.0.14 to 0.0.16.
If you are using web and notice that your textures only load once please add the line below to you dispose function.
THREE.loading = {};
If you have a issue with flutter_gl kotlin-gradle-plugin:1.3.61 take a look at this issue #135.
Finally this does not work on iOS simulator or Linux.
Hope this helps.
Resolving dependencies... (1.4s)
Because example depends on three_dart_jsm from git which doesn't exist (Could not find git ref 'HEAD' (usage: git rev-list [limiting output: --max-count=<n> --max-age=<epoch> --min-age=<epoch> --sparse --no-merges --min-parents=<n> --no-min-parents --max-parents=<n> --no-max-parents --remove-empty --all --branches --tags --remotes --stdin --exclude-hidden=[receive|uploadpack] --quiet ordering output: --topo-order --date-order --reverse formatting output: --parents --children --objects | --objects-edge --disk-usage[=human] --unpacked --header | --pretty --[no-]object-names --abbrev=<n> | --no-abbrev --abbrev-commit --left-right --count special purpose: --bisect --bisect-vars
Im getting this issue
Hi @ShakeelKhalid1913,
It looks like flutter is trying to get three_dart_jsm: git not
three_dart_jsm:
git:
url: https://github.com/Knightro63/three_dart_jsm.git
Yaml files require 2 or 4 spaces as indentations to get the correct information below it for that repo.
Hope this solves the issue.
I somehow solved the issue. I used your repo, thanks. May I know why it takes long time to load webgl_animation_frames page.
for tokyo.gltf page render in few time. but it taking time to render other animation gltf files.
to load fbx. sometimes it works next time it does not. sambadancing fbx works. and if I try other fbx it does not work for them.
it stuck here
Hi @ShakeelKhalid1913,
GLTF files have a lot of data in them and parsing them into there respective parts takes time. It could be optimized by not using dart and doing it natively then sending that info to dart, but that would take time to code.
As for the not loading on web more than once issue could you add this to the dispose function.
THREE.loading = {};
Hope this helps.
It could be optimized by not using dart and doing it natively then sending that info to dart
Can webview flutter help in this? if yes. it would be helpful if you provide any tutorial. My project is related to sign animation and I have animations in glb/gltfs. i just want to play them on screen according to the user input.
Hi @ShakeelKhalid1913,
I noticed there is a null value in the loader function. This will keep the function from loading.
Can you change
var result = await loader.loadAsync('animate7.gltf',null);
to
var result = await loader.loadAsync('animate7.gltf');
I did some tests with three_dart vs three.js and the difference for web is 100ms to 2sec. It was worse on safari and edge at about 2 sec difference. Chrome and Firefox was about 100-300ms. This will be different for types of computers. So I don't think webview would help with this.
Not sure how your app is set up but you might try having a home page and start loading them asynchronously in the background and stored globally. Just watch for excess memory usage https://docs.flutter.dev/tools/devtools/memory.
Hi @ShakeelKhalid1913,
I noticed there is a null value in the loader function. This will keep the function from loading.
Can you change
var result = await loader.loadAsync('animate7.gltf',null);to
var result = await loader.loadAsync('animate7.gltf');I did some tests with three_dart vs three.js and the difference for web is 100ms to 2sec. It was worse on safari and edge at about 2 sec difference. Chrome and Firefox was about 100-300ms. This will be different for types of computers. So I don't think webview would help with this.
Not sure how your app is set up but you might try having a home page and start loading them asynchronously in the background and stored globally. Just watch for excess memory usage https://docs.flutter.dev/tools/devtools/memory.
Thanks a lot. It really worked. According to my project i want to ask a question. Is it fine to load animations like this? There are almost 2000 words for now. Could all animations store in one glb file? I know that we can have multiple animations in one glb but don't know the limitations. Any idea?
Hi @ShakeelKhalid1913,
For this file type animations are not the problem since they are json based movement information. So, yes having all the animations in one file should be fine. The memory issue would come form the image sizes for the 3d object. Since gltf and glb files have a lot of texture information.
Right. i did not know this. as I never worked with animations before.
have a look at it. i have 2 animations in glb file for now. when I play them. i created a map with <name of animation, animationclip>
and get all animations that exist in map from string. its lagging like both animations are playing at same time. i want to add some duration between these two and also I tried THREE.loading = {}; in dispose but its playing animations in repeat
both animations are playing at same time.
Hi @ShakeelKhalid1913,
You are on the right track for your animations to play. Looks like you are missing a few things.
From my understanding: 1)Play one animation not on repeat 2)Have a duration between animations 3)Keep the animation in the same spot when done playing
import 'dart:async';
Timer? _timer;
int currentDuaration = 0;
List<int> durations = [1917,2125];
Map<String,dynamic> animations = {};//make this a global variable
Future<void> initPage() async {
//other code above
mixer = THREE.AnimationMixer(model);
for(int i = 0; i < result["animations"].length; i++){
AnimationClip animationClip = result["animations"][i];
animations[animationClip.name] = animationClip;
}
List<String> animationName = widget.animations.split(" ");
_timer = pause(); //add _timer?.cancel(); to dispose function
}
//other code below
Create a new void function
late AnimationAction action;
Timer pause(){
return Timer(Duration(milliseconds: durations[currentDuaration]), () {
if(currentDuaration < durations.length){
playAnimation(animationName[currentDuaration]);
_timer = playDuration();
currentDuaration++;
}
_timer?.cancel();
});
}
void playAnimation(String animation){
if(animations.containsKey(animation)){
action = mixer!.clipAction(animation)!;
action.repetitions = 1; //keeps the action from repeating
action.clampWhenFinished = true;//keep same position when done with action
action.play();//play animation
}
}
void render() {
//other code above
if(!action.isRunning() && currentDuration < durations.length){
_timer = pause();
}
//other code below
}
This might need some tweaking since I have not used this code.
Hope this helps.
It looks much sense now for me. but would it be a generic? because durations are stored in array. let's say each animation I want to play after 3 second. because no animation would be that long.
and One more thing there are some issue in Class AnimationMixer this function AnimationAction? clipAction(clip, [optionalRoot, blendMode])
whenever I try to play an animation that I already played on it (animation that stored in mixer) it gives me error of no "actionByRoot" function found and then knownaction //444 line var existingAction = actionsForClip.actionByRoot[rootUuid]; //221 line actionsForClip.knownActions
so I had to comment if condition of existing clip I had to remove else condition on 220 lines too. i think its better you test this by your own. then we can update repo? what do you think.
Hi @ShakeelKhalid1913,
To make it more generic between each animation use a counter for what animations you are on instead of the currentDuration and const Duration(seconds: 3) for the timer.
Thanks for letting me know of the issue. I will take a look to update both repos.
Yes. it works now. i have added counter and duration. Duration will be the current animation duration. everything is almost done. except build for android :( and orbitcontrol is not working. i want to control the camera
what could be the issue? do I have to change gradle version? the issue is in flutter_gl.
Hi @ShakeelKhalid1913,
Looks like you need to update flutter_gl in path 'C:\Users\shake\AppData\Local\Pub\Cache\hosted\pub.dev\flutter_gl-0.0.21\android\build.gradle'.
Please change the file to this.
group 'com.futouapp.flutter_gl.flutter_gl'
version '1.0-SNAPSHOT'
buildscript {
ext.kotlin_version = '1.7.20'
repositories {
google()
mavenCentral()
}
dependencies {
classpath 'com.android.tools.build:gradle:7.3.1'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
rootProject.allprojects {
repositories {
google()
mavenCentral()
flatDir {
dirs 'libs/aars'
}
}
}
apply plugin: 'com.android.library'
apply plugin: 'kotlin-android'
android {
compileSdkVersion 33
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
}
defaultConfig {
minSdkVersion 24
}
lintOptions {
disable 'InvalidPackage'
}
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'androidx.appcompat:appcompat:1.5.1'
implementation 'com.google.android.material:material:1.7.0'
implementation(name:'threeegl', ext:'aar')
}
You will also need to update your 'android/app/build.gradle' change compileSdkVersion to 33 and change targetSdkVersion to 33.
Hope this helps.
i'm getting this issue
FAILURE: Build failed with an exception.
- What went wrong: Execution failed for task ':app:checkDebugAarMetadata'.
Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find :threeegl:. Searched in the following locations: - file:/E:/Projects/FYP/flutter_three/android/app/libs/aars/threeegl.aar Required by: project :app > project :flutter_gl
- Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
- Get more help at https://help.gradle.org
this is what I modified in app/gradle of my project (I updated flutter_gl build file with above code too
android {
namespace "com.example.flutter_three"
compileSdkVersion 33
ndkVersion flutter.ndkVersion
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
}
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.flutter_three"
// You can update the following values to match your application needs.
// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
minSdkVersion flutter.minSdkVersion
targetSdkVersion 33
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
Hi @ShakeelKhalid1913 ,
Check to make sure threeegl.aar is in 'E:/Projects/FYP/flutter_three/android/app/libs/aars/threeegl.aar'. If it is not go get from 'three_dart/example/android/app/libs/aars' and place it in 'E:/Projects/FYP/flutter_three/android/app/libs/aars'.
Finally.. it works. Thank you so much for you help and kindness sir. if I have any query I will certainly approach you. I had now completely lost all courage but haha it worked this time.
The character is not showing properly. that is just the last problem (the problem was in web too). any guidance? Character was made in readyplayerme.
FYI i had also to add this in manifest -> android tools:replace="android:label"
Finally.. it works. Thank you so much for you help and kindness sir. if I have any query I will certainly approach you. I had now completely lost all courage but haha it worked this time.
The character is not showing properly. that is just the last problem (the problem was in web too). any guidance? Character was made in readyplayerme.
FYI i had also to add this in manifest -> android tools:replace="android:label"
Hi @ShakeelKhalid1913,
Thank you for the kind words. Sorry your character is not showing properly. Could you please describe to me why it is not showing properly?
I don't know kaybe the issue is in readyplayerme. I will try to add character from mixamo
Hi.. the issue is resolved. Now i want to add two functionalities.first is I want to control camera (orbit controller). and second one is i want to add image texture as background. i am having issue with both. any idea how can i solve this problem?
Hi @ShakeelKhalid1913,
Please go to here or here for the examples of orbit controls.
As for the background image in your initPage function add this code.
var textureLoader = THREE.TextureLoader(null);
textureLoader.flipY = true;
scene.background = await textureLoader.loadAsync('imageFile');
Hope this helps.
Hi @ShakeelKhalid1913,
While this question is not related to this issue, you have a couple of problems with the code you posted on stack. I am unsure of what you were asking because of the lack of info, but here is a shot in the "dart". Here is an example of a FutureBuilder in dart for this repo as your question seems to stem from a FutureBuilder problem.
- Your transcript function is a Future<String> but has no await. Thus, this function returns null or FutureOr to the future in FutureBuilder. Try adding await to the return.
return await app_services.transcriptFile(widget.audioRecorder.recordFilePath); - The submit widget is a final and null, and gets called in the build future, but never gets declared.
- Your child widget is also null when getting initialized. Try making your else statement return CircularProgressIndicator() to avoid any null return.
- Your if statement needs a return value as well for the FutureBuilder.
If you want this class to continue to update the text from a user input or other method you should probably switch from a FutureBuilder to a conditional statement and use setState to update the text.
String? responseText; // make this a global
Future<String> transcript(String method) async {
debugPrint(method);
app_services.transcriptFile(widget.audioRecorder.recordFilePath).then((transcript){
setState((){
responseText = transcript;
});
});
// Use the below statement if you wish to keep the FutureBuilder
// return await app_services.transcriptFile(widget.audioRecorder.recordFilePath);
}
Widget build(BuildContext context) {
return responseText == null?CircularProgressIndicator():Text(responseText);
}
Hope this helps.
Hi, @Knightro63 I have a huge .gltf file and want to cache it in Android and ios. For the web, the cache is happening by default. How can I do it for Android and ios?
Hi @hasnentai,
You will need to enable Cache for this to work. In you main.dart file add Cache.enabled = true;.
If you notice any issues let me know as I have not looked into this much. Also this does not work well on Blob types and you might see your images not updating correctly.
Hope this helps.