We Keep Coding

GLTF : Metalness difference between my scene and THREE.JS editor https://threejs.org/editor/

I've got a gltf file. When I import it inside the Three.js editor (https://threejs.org/editor/) I get a correct result when I add an environment map.
On the other hand, when I import my gltf in my project scene I've a different result. Even when I use the very same HDRI image. The metalness is way too shinny in this case.
Does anyone know what I'm missing? Thank you.
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
new RGBELoader()
.load( 'royal_esplanade_1k.hdr', function ( texture ) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = texture;
} );
loader.load(
'./gltf/canette.glb',
// called when the resource is loaded
function ( gltf ) {
obj = gltf.scene;
mixer = new THREE.AnimationMixer( gltf.scene );
action = mixer.clipAction( gltf.animations[ 0 ] );
//obj
scene.add( obj );
}
);
EDIT :
Here's a live demo.
Here's the gltf model.

Unfortunately, you are using a code snippet which does not match your actual three.js version. You have to use at least r131 (or better the latest one r141). Right now, you are using r129.
If you use three.js versions below r131, you have to use PMREMGenerator to prepare the environment map that you apply to PBR materials. Starting from r131, the engine is doing this for you so you don't have to worry about PMREMGenerator at all.

How to translate, rotate, scale GLTF 3D Model (Three.js)

Was wondering if it's possible to translate, rotate, scale a model after it has been loaded to the scene. Also im looking a better way to use the loaded, since I have multiple models that I want to add in my program, but I do not want to call `loaded.load(...); every time.
Here is what I use:
var loader = new THREE.GLTFLoader();
loader.load( 'models/model_environment/scene.gltf',
function ( gltf ) {
cube_Geometry = new THREE.BoxGeometry(10,10,10);
cube_Material = new THREE.MeshNormalMaterial();
cube_Mesh = new THREE.Mesh(cube_Geometry, cube_Material);
cube_Mesh.position.set(0,5,0);
canvas_Scene.add(cube_Mesh);
canvas_Scene.add(gltf.scene);
modelsLoaded = true;
},
undefined,
function ( error ) {
console.error( error );
}
);
Notice that the model that has been loaded is below 0 on Y Axis (Ground):

Clara.io json, geometry in three js

