GLB Modify Material and add emission

Tresdesero · October 24, 2018, 4:27pm

Hi everyone,

Im new in this forum. I hope to start well

I have loaded a GLB painted and exported from Substance Painter.
The material and textures are embedded within the GLB.
The model has an emissive channel and texture.

My question is: How can I create a glow effect, if the material is embedded and I can not modify it?

I think that changing the color and intensity of the emission would work.

Im using google translate, sorry
Thanks

donmccurdy · October 24, 2018, 4:33pm

Hi @Tresdesero 3D file formats like GLB are just a way of creating normal three.js objects. Once you’ve loaded the file, you can modify its material and meshes like any other three.js object.:

model.traverse((o) => {
  if (o.isMesh) {
    o.material.emissive = new THREE.Color( 0x00ffff );
  }
});

Note that “glowing” effects require more than just an emissive material. You probably also want to use post-processing like the “Unreal Bloom” effect, as shown in https://threejs.org/examples/?q=unreal#webgl_postprocessing_unreal_bloom.

Tresdesero · October 25, 2018, 10:16am

Hi @donmccurdy thanks so much

Im not a developer. Im a 3D generalist learning a bit of script.

if I understand correctly, I have to replace “o” with the name of my model.
On the other hand, I’m not clear where to place the text.

Effectively that is the effect I seek. The Unreal Bloom. But I think it’s harder than I thought

// GLTF LOADER
var gltf = new THREE.GLTFLoader( )
gltf.load( “models/AUDITORIO_4.glb”, ( model ) => {
let Auditorio = model.scene
let hijo = Auditorio.children[ 0 ]
Auditorio.scale.x = Auditorio.scale.y = Auditorio.scale.z = 0.15;
Auditorio.castShadow = true;
Auditorio.receiveShadow = true;
Auditorio.position.y = -0.5;

Thanks

Tresdesero · October 25, 2018, 10:19am

// GLTF LOADER
var gltf = new THREE.GLTFLoader( )
gltf.load( “models/AUDITORIO_4.glb”, ( model ) => {
let Auditorio = model.scene
let hijo = Auditorio.children[ 0 ]
Auditorio.scale.x = Auditorio.scale.y = Auditorio.scale.z = 0.15;
Auditorio.castShadow = true;
Auditorio.receiveShadow = true;
Auditorio.position.y = -0.5;

// model.traverse((Auditorio) => {
// if (Auditorio.isMesh) {
// Auditorio.material.emissive = new THREE.Color( 0x00ffff );
// }
// });

Auditorio.traverse( ( child ) => {
if ( child instanceof THREE.Mesh ) {
child.castShadow = true;
child.receiveShadow = true
}
})

console.log(Auditorio)
addToScene(scene, [Auditorio])

})

Tresdesero · October 25, 2018, 10:44am

Hi @donmccurdy,

Ok I have done this:

>   Auditorio.traverse((o) => {
>     if (o.isMesh) {
>       o.material.emissive = new THREE.Color( 0x00ffff );
>       //o.material.emissiveIntensity = new THREE.Intensity( 5.0 );
>     }
>   });

And it seems to be working. I realized that my model already had a yellow color of emission that I painted in substance. I just need to change the intensity of the color and add the Unreal bloom effect.

Tresdesero · October 26, 2018, 12:47pm

Hi @donmccurdy,

Are you there? xD

Finally, this is the code that I am using and it works perfectly:

// GLTF LOADER
var gltf = new THREE.GLTFLoader( )
gltf.load( "models/AUDITORIO_4.glb", ( model ) => {
  let Auditorio = model.scene
  let hijo = Auditorio.children[ 0 ]
  Auditorio.scale.x = Auditorio.scale.y = Auditorio.scale.z = 0.15;
  Auditorio.castShadow = true;
  Auditorio.receiveShadow = true;
  Auditorio.position.y = -0.5;

  Auditorio.traverse( ( child ) => {
   if ( child instanceof THREE.Mesh ) {
     child.material.emissiveIntensity = 2
     console.log(child.material)
     child.castShadow = true;
     child.receiveShadow = true
   }
  })

the next step is to add Unreal Bloom to my emissive materials but its not working

var scene = new THREE.Scene( );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000, );

var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
// renderer.toneMapping = THREE.ReinhardToneMapping;
document.body.appendChild( renderer.domElement );
var axes = new THREE.AxesHelper(20);


window.addEventListener( 'resize', function( )
{
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize( width, height )
    camera.aspect = width / height;
    camera.updateProjectionMatrix( );
} );

// UNREAL BLOOM
var stats;
var composer, mixer;

var params = {
      exposure: 1,
      bloomStrength: 1.5,
      bloomThreshold: 0,
      bloomRadius: 0
    };

var clock = new THREE.Clock();
var container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );

var stats = new Stats();
container.appendChild( stats.dom )

var renderScene = new THREE.RenderPass( scene, camera );

var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
			bloomPass.renderToScreen = true;
			bloomPass.threshold = params.bloomThreshold;
			bloomPass.strength = params.bloomStrength;
			bloomPass.radius = params.bloomRadius;
      composer = new THREE.EffectComposer( renderer );
			composer.setSize( window.innerWidth, window.innerHeight );
			composer.addPass( renderScene );
			composer.addPass( bloomPass );




//
camera.position.z = 3;

controls = new THREE.OrbitControls( camera, renderer.domElement );

// Suelo
var GEO_Suelo = new THREE.PlaneGeometry( 150, 150, );
var MAT_Suelo = new THREE.MeshStandardMaterial( {color: 0xffffff, roughness: 0.9, side: THREE.DoubleSide} );
var MSH_Suelo = new THREE.Mesh( GEO_Suelo, MAT_Suelo );
MSH_Suelo.rotation.x = 67.545;
MSH_Suelo.position.y = -0.49;
MSH_Suelo.receiveShadow = true;

var GEO_Suelo_OP = new THREE.PlaneGeometry( 15, 15, );
var MAT_Suelo_OP = new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( 'img/Geometric_Vector.png' ), transparent: true, opacity: 1, roughness: 0.4, side: THREE.DoubleSide } );
var MSH_Suelo_OP = new THREE.Mesh( GEO_Suelo_OP, MAT_Suelo_OP );
MSH_Suelo_OP.rotation.x = 67.545;
MSH_Suelo_OP.position.y = -0.47;
MSH_Suelo_OP.receiveShadow = true;

