We Keep Coding

convert dae to gltf, horizontal vector invalidation

I converted .dae to .gltf through this tool, and display through three.js, and found that the horizontal vector of the model seems to be invalid.
Example file
Convert tool interface:
The situation when I use .dae file to display:
let loaderDae = new ColladaLoader();
loaderDae.load(`assets/untitled.dae`, (dae: any) => {
this.buildingModel = dae.scene;
this.buildingModel.position.multiplyScalar(0);
this.scene.add(this.buildingModel);
});
The situation when I use .gltf file to display:
let loaderGLTF = new GLTFLoader();
loaderGLTF.load(`assets/untitled.glft`, (glft: any) => {
this.buildingModel = glft.scene;
this.buildingModel.position.multiplyScalar(0);
this.scene.add(this.buildingModel);
});
After zooming in(or out):
The gloss of the texture is also not the same. I don't know if it's a file conversion problem or a lighting problem. I am using ambientLight:
let ambColor = new THREE.Color('rgb(118, 240, 147');
this.ambientLight = new THREE.AmbientLight(ambColor);
this.ambientLight.name = 'testname';
this.scene.add(this.ambientLight)

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.

Babylon.js Issues loading MTL. Files onto OBJ. Models exported from Blender

I'm trying out Babylon.js to see if it has better capabilities and more versatility than Three.js. I wanted to test out the quality of 3D models in both by importing a simple model, but I cannot seem to get the MTL data to display the colors on the penguin that I made in Blender. How do I get it to show, or what do I need to modify about the model or file format to get it to work?
Also, I have already tried the STL format which does not display colors either.
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
camera.attachControl(canvas, true);
var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
BABYLON.SceneLoader.Append("./", "penguinmodel.obj", scene, function (scene) {});
return scene;
};
Full code and files at:
https://repl.it/#SwedishFish/Babylon-Testing

Hello you should export your model using gltf exporter. This is by far a more richer format and very well supported by Babylon.js

How to get the geometry of a model imported from STL in three.js

I'm using STLLoader to load STL file into three.js and I want to get the vertices (and the geometry) of the model after I call the loader for further usage. How can I do that? My current code is as below but I cannot get the geometry after calling the loader.
var loader = new THREE.STLLoader();
var myModel = new THREE.Object3D();
loader.load("myModel.stl", function (geometry) {
var mat = new THREE.MeshLambertMaterial({color: 0x7777ff});
var geo = new THREE.Geometry().fromBufferGeometry(geometry);
myModel = new THREE.Mesh(geo, mat);
scene.add(myModel);
});
console.log(myModel.geometry.vertices)

As of three.js R125, the recommended way to do this is with the loadAsync method, which is now native to three.js:
https://threejs.org/docs/#api/en/loaders/Loader.loadAsync
That method returns a promise. You couldthen use a 'then' to get the geometry of the STL and create the mesh. You could also use a traditional callback, or an async/await structure, but I think the example below using the native three.js method is the simplest way. The example shows how you can get geometry to a global variable once the promise is resolved and the STL file is loaded:
// Global variables for bounding boxes
let bbox;
const loader = new STLLoader();
const promise = loader.loadAsync('model1.stl');
promise.then(function ( geometry ) {
const material = new THREE.MeshPhongMaterial();
const mesh = new THREE.Mesh( geometry, material );
mesh.geometry.computeBoundingBox();
bbox = mesh.geometry.boundingBox;
scene.add( mesh );
buildScene();
console.log('STL file loaded!');
}).catch(failureCallback);
function failureCallback(){
console.log('Could not load STL file!');
}
function buildScene() {
console.log('STL file is loaded, so now build the scene');
// !VA bounding box of the STL mesh accessible now
console.log(bbox);
// Build the rest of your scene...
}

Three.js Blender Import Black Textures

im currently trying to update individual textures based on cursor position on imported JSON model. Below is the import code for the JSON model
var loader = new THREE.JSONLoader();
loader.load('slicedNew.json', function(geometry, materials) {
console.log(materials);
mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial( materials ));
mesh.scale.x = mesh.scale.y = mesh.scale.z = 8;
mesh.translation = THREE.GeometryUtils.center(geometry);
scene.add(mesh);
console.log('IMPORTED OBJECT: ', mesh);
});
Below is raycaster code for when the cursor is over a particular material
switch(intersects[0].face.materialIndex)
{
case 0:
console.log('0 material index');
intersects[0].object.material.needsUpdate = true;
intersects[0].object.material.materials[0] = new THREE.MeshLambertMaterial({
map: crate
});
break;
Anytime I hover over a certain side of the shape the texture is loaded but it is always black, even initialise the model to use the texture it still appears as black, yet I can load in a simple cube and map the image as a texture to this shape with no issues.
Any help would be appreciated.