I have several models in Clara.io, according to their help if you export selection, then it will be file for JSONLoader, and if you export full scene it will be file for ObjectLoader. However non of export function working with JSONLoader (https://forum.clara.io/t/export-to-three-js-json-export-all-and-export-selected-both-export-scene-object/3709).
In my app I need only geometry from model to build Points object. So I'm looking for either methods to convert loaded object to Mesh, or some king of geometry subtraction from object itself. In helps and examples(both three and clara) I see only one action with loaded object - scene.add(object).
import THREE from 'three/build/three.module';
import {Scene,PerspectiveCamera,Fog,WebGLRenderer,ObjectLoader,Geometry} from 'three/build/three.module';
....
var loader = new ObjectLoader();
loader.load( 'assets/models/rabbit.json', function ( object ) {
//I don't need to add object here but this is the only thing that works
//scene.add(object);
//I need to do something like this
geometry2 = new Geometry();
geometry2.vertices = object.geometry.vertices; // ???
particles = new Points( geometry2, new PointsMaterial( { color: 0xff0000, size:5 } ) );
scene.add(particles)
});

So clara.io seems to export single object in scene. So the way to extract mesh from it is something like:
loader.load( 'assets/models/rabbit.json', function ( object ) {
//I don't need to add object here but this is the only thing that works
//scene.add(object);
//I need to do something like this
geometry2 = new Geometry();
geometry2.vertices = object.children[0].geometry.vertices;
//object.children[0] - the first mesh in exported object
particles = new Points( geometry2, new PointsMaterial( { color: 0xff0000, size:5 } ) );
scene.add(particles)
});

Three.js objloader + texture

I have been using Three.js for a few weeks now, I managed to apply a texture to a cube created directly via the code, but once I tried to load an OBJ file with OBJLoaderI noticed that I couldn't use the same method to load simple png or jpg textures with TextureLoader.
Now I'm not entirely sure what is going wrong, if either this is not the right way to do it, if I just can't load a simple image fine or if I'm not applying it right.
I've seen that applying a texture seems quite easy to do with an MTL file, but unfortunately I'm not sure how to make one.
My current code looks like something like this:
var loader = new THREE.OBJLoader( manager );
loader.load( 'models/tshirt.obj', function ( object ) {
object.position.x = 0;
object.position.y = -200;
object.scale.x = 10;
object.scale.y = 10;
object.scale.z = 10;
obj = object;
texture = THREE.TextureLoader('img/crate.png'),
material = new THREE.MeshLambertMaterial( { map: texture } );
mesh = new THREE.Mesh( object, material );
scene.add( mesh );
} );
But it just doesn't seem to work. The model doesn't load and gives me random errors from Three.js. If instead of the code above I change scene.add( obj); the model actually loads.
What should I be doing here? Should I just go ahead and try to make an MTL file?
My full working code can bee seen at http://creativiii.com/3Dproject/old-index.html
EDIT: The error I get when adding mesh instead of obj is
three.min.js:436 Uncaught TypeError: Cannot read property 'center' of undefined

Try this code:
var OBJFile = 'my/mesh.obj';
var MTLFile = 'my/mesh.mtl';
var JPGFile = 'my/texture.jpg';
new THREE.MTLLoader()
.load(MTLFile, function (materials) {
materials.preload();
new THREE.OBJLoader()
.setMaterials(materials)
.load(OBJFile, function (object) {
object.position.y = - 95;
var texture = new THREE.TextureLoader().load(JPGFile);
object.traverse(function (child) { // aka setTexture
if (child instanceof THREE.Mesh) {
child.material.map = texture;
}
});
scene.add(object);
});
});
The texture loading changes was taken from: How to apply texture on an object loaded by OBJLoader? .

How do I swap an OBJ object for another in Three.JS?

I am using ThreeJS to load OBJs into a webpage, which I have done succesfully, but now I want to add buttons to my page that will swap out the displayed OBJ file for a different one. I have attempted to name the object when loading it:
object.name = "selectedObject";
so that I can remove it from the scene when the new button is clicked
scene.remove( selectedObject );
and attach the new object:
scene.add(newobject);
But I am getting lost in how to implement this into the general code/what the correct syntax would be.
Here's the code for loading the model:
var objectloading = 'obj/male02/new.obj';
var loader = new THREE.OBJLoader( manager );
loader.load( objectloading, function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = -30;
scene.add( object );
}, onProgress, onError );
Any help is apreciated, thanks!

Well there's many ways to go about it. What it comes down to is that your code needs to account for what has been loaded. You can traverse a scene, but capturing and listing your obj files into specific lists on your own is much cleaner, especially later when implementing things like raycasting.
I would write some functions, perhaps even a class if I planned on supporting other mesh types in the future and wanted a single interface. Importantly, you do not pass the mesh name as the parameter to scene.add and scene.remove, you pass a reference to the actual object. Three.js does this so that it can nullify the parent and call the object "removed" dispatch event in the Three.js library.
So for example purposes, one way is to store your objects in a hash, and use the url to the mesh as the parameter for adding and removal.
var meshes = {};
addObj = function(url){
var objectloading = url;
var loader = new THREE.OBJLoader( manager );
loader.load( objectloading, function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = -30;
meshes[url] = object;
scene.add(object);
}, onProgress, onError );
}
removeObj = function(url){
scene.remove(meshes[url]);
delete meshes[url];
}
for example, toggle between two models,
in a button click:
removeObj('obj/male02/old.obj');
addObj('obj/male02/new.obj');
and then in another button click:
removeObj('obj/male02/new.obj');
addObj('obj/male02/old.obj');
Although any String can be used for member names in "meshes," using urls could become problematic if the application grows and the url is actually a service uri utilizing a POST request, then you'll need another layer of references, possibly and usually using the UUID give to each object added to Three.js.