How do change the size and keep the color of a glb file?

Questions
1

I have a multi-color car in a glb file. The JavaScript code:

const carUrl = new URL('../assets/car.glb', import.meta.url);

and

assetLoader.load(carUrl.href, function(gltf) {
  const model = gltf.scene;
  scene.add(model);
  model.position.set(0, 0, 0);
}, undefined, function(error) {
  console.error(error);
});

The car loads and displays on the screen. The car size is very small and the color is black.

How do change the size and keep the color of a glb file?

2

Try using the scale vector on the model;

model.scale.set(10, 10, 10);
3

That works for size! Thanks Harold!!!

Anyone have ideas on keeping the color for the multi-color car?

4

check if your glb has the supported materials applied

5

Akroob, Don’t know what that means. When I view the glb with the 3D Viewer, the multi-color car looks good.

6

console.log(model)
Search for material type somewhere there and search in children aswell if present.
Im guessing this is a working model you got somewhere, Im assuming that the UVs and textures are in place and the model creator simply put some glossy material on it, which probably isnt supported by threejs.

7

Akroob, I created this 3D model using FreeCAD. Here is one angle:

The assetLoader, as is described in the first post, works fine, except the car is black.

8

Okay this seems to be a model without any textures, just a material with color on it right ? If thats the case then it most likely has a material applied to it that doesnt work with threejs. Also, I havent really tested exporting models with CAD programs, but its possible that the normals are not properly placed on it aswell.

9

You are correct. I downloaded a car from Sketchfab — Downloadable Cars - A 3D model collection by Jamie Rose (@jamien64) - Sketchfab —.

This car does show up in color! Thanks!

10

Could you link to the specific model? Does it show up in color with a three.js-based viewer like https://gltf-viewer.donmccurdy.com/ ? I would try to get the model looking as you expect, before you try to modify it.

11

https:// — TVR Tuscan S Special Edition 2001🇬🇧 - Download Free 3D model by ᗩᒪE᙭. Kᗩ.🚗 (@Alex.Ka.) [c8a325b] - Sketchfab"

12

The linked model works me. Just keep in mind, that the .gltf format textures come in separate folders. So you need to make sure that the folder location is correct. I recommend you download the .glb version, where the textures are combined into one file.

13

Sorry for the delayed response.

Akroob, Not sure which linked model you are using?

The Sketchfab TVR Tuscan S Special Edition 2001 glb does display in color when imported into JavaScript.

The FreeCAD 0.22.0dev.35209 exported colored car glb displays in color with viewed by the 3D Viewer — but displays as black when imported into JavaScript.

I am using glb.

14

Usually when things appear dark it’s because you don’t have enough lighting. For anything metallic be sure to use an environment map for lighting. Also check for any warnings in the JS console. If you can’t get that to work, please share a complete demo, as we don’t know anything else about your code.

15

The code can be downloaded from my website https://temp.foxping.com/ → Move 3D.zip.

16

It appears your scene has only an ambient light. That isn’t generally enough, and won’t work at all with metallic materials (all materials on this car are metallic). I would consider turning metalness off on these materials, and also using an environment map. A quick way to do that is THREE.RoomEnvironment:

17

Interesting observation. The code I’m using is from a YouTube tutorial. I learned a lot from that tutorial.

I replaced

const scene = new THREE.Scene();

with

const pmremGenerator = new THREE.PMREMGenerator( renderer );
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xbfe3dd );
scene.environment = pmremGenerator.fromScene( new RoomEnvironment( renderer ), 0.04 ).texture;

The browser screen is blank.

Looking at — three.js webgl - animation - keyframes — I see a few other changes. Not sure of which other changes are needed for my current .js code.

It is interesting that code is in HTML, and uses “import” … something new to me.

18

After I went back to my original code, I added

const directionaLightLeft = new THREE.DirectionalLight(0xFFFFFF, 100);
scene.add(directionaLightLeft);
directionaLightLeft.position.set(-30, 30, -10);
const directionaLightRight = new THREE.DirectionalLight(0xFFFFFF, 100);
scene.add(directionaLightRight);
directionaLightRight.position.set(30, 30, 10);

now I see color! Thanks for your recommendation!!!

The light is like a spot light. How do I illuminate the entire area? I currently have

const ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientLight);