We Keep Coding

Create a mesh from GLTFLaoder().load() in Thre.js

I have a local 3D object model and I load it with:
const loader = new GLTFLoader();
loader.load("path/to/model", gltf => {
scene.add(gltf.scene);
});
How should I create a mesh out of the gltf, because when I try:
loader.load("path/to/model", (geometry, materials) => {
var mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
mesh.position.z = -10;
});
I get the error:
Cannot convert undefined to object

I found out that actually by modifying the first function above like this:
loader.load("path/to/model", gltf => {
var object = gltf.scene.children[0];
scene.add(gltf.scene);
});
is the solution.
Because now object variable can be totally handled like a normal mesh.
Maybe a video to help you.

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.

THREE.TGALoader is not a constructor

I have a Boat modal that is being imported as a JSON. Right now I am trying to also import it's texture map to apply to it's mesh.
The model loads fine, but when I use TGALoader to try to load the texture's .tga file, I get this error:
Uncaught TypeError: THREE.TGALoader is not a constructor
I have searched around for any other instances of this and can't find any. I am extremly new to threejs so I'm sorry - this is probably a super noob question.
Here is my code for the Boat class:
var scale = 10;
class Boat {
constructor(scene) {
var loader = new THREE.JSONLoader();
var textureLoader = new THREE.TGALoader();
// Texture
var texture = textureLoader.load('models/BW Bandit all in one.tga');
// Model
loader.load('models/boat.json', handle_load);
function handle_load(geom, mats) {
var material = new THREE.MeshPhongMaterial({
color: 0xffffff,
map: texture
});
var mesh = new THREE.Mesh(geom, material);
scene.add(mesh);
mesh.position.z = -5;
mesh.scale.set(scale, scale, scale);
mesh.rotation.y = -90;
}
}
}

You need to source TGALoader.js loader at the top of your file.
So for example say:
<script src="path_to_parent_folder_of_threeJS/threeJS/examples/js/loaders/TGALoader.js"></script>

Three JS, add specularity (shine) to texture

I have a texture I am applying to an object in three.js. I want to add some specularity or shininess to it.
I see examples that look like this
new THREE.MeshPhongMaterial( {
color: 0x996633,
specular: 0x050505,
shininess: 100
} );
However, my code looks like this:
// texture
var texture = new THREE.Texture();
var imgLoader = new THREE.ImageLoader( manager );
imgLoader.load( 'assets/uv.png', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
// model
var loader = new THREE.OBJLoader( manager );
loader.load( 'assets/obj.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.side = THREE.DoubleSide;
child.material.map = texture;
}
} );
object.position.y = - 95;
scene.add( object );
}, onProgress, onError );
I am not sure where to add the shininess or specular setting since I'm not using a THREE.MeshPhongMaterial, or if I did use the THREE.MeshPhongMaterial, how to combine it with THREE.texture.

I would suggest you override the object's material when it's loaded.
var loader = new THREE.OBJLoader(manager);
loader.load('assets/obj.obj', function (object) {
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshPhongMaterial({
color: 0x996633,
specular: 0x050505,
shininess: 100,
map: texture,
side: THREE.DoubleSide
});
}
} );
object.position.y = - 95;
scene.add(object);
}, onProgress, onError);

three.js provides quite a lot of materials that all behave differently and use different properties to be configured (see these examples here to get an overview). If you want to get a glossy look, you will probably go for either MeshStandardMaterial or MeshPhongMaterial. The ducomentation will also tell you the properties available to configure the materials.
MeshStandardMaterial is something like a newer version of the phong-material. It's the more "correct" (physically speaking) and more computationally expensive option while the MeshPhongMaterial is a good approximation.
The piece of Information you are probably missing is that you can just replace materials as you like, so in your example that would be something like
if ( child instanceof THREE.Mesh ) {
var oldMaterial = child.material;
child.material = new THREE.MeshStandardMaterial({
side: THREE.DoubleSide,
map: texture
// ..if neccesary, copy properties like color from oldMaterial
});
}
to completely replace the material.

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? .