var SKY_geometry = new THREE.SphereGeometry( 5, 32, 32 );
var SKY_material = new THREE.MeshStandardMaterial( { map: new THREE.TextureLoader( ).load( 'img/Sky_Texture.jpg' ), roughness: 1, emissive: 0xFDE6E5, emissiveIntensity: 0.75, side: THREE.DoubleSide } );
var SKY_Mesh = new THREE.Mesh( SKY_geometry, SKY_material );
SKY_Mesh.scale.x = SKY_Mesh.scale.y = SKY_Mesh.scale.z = 15;
SKY_Mesh.rotation.y = -30;
console.log(SKY_Mesh)



// console.log(new FogExp2(0xff0000))


// Create Lighting
var AmbientLight = new THREE.AmbientLight( 0xE4F1F9, 0.9 );

var Foco_V01 = new THREE.SpotLight( 0xFDBD98, 2, 20, 1, 1, 2 );
Foco_V01.position.set( 6, 5, 8 );
// Shadows
Foco_V01.castShadow = true;
Foco_V01.shadow.mapSize.width = 4096;
Foco_V01.shadow.mapSize.height = 4096;
Foco_V01.shadowDarkness = 10;
Foco_V01.shadow.camera.fov = 30;
Foco_V01.shadow.camera.near = 0.01;
Foco_V01.shadow.camera.far = 20
//Create a helper for the shadow camera (optional)
var helper_1 = new THREE.CameraHelper( Foco_V01.shadow.camera );

var Foco_V02 = new THREE.SpotLight( 0x7BC8FC, 4, 20, 2, 1, 2 );
Foco_V02.position.set( -5, 10, 3 );
// Shadows
Foco_V02.castShadow = true;
Foco_V02.shadow.mapSize.width = 4096;
Foco_V02.shadow.mapSize.height = 4096;
Foco_V02.shadowDarkness = 1.0;
Foco_V02.shadow.camera.fov = 30;
Foco_V02.shadow.camera.near = 0.01;
Foco_V02.shadow.camera.far = 20
//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( Foco_V02.shadow.camera );

// CARGAR TODOS LOS COMPONENTES DE UNA VEZ
addToScene( scene, [ Foco_V01, Foco_V02, AmbientLight, MSH_Suelo, MSH_Suelo_OP, SKY_Mesh,  ] )

