Question about FBXLoader/GLTFLoader

[sunyonglincanada]

Hi there,

I was trying to load a large fbx file using harp.gl but it did not render anything. Not sure I implemented it correctly. Can anyone take a look? Here is the codepen - https://codepen.io/sunyonglincanada/pen/ZEpZOQK

Besides, I've got another question that does harp.gl support threejs GLTF loader to load 3D model?

Thanks in advance!!

[nzjony]

@sunyonglincanada great question.

I'll check out the codepen and see what the issue is.

Yes, we have some internal examples that use the GLTF loader to load a 3D model in harp... let me pull out some code.

import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

...

const loader = new GLTFLoader();

...

The following code goes inside a custom data source, and it would most likely go inside the: `getTile(tileKey: TileKey): Tile` method.

const tile = new Tile(this, tileKey); //Or whatever Tile implementation you have.

// Assuming you know where to put the model....
const geoPoint = new GeoCoordinates(latitude, longitude, altitude);
const tangentSpace = {
    position: new THREE.Vector3(),
    xAxis: new THREE.Vector3(),
    yAxis: new THREE.Vector3(),
    zAxis: new THREE.Vector3()
};
this.projection.localTangentSpace(geoPoint, tangentSpace);
const worldPos = tangentSpace.position;
const scaleFactor = this.projection.getScaleFactor(worldPos);
worldPos.sub(tile.center);
let data : ArrayBuffer = <loaded model>
loader.parse(
               data,
                ".",
                (gltf: GLTF) => {
                    for (const child of gltf.scene.children) {
                        const obj: TileObject = child;
                        obj.displacement = worldPos;
                        obj.scale.setScalar(scaleFactor);
                        obj.setRotationFromMatrix(
                            new THREE.Matrix4().makeBasis(
                                tangentSpace.xAxis,
                                tangentSpace.yAxis,
                                tangentSpace.zAxis
                            )
                        );
                        obj.renderOrder = this.m_renderOrder ?? 1000;
                        obj.receiveShadow = tile.mapView.shadowsEnabled;
                        obj.castShadow = tile.mapView.shadowsEnabled;
                        if ((obj as any).material !== undefined) {
                            const alphaTest = 0.66;
                            const map = (obj as any).material.map;
                            const material = new THREE.MeshPhongMaterial({
                                map,
                                shininess: 60,
                                alphaTest,
                                polygonOffset: true, // prevent z-fighting at ground level
                                polygonOffsetFactor: -1.0,
                                polygonOffsetUnits: -1.0
                            });
                            (obj as any).material = material;

                            //Needed for shadows... can remove if you don't have shadows
                            const customDepthMaterial = new THREE.MeshDepthMaterial({
                                depthPacking: THREE.RGBADepthPacking,
                                map,
                                alphaTest
                            });

                            (obj as any).customDepthMaterial = customDepthMaterial;
                        }
                        registerTileObject(tile, obj, GeometryKind.Building);
                        if (obj.type === "Mesh") {
                            const mesh = obj as THREE.Mesh;
                            mesh.geometry.computeBoundingBox();
                            this.maxGeometryHeight = Math.max(
                                this.maxGeometryHeight,
                                mesh.geometry.boundingBox!.max.z
                            );
                        }
                        tile.objects.push(obj);
                    }
                    this.requestUpdate();
                    resolve();
                },
                (error: ErrorEvent) => {
                    logger.error(`Error parsing GLTF model`);
                    resolve();
                }
            );

Sorry @sunyonglincanada, we don't have any open example doing this, but I will make a task that we do this.

[nzjony]

@sunyonglincanada , I fixed it, I led you down the wrong track, I saw in three.js there are some simple ways of loading GLTF models, see: sunyonglincanada/harp.gl-GLTF#1

[sunyonglincanada]

@sunyonglincanada , I fixed it, I led you down the wrong track, I saw in three.js there are some simple ways of loading GLTF models, see: sunyonglincanada/harp.gl-GLTF#1

Thanks so much @nzjony. let me check the PR and try it on my end.

[sunyonglincanada]

Hey @nzjony, I've checked on my end and it works fine using your method of loading GLTF models. I really appreciated your help with these back and forth discussions.

[nzjony]

@sunyonglincanada , glad it worked out and thanks for being involved.

[nzjony]

@sunyonglincanada , I look forward to see what cool stuff you can make with harp.gl and please reach out again if you have any troubles.

[sunyonglincanada]

Thanks @nzjony for the updates. I will try on my end and let you know if there is any issue.

[nzjony]

I don't quite understand your question:

Besides, I really appreciate the internal codes for GLTF loader you shared with me. For the code, GLTF loads the data to render the model. I am wondering if there is any relative code/example to load GLTF/GLB file directly using GLTF Loader pretty much like the FBXLoader way?

Do you mean you would like someway in the API to pass in a url / local file path and have harp.gl do this for you?

[sunyonglincanada]

https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_fbx.html

Thanks @nzjony for the updates. Let me try it on my end.

[sunyonglincanada]

I don't quite understand your question:

Besides, I really appreciate the internal codes for GLTF loader you shared with me. For the code, GLTF loads the data to render the model. I am wondering if there is any relative code/example to load GLTF/GLB file directly using GLTF Loader pretty much like the FBXLoader way?

Do you mean you would like someway in the API to pass in a url / local file path and have harp.gl do this for you?

Yup, you are correct. 😁 Is that doable based on the up to date harp.gl version?

[nzjony]

@sunyonglincanada , not yet, we would need to create the API, because you are the first person to request this. Please open an issue with what you want and then we can look to implement it.

[sunyonglincanada]

@sunyonglincanada , not yet, we would need to create the API, because you are the first person to request this. Please open an issue with what you want and then we can look to implement it.

Got it, I will open an issue for it. Much appreciated!