We Keep Coding

Load gltfs from firebase

I have a gltf file which exist in firebase storage folders and related textures are also located in that folders. I want to load that object into my view. I using THREE js for do this.
I tried get download url of gltf file and pass it it GLTFLoader. But model was not loaded to view.
I tried with this :
const loader = new GLTFLoader()
loader.load(
url,
(gltf) => {
gltf.scene.traverse( ( child ) => {
if ( child instanceof THREE.Mesh ) {
console.log(child.material.metalness)
if(child.material.metalness){
child.material.envMap = texture;
}
}
} );
var parent = gltf.scene;
var box = new THREE.Box3().setFromObject(parent)
var center = box.getCenter(new THREE.Vector3())
var size = box.getSize(new THREE.Vector3())
var maxAxis = Math.max(size.x,size.y,size.z)
parent.scale.multiplyScalar(1/maxAxis)
box.setFromObject(parent);
box.getCenter(center)
box.getSize(size)
parent.position.copy(center).multiplyScalar(-1)
scene.add(gltf.scene)
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
(error) => {
console.log(error)
}
)
If I load this file from local device, it is works fine and model display in view(all textures are load properly).
If anyone can help me how to load gltf file from firebase storage

I believe you should use getDownloadURL() from firebase like any other file. check this out Firebase Cloud

May not be the best solution but if you save the file as a .glb (binary version of .gltf), then there is only one file with textures already wrapped up in it. If not, you will need to store all the gltf data in one folder and load the whole lot including textures.

Three.js renders geometry wrongly

Three.js often renders unnecessary surfaces when loading .obj files (I haven't tried other types).
In the screenshot I attached below, there are some triangle surfaces that look like webbed fingers. How do I get rid of it?
I think the .obj file is okay because it's rendered correctly in Blender. It's exported from sketchup and it wasn't webbed before exporting.
View in Blender
View in Three.js
Below is the code I'm using to load .obj
const loadManager = new THREE.LoadingManager();
loadManager.addHandler(/\.dds$/i, new DDSLoader());
const loadObj = (path, mtl) => {
return new Promise((res) => {
new OBJLoader(loadManager).setMaterials(mtl).load(
path,
async (object) => {
scene.add(object);
render()
res(object)
},
() => {
console.log("loading .obj, started at", new Date());
},
() => {
console.log("loading .obj got error");
}
);
})
}
I have no clue to fix this problem. I'll appreciate any kind of opinion.
Thanks.

Loading a local glTF file into Javascript memory

I am using three.js and Capacitor to create a native iOS and Android app. I have some GLTF models that I want to load from some sort of asset folder that is bundled up with the code and delivered to a user, but I am not sure how to go about this.
This documentation on the GLTF Loader's load function, requires some sort of url. Parse, however, takes in a "glTF asset to parse, as an ArrayBuffer". How can I load this glTF file into memory and what is the best practice for doing so? I tried import * as Model from './models/myModel.gltf' but got a Cannot find module error.

Here my method to load a gltf file, I'm using reader to load any file in my scene, then it's parsing with loader.parse.
But if you want sample models folder I think you don't need reader method and parser. Just using load GLTF basic method and store your samples in an array or object.
I hope I helped you.
loadGltf(file, filename) {
reader.onload = readerEvent => {
const contents = readerEvent.target.result;
const loader = new THREE.GLTFLoader()
try {
loader.parse(contents, '', function (gltf) {
gltf.scene.traverse(function(child) {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
currentModel = gltf.scene;
scene.add(gltf.scene);
});
}
catch(error) {
alert("Your file " + Load.filename + " was not parsed correctly." + "\n\n" + "ERROR MESSAGE : " + error.message);
}
}
reader.readAsArrayBuffer(file);
}

How to display 2d (.dwg) files offline in viewer using pure Javascript Autodesk

I am trying to display 2d file in viewer in Offline mode using pure Javascript. I have already uploaded and extracted dwg using https://extract.autodesk.io/ .
Extracted file contains many json.gz files and one folder. In this folder, it has manifest, metadata (json.gz file) and one .f2d file
I have given this file location to my viewer options
var docs = [{ "path": "./{foldername}/primaryGraphics.f2d", "name": "2D view" }];
var options = { 'docid': docs[0].path, env: 'Local' };
And my viewer initialization is
viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('MyViewerDiv'), {});
Autodesk.Viewing.Initializer(options, function () {
viewer.initialize();
viewer.loadModel(options.docid);
});
It is giving me error message in the viewer saying "We cant display the item you are looking for. It may not have been processed yet...." And giving me error code as 5 (Specified type is invalid).
Please help.

Please make sure that you have completely downloaded all extracted viewable bubbles of your DWG and the path of the model you want to load is correct, since error code 5 stands for NETWORK_FILE_NOT_FOUND.
I just tested this blocks_and_tables_-_metric.dwg from the AutoCAD Sample Files with the below code snippet, and it works fine.
var options = {
env: 'Local',
};
var doc = { 'rootFolder': 'Model', 'path': '29c9e407-f76f-a1c0-0972-dcb5b496fff9_f2d/primaryGraphics.f2d', 'name': '2D view' };
var viewerDiv = document.getElementById( 'MyViewerDiv' );
var viewer = new Autodesk.Viewing.Private.GuiViewer3D( viewerDiv );
Autodesk.Viewing.Initializer(options, function() {
if( viewer.initialize() != 0 ) return console.error( 'Failed to initialize viewer' );
var basePath = getCurrentBaseURL();
var modelFolderPath = basePath + doc.rootFolder + '/';
var modelFilePath = modelFolderPath + doc.path;
var modelOptions = {
sharedPropertyDbPath: modelFolderPath
};
viewer.loadModel( modelFilePath, modelOptions, onLoadModelSuccess, onLoadModelError );
});
function getCurrentBaseURL() {
var basePath = '';
var lastSlash = document.location.href.lastIndexOf( '/' );
if( lastSlash != -1 )
basePath = document.location.href.substr( 0, lastSlash + 1 );
return basePath;
}
/**
* viewer.loadModel() success callback.
* Invoked after the model's SVF has been initially loaded.
* It may trigger before any geometry has been downloaded and displayed on-screen.
*/
function onLoadModelSuccess( model ) {
console.log( 'onLoadModelSuccess()!' );
console.log( 'Validate model loaded: ' + ( viewer.model === model ) );
console.log( model );
}
/**
* viewer.loadModel() failure callback.
* Invoked when there's an error fetching the SVF file.
*/
function onLoadModelError( viewerErrorCode ) {
console.error( 'onLoadModelError() - errorCode:' + viewerErrorCode );
}
The file structure of the extracted model of blocks_and_tables_-_metric.dwg is shown below:
The file structure of 2D model I used is:

Preload Textures and Images in ThreeJS?

i wanted to ask if there is a simple solution to preload Textures and Images in ThreeJs.
I load them all into an array: myTextureArray.push(new THREE.ImageUtils.loadTexture('../textures/floor_red.jpg');
How can i check if and when all Textures are loaded successfully ?
Here is an older Version Link: http://museum.baraq.de/
Thanks for help!

There is a Loading Manager in Three.js you can use to keep track of your loaded Textures or Objects.
Example implementation:
var textureManager = new THREE.LoadingManager();
textureManager.onProgress = function ( item, loaded, total ) {
// this gets called after any item has been loaded
};
textureManager.onLoad = function () {
// all textures are loaded
// ...
};
var textureLoader = new THREE.ImageLoader( textureManager );
var myTextureArray = [];
var myTexture = new THREE.Texture();
myTextureArray.push( myTexture );
textureLoader.load( 'my/texture.jpg', function ( image ) {
myTexture.image = image;
} );
Tested in Three.js r71.