Open tugalsan opened 4 years ago
@tugalsan i ll take a look next week. you can speedup my work by adding a link to the reproducer Thanks for your feedback.
Please reproduce the error with this, when you have free time. AutoSQLWeb.zip
@tugalsan i am sorry, but i can't run your demo, because of missed deps. Which model are you trying to load ? As i can see you are trying to cast Object to Object3D, but object isn't Object3D (app-0.js:216 ONLOAD.loadGLTF.o is not Object3D)
take a look at https://env-7073819.cloud.unispace.io/#WebglLoaderGltf
please proved me some details
hmm, i am working on update to 103 and looks like i can reproduce this issue ...
@tugalsan could you try something like :
loader.load("models/gltf/LittlestTokyo.glb", object -> {
Scene scene = Js.uncheckedCast(Js.asPropertyMap(object).get("scene"));
DomGlobal.console.log("isScene " + scene.isScene);
});
I will do it today... and report back to you
@tugalsan could you try something like :
loader.load("models/gltf/LittlestTokyo.glb", object -> { Scene scene = Js.uncheckedCast(Js.asPropertyMap(object).get("scene")); DomGlobal.console.log("isScene " + scene.isScene); });
@treblereel treblereel Thanks for the fix. I can now load gltf files. Here is the code update AutoSQLWeb.zip
I can load Flamingo.glb successfully with the function below
public void loadGLTF(Scene scene, CubeTexture material_envMap, String url) {
DomGlobal.console.log("ONLOAD.loadGLTF.url: [" + url + "]");
OnLoadCallback olc = new OnLoadCallback() {
@Override
public void onLoad(Object o) {
DomGlobal.console.log("ONLOAD.loadGLTF.o: " + o);
if (!(o instanceof Object3D)) {
DomGlobal.console.log("ONLOAD.loadGLTF.o is not Object3D");
}
DomGlobal.console.log("ONLOAD.loadGLTF.ml1");
Scene obj = Js.uncheckedCast(Js.asPropertyMap(o).get("scene"));
DomGlobal.console.log("ONLOAD.loadGLTF.ml2");
DomGlobal.console.log("isScene " + obj.isScene);
// Object3D o3d = (Object3D) o;
// Scene obj = o3d.getProperty("scene");
// if (material_envMap != null) {
// obj.traverse(child -> {
// if (child instanceof Mesh) {
// MeshStandardMaterial material = child.getProperty("material");
// material.envMap = material_envMap;
// }
// });
// }
DomGlobal.console.log("ONLOAD.loadGLTF.ml3");
scene.add(obj);
DomGlobal.console.log("ONLOAD.loadGLTF.ml4");
}
};
OnProgressCallback opc = new OnProgressCallback() {
@Override
public void onProgress(OnProgressEvent ope) {
DomGlobal.console.log("PROGRESS.loadGLTF: " + ope.lengthComputable + "/" + ope.loaded + "/" + ope.total);
}
};
OnErrorCallback oec = new OnErrorCallback() {
@Override
public void onError(PropertyHolder e) {
DomGlobal.console.log("ERROR.loadGLTF: " + e.toString());
}
};
GLTFLoader loader = new GLTFLoader();
loader.load(url, olc, opc, oec);
}
I can not load LittlestTokyo.glb becuase I cannot able to load DRACO loader successfully. It may be becasue of an error on my code. I couldnt figure it out yet. ERROR.loadGLTF: Error: THREE.GLTFLoader: No DRACOLoader instance provided.
VM18:22442 THREE.WebGLRenderer 102
app-0.js:200 ONLOAD.loadGLTF.url: [http://localhost:8080/AutoSQLWeb/gltf/Three4G/Flamingo.glb]
app-0.js:200 ONLOAD.loadGLTF.url: [http://localhost:8080/AutoSQLWeb/gltf/Three4G/LittlestTokyo.glb]
app-0.js:200 PROGRESS.loadGLTF: true/65536/77428
app-0.js:200 PROGRESS.loadGLTF: true/77428/77428
app-0.js:200 ONLOAD.loadGLTF.o: [object Object]
app-0.js:200 ONLOAD.loadGLTF.o is not Object3D
app-0.js:200 ONLOAD.loadGLTF.ml1
app-0.js:200 ONLOAD.loadGLTF.ml2
app-0.js:200 isScene true
app-0.js:200 ONLOAD.loadGLTF.ml3
app-0.js:200 ONLOAD.loadGLTF.ml4
app-0.js:200 PROGRESS.loadGLTF: true/65536/4133072
app-0.js:200 PROGRESS.loadGLTF: true/983040/4133072
app-0.js:200 PROGRESS.loadGLTF: true/4133072/4133072
app-0.js:200 ERROR.loadGLTF: Error: THREE.GLTFLoader: No DRACOLoader instance provided.
take a look at updated demos : https://env-7073819.cloud.unispace.io/#WebglLoaderDraco
@treblereel. It is true. I mixed up examples to use DracoLoader to load drc files and using DracoLoader to load gltf files.
By looking the example code:
https://github.com/treblereel/three4g-demo/blob/master/src/main/java/org/treblereel/gwt/three4g/demo/client/local/examples/animation/WebglAnimationScene.java
Here is the working source code to load LittlestTokyo.glb with DracoLoader addon.
package com.tugalsan.autosqlweb.client.lang.gl.threeJS;
import jsinterop.base.Js;
import org.treblereel.gwt.three4g.core.PropertyHolder;
import org.treblereel.gwt.three4g.extensions.loaders.DRACOLoader;
import org.treblereel.gwt.three4g.extensions.loaders.DRACOLoaderDecoderConfig;
import org.treblereel.gwt.three4g.extensions.loaders.GLTFLoader;
import org.treblereel.gwt.three4g.extensions.resources.TK_3JSResourceUtils;
import org.treblereel.gwt.three4g.geometries.BoxBufferGeometry;
import org.treblereel.gwt.three4g.helpers.GridHelper;
import org.treblereel.gwt.three4g.loaders.CubeTextureLoader;
import org.treblereel.gwt.three4g.loaders.OnErrorCallback;
import org.treblereel.gwt.three4g.loaders.OnLoadCallback;
import org.treblereel.gwt.three4g.loaders.OnProgressCallback;
import org.treblereel.gwt.three4g.loaders.OnProgressEvent;
import org.treblereel.gwt.three4g.loaders.TextureLoader;
import org.treblereel.gwt.three4g.materials.MeshBasicMaterial;
import org.treblereel.gwt.three4g.math.Color;
import org.treblereel.gwt.three4g.objects.Mesh;
import org.treblereel.gwt.three4g.scenes.Scene;
import org.treblereel.gwt.three4g.textures.CubeTexture;
public class TK_3JSModel {//MODEL LOADERS
public TK_3JSModel(TK_3JSProgramAbstract program) {
TK_3JSResourceUtils.addLib(TK_3JSResourceUtils.IMPL.getGLTFLoader());
{
TK_3JSResourceUtils.addLib(TK_3JSResourceUtils.IMPL.getDRACOLoader());
DRACOLoaderDecoderConfig dlc = new DRACOLoaderDecoderConfig();
dlc.type = "js";
DRACOLoader.setDecoderConfig(dlc);
}
}
public void d(String s) {
DomGlobal.console.log(text);
}
public void loadGLTF(Scene scene, String url, boolean isLoaderDraco) {
d("ONLOAD.loadGLTF.url: [" + url + "]");
OnLoadCallback olc = new OnLoadCallback() {
@Override
public void onLoad(Object o) {
d("ONLOAD.loadGLTF.onLoad.start.url: [" + url + "]");
Scene sceneGLTF = Js.uncheckedCast(Js.asPropertyMap(o).get("scene"));
d("isScene " + sceneGLTF.isScene);
scene.add(sceneGLTF);
d("ONLOAD.loadGLTF.onLoad.end.url: [" + url + "]");
}
};
OnProgressCallback opc = new OnProgressCallback() {
@Override
public void onProgress(OnProgressEvent ope) {
d("PROGRESS.loadGLTF: " + ope.lengthComputable + "/" + ope.loaded + "/" + ope.total);
}
};
OnErrorCallback oec = new OnErrorCallback() {
@Override
public void onError(PropertyHolder e) {
d("ERROR.loadGLTF: " + e.toString());
}
};
GLTFLoader loader = new GLTFLoader();
if (isLoaderDraco) {
DRACOLoader.setDecoderPath("js/libs/draco/gltf/");
DRACOLoader dl = new DRACOLoader();
loader.setDRACOLoader(dl);
}
loader.load(url, olc, opc, oec);
}
final public static String URL_GLTF_LittlestTokyo = "http://localhost:8080/AutoSQLWeb/models/gltf/Three4G/LittlestTokyo.glb";
final public static String URL_GLTF_Flamingo = "http://localhost:8080/AutoSQLWeb/models/gltf/Three4G/Flamingo.glb";
final public static String URL_GLTF_Horse = "http://localhost:8080/AutoSQLWeb/models/gltf/Three4G/Horse.glb";
}
(sorry, for some reason I cannot upload the updated project again)
To summarize, not to get ClassCastException, until it is fixed, one has to implement a "FIX_ON_LOAD_Object3D".
1) if one wanna set material.envMap, one should fix it like below (this happened when loading https://sketchfab.com/3d-models/matilda-7ddedfb652bd4ea091bc3de27f98fc02):
TK_3JSModel->lazyload()->TraverseCallback tcb_envMap = new TraverseCallback()
if (FIX_ON_LOAD_Object3D) {
Object oMaterial = Js.asPropertyMap(o3d).get("material");
MeshStandardMaterial material = Js.uncheckedCast(oMaterial);
} else {
MeshStandardMaterial material = o3d.getProperty("material");
}
2) if one wanna get Object3D.scene, one should fix it like below (this happens all the time):
TK_3JSModel->lazyload()->OnLoadCallback olc = new OnLoadCallback()
Object oScene;
if (o instanceof Object3D) {
Object3D o3d = (Object3D) o;
oScene = o3d.getProperty("scene");
} else if (FIX_ON_LOAD_Object3D) {
oScene = Js.asPropertyMap(o).get("scene");
}
Scene sniffedScene = Js.uncheckedCast(oScene);
3) if one wanna get Object3D.animations, one should fix it like below (this happens when loading LittlestTokyo.glb):
TK_3JSModel->lazyload()->OnLoadCallback olc = new OnLoadCallback()
if (o instanceof Object3D) {
Object3D o3d = (Object3D) o;
AnimationClip[] animationClips = o3d.getProperty("animations");
} else if (FIX_ON_LOAD_Object3D) {
Object oAnimations = Js.asPropertyMap(o).get("animations");
AnimationClip[] animationClips = Js.uncheckedCast(oAnimations);
}
Here is an example code: (Updated, now animations play with same speed)
threeJS (20200711) r3.zip
@tugalsan thanks! but the way, whick gwt version are you using and are you going to switch to j2cl ? (which is awesome)
@treblereel my gwt version is 2.9.0.
I would love to switch to j2cl. But two steps I have to deal with....
1) Elemental2: It took me litterlly one month to understand how to use elemental2 dom in your demo project. Even once I gave up three4g, and then return back, because there is actually no other rival to this library that I know of. Some how, I did able to combine my gwt project and elemental2 dom side by side.
2) I do not have any experience coding j2cl. I need to study it first. How I wish there is an migration tutorial for it... Actually I should search for it... Or should I wait for GWT3, which will force me to use j2cl anyway....
@tugalsan i have ported gwt-widgets to j2cl so you can use elemental2 and widgets. there is j2cl-maven-plugin which allow you to compile and run your existing gwt2 code using j2cl and closure compiler, so you can try it. We have a great community at gitter, so you can join it and discuss any topics like j2cl, elemental2 and so on
Hello,
First, Thank you for the big work on creating three4g. If I can able to use 3D in web using java, It will open me a new playground to freely live in :P
I am reading from threejs documentations that i should focus on gltf loader, not others. For that reason...
I am trying to load a gltf file, for a month long. Whatever file i use, i am getting the same error. Is it possible that there is an error in library?
Console-With Error Message:
Simple Debug Function
Simple GLTF loader function:
pom-client
pom-main