My blender object doesn't have color and looks awfull

Questions
,
1

Hi guys,
maybe simple problem for you, but I trying everything and still don’t have a luck.
In GLTF viewer see colors and edges

image
image749×590 17 KB

but on website not
image

export class ThreeDComponent  {
  @ViewChild('canvas')
  private canvasRef!: ElementRef;
  //THREE JS
  private loader = new GLTFLoader();
  private scene = new THREE.Scene();
  private camera = new THREE.PerspectiveCamera( 25, 10 / 10, 1, 2000 );
  private renderer = new THREE.WebGLRenderer();
  private controls = new OrbitControls( this.camera, this.renderer.domElement );

  
  private get canvas(): HTMLCanvasElement {
    return this.canvasRef.nativeElement;
  }
  
  ngOnInit(){
   
  this.camera.position.set( 1, 1, 20 );
  document.body.appendChild( this.renderer.domElement );
 
  this.loader.load( '/assets/blender/object3.gltf',  ( gltf ) => {
  
    
	gltf.scene.scale.set( 2, 2, 2 );			   
	gltf.scene.position.x = 2;				    
  
	this.scene.add( gltf.scene );
	this.renderer.setClearColor( 0xffffff, 0)

}, undefined, function ( error ) {

	console.error( error );

} );

    const animate = () => {
	  requestAnimationFrame( animate );
	  this.renderer.render( this.scene, this.camera );
	
   }

animate();

 
  }

 
  
   
}

gltf file :

"materials":[
		{
			"doubleSided":true,
			"emissiveFactor":[
				0.2882942855358124,
				0.12097963690757751,
				0.018022334203124046
			],
			"name":"Material.002",
			"pbrMetallicRoughness":{
				"baseColorFactor":[
					0.10599865019321442,
					0.8000000715255737,
					0,
					1
				],
				"metallicFactor":0,
				"roughnessFactor":0.5
			}
		}
	]

and also my gltf have .bin file after export from blender.

Thre is 2types of color emissiveFactor and baseColorFactor,when changing light ,color changing,but why doesn’t see edges of that ball like in preview ?
Do you know any tips pls?

2

done, so playing with light was good step forward :crazy_face:
private light = new THREE.HemisphereLight(0x404040, 0xFFFFFF, 0.5);