Hello ,
i haven’t use three.js from 1 year and when i tried to switch to last three.js i ve got a big change in render about color . I ve found , it is when i switch from 140 to 141 . What is the reason , and how can i fix it . thank
pictures under140.jpg is a clear scene with three.js 140 .After switching to 141 under141.jpg is a dark scene
r141 removed a lot of legacy code (stuff that was deprecated more than 10 releases). I suspect your app relies on such code and needs now a migration task.
It’s best if you share your code which makes it easier to debug the issue. You could also use r140 and ensure no deprecation warnings are logged at the console. Upgrading to r141 should be then less bumpy.
the only part of code which contains something with render setting or light is here ( i dont know if it help ) :all the scene except light is coming from blender .
const renderer = new THREE.WebGLRenderer();
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
// console.log(renderer.info);
// console.log(renderer.capabilities);
renderer.shadowMap.enabled=true;
renderer.shadowMap.type=THREE.PCFSoftShadowMap;
renderer.antialias=true;
renderer.setSize( window.innerWidth, window.innerHeight );
/******** set camera ********/
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 30000 );
camera.position.z=170;
camera.position.x=1486;
camera.position.y=-820;
camera.up = new THREE.Vector3(0,0,1);
camera.lookAt(1458,-781,170);
var lumiere = new THREE.DirectionalLight(0xffffff,1);
lumiere.castShadow = false ;
scene.add(lumiere.target);
lumiere.target.position.set(0,0,160);
scene.add(lumiere);
lumiere.visible = false ;
lumiere.position.set(0,0,1);
var lumiereHelper = new THREE.DirectionalLightHelper(lumiere,5000);
scene.add(lumiereHelper);
/*************/
var lumiereOmbre = new THREE.DirectionalLight(0xffffff,1);
lumiereOmbre.castShadow=true;
lumiereOmbre.shadow.mapSize.width=2048;
lumiereOmbre.shadow.mapSize.height=2048;
lumiereOmbre.shadow.camera.near=1;
lumiereOmbre.shadow.camera.far=1000;
lumiereOmbre.shadow.camera.left = -200;
lumiereOmbre.shadow.camera.bottom = -150;
lumiereOmbre.shadow.camera.top = 150;
lumiereOmbre.shadow.camera.right = 200;
lumiereOmbre.shadow.camera.DefaultUp= new THREE.Vector3(0,0,1);
lumiereOmbre.position.set(0,0,1);
scene.add(lumiereOmbre);
lumiereOmbre.DefaultUp= new THREE.Vector3(0,0,1);
lumiereOmbre.visible = false ;
scene.add(lumiereOmbre.target);
var lumiereOmbreHelper = new THREE.DirectionalLightHelper(lumiereOmbre,400);
scene.add(lumiereOmbreHelper);
lumiereOmbreHelper.DefaultUp= new THREE.Vector3(0,0,1);
var cameraHelper = new THREE.CameraHelper(lumiereOmbre.shadow.camera);
scene.add(cameraHelper);
lumiereHelper.visible = false;
lumiereOmbreHelper.visible = false ;
cameraHelper.visible = false ;
/*****************************/
var lumiere3=new THREE.AmbientLight(0xffffff,0.1);
scene.add(lumiere3);
sun.init();
entre.set(0,0,0);
camSol.set(camera.position.x,camera.position.y,160 );
entre.addScaledVector( new THREE.Vector3( lumiere.position.x-camera.position.x ,
lumiere.position.y-camera.position.y ,
lumiere.position.z-160 ) , 0.1);
lumiere.position.set(sun.getX() , sun.getY() ,sun.getZ());
entre.addVectors(entre,camSol);
lumiereOmbre.position.set(entre.x,entre.y,entre.z);
lumiereOmbre.target.position.set(camera.position.x,camera.position.y,160);
lumiere.target.position.set(camera.position.x,camera.position.y,160);
soleil_jaune.position.set(sun.getX() , sun.getY() ,sun.getZ()) ;
if ( sun.getZ() <160 && sun.getZ() >-640 ) {
lumiere.visible = true;
lumiereOmbre.visible = true ;
soleil_jaune.visible=true ;
// soleil_rouge.visible = false ;
let intensite= 1 - ( 160 - sun.getZ())/800 ;
lumiere.intensity = intensite*0.25;
scene.background.r = 0.133+0.53 * intensite;
scene.background.g = 0.133+0.53 * intensite;
scene.background.b = 0.2+ 0.8*intensite;
lumiereOmbre.intensity= intensite ;
soleil_jaune.material.color.r = 0.2+0.8*intensite;
soleil_jaune.material.color.g = 0.2+0.8*intensite;
soleil_jaune.material.color.b = 0.133+0.53*intensite;
lumiere3.intensity = 0.05+ 0.2*intensite ;
}
if ( sun.getZ() < -640 ) { lumiere.visible=true;
lumiereOmbre.visible=true;
soleil_jaune.visible=false;
lumiere.intensity = 0 ;
scene.background.r = 0.133;
scene.background.g = 0.133;
scene.background.b = 0.2;
lumiereOmbre.intensity= 0 ;
// soleil_jaune.intensity = 0 ;
lumiere3.intensity = 0.05 ;
}
if (sun.getZ() > 160 ){
lumiere.visible=true;
lumiereOmbre.visible= true;
soleil_jaune.visible=true;
lumiere.intensity=0.25;
scene.background.r = 0.666 ;
scene.background.g = 0.666 ;
scene.background.b = 1;
lumiereOmbre.intensity= 1 ;
soleil_jaune.material.color.r = 1;
soleil_jaune.material.color.g = 1;
soleil_jaune.material.color.b = 0.666;
lumiere3.intensity =0.25;
}
These references to gamma are no longer in the WebGLRenderer API. Instead you can use:
renderer.outputEncoding = THREE.sRGBEncoding;
If you don’t need anything from 141, you can consider using 140.
hello,
thank you very much for the solution . work very well with ```
renderer.outputEncoding = THREE.sRGBEncoding;
i wish you a happy holiday and a happy new year for everybody :sunglasses:hello,
even if i doesnt need new function , i imagine there is , in new version of three.js , software optimization which increase speed in render . So it is a good thing to try new version . I ve already seen this type of better fps when swithing from old to new version of three.js
I understand your point, but that’s not how three.js works. Some versions can introduce regressions, some can introduce optimizations, some can have no impact on performance.