function addToScene( scene, components ){
  for(let comp of components ){
    scene.add( comp )
  }
}

// GLTF LOADER
var gltf = new THREE.GLTFLoader( )
gltf.load( "models/AUDITORIO_4.glb", ( model ) => {
  let Auditorio = model.scene
  let hijo = Auditorio.children[ 0 ]
  Auditorio.scale.x = Auditorio.scale.y = Auditorio.scale.z = 0.15;
  Auditorio.castShadow = true;
  Auditorio.receiveShadow = true;
  Auditorio.position.y = -0.5;
  let usedMaterial = null

  Auditorio.traverse( ( child ) => {
   if ( child instanceof THREE.Mesh ) {
     child.material.emissiveIntensity = 2

     if(child.material.name=="MARS_EMISIVE_GOLDEN") usedMaterial = child.material
     console.log(child.material)
     child.castShadow = true;
     child.receiveShadow = true
   }
  })

  console.log(usedMaterial)

  var gui = new dat.GUI();
  gui.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {
  	usedMaterial.toneMappingExposure = Math.pow( value, 4.0 );
  } );
  gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
  	bloomPass.threshold = Number( value );
  } );
  gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
  	bloomPass.strength = Number( value );
  } );
  gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {
  	bloomPass.radius = Number( value );
  } );

  // console.log(Auditorio)
  addToScene(scene, [Auditorio])

})

// FPS
javascript:( function( ) { var script = document.createElement('script');
script.onload = function( ) { var stats = new Stats( );
document.body.appendChild( stats.dom );
requestAnimationFrame( function loop( ) { stats.update( );
requestAnimationFrame( loop ) } );
};
script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild( script ); } )( )


// game logic
function update( )
{
  //  cube.rotation.x += 0.01;
  //  cube.rotation.y += 0.005;
};

// Draw Scene
function render( )
{
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.render( scene, camera );
};

function GameLoop( ){
  requestAnimationFrame( GameLoop );

  update( );
  render( );
}

GameLoop( );

Any suggestion?

I call game.js like this:

<html>
  <head>
    <title>Prueba_V01_threejs</title>

    <style>
    body { margin: 0; }
    canvas { Width: 100%; height: 100%; }
    </style>

    <script src="scr/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/GLTFLoader.js"></script>
  </head>
  <body>

    <div id="container"></div>

    <script type="text/javascript" src="js/stats.min.js"></script>
	<script type="text/javascript" src="js/dat.gui.min.js"></script>
    <script type="text/javascript" src="js/Color.js"></script>
    <script type="text/javascript" src="js/EffectComposer.js"></script>
	<script type="text/javascript" src="js/RenderPass.js"></script>
	<script type="text/javascript" src="js/ShaderPass.js"></script>
	<script type="text/javascript" src="js/CopyShader.js"></script>
	<script type="text/javascript" src="js/LuminosityHighPassShader.js"></script>
	<script type="text/javascript" src="js/UnrealBloomPass.js"></script>
    <script type="text/javascript" src="js/game.js"></script>
  </body>
</html>

I have copied the threejs files in the path of my project and they work well

Thanks in advance

Tresdesero · October 26, 2018, 12:57pm

Can anybody help me?

donmccurdy · October 26, 2018, 4:47pm

You’ll need to be more specific about what isn’t working to get help, or (ideally) create a live demo. Do you have JS errors in the console? There’s a lot of code to read in this thread, and to even start diagnosing the problem visitors to this thread would have to copy all of your code into a new project and get it running. Unfortunately I don’t have time to do that; if you can create a demo this makes it easier to help you.

Note that the unreal bloom demo (three.js examples) provides some settings, and depending on your own settings you may see more emissive bloom or none at all.

Topic		Replies	Views
GLB / GLTF Model Shows BUT NO COLOR Questions textures , materials , loaders , blender-exporter , gltf-loader , react	19	16648	April 10, 2024
Emissive glowing effect on custom model Questions textures , shaders	8	812	July 21, 2023
Giving a .glb a texture in code Questions textures , typescript , gltf-loader	7	7243	January 1, 2021
(first time in 3D) load lights from GLB in scene Questions loaders , lights , scene	1	2705	June 29, 2021
How to map different textures to a glb model Questions materials , gltf-loader	2	1001	April 22, 2023

GLB Modify Material and add emission

Related Topics