Wash out texture when import | Three.js | Page 1

rain apex Jul 30, 2023, 7:38 PM

#

Here's the code dealing with the texture import part

#

loader = new THREE.CubeTextureLoader();
texture = loader.load([
  `./panorama/${environmentType}/skybox_0.png`,
  `./panorama/${environmentType}/skybox_1.png`,
  `./panorama/${environmentType}/skybox_2.png`,
  `./panorama/${environmentType}/skybox_3.png`,
  `./panorama/${environmentType}/skybox_4.png`,
  `./panorama/${environmentType}/skybox_5.png`
]);
scene.background = texture;

#

Note: The ${environmentType} is just a selection thing, don't care much about it

agile geyser Jul 30, 2023, 8:03 PM

#

set texture.colorSpace=THREE.SRGBColorSpace for each texture
and if you are using ACESFilmic encoding it'll make it look different too

rain apex Jul 30, 2023, 8:04 PM

#

So like this

#

texture.colorSpace=THREE.SRGBColorSpace
texture = loader.load([
  `./panorama/${environmentType}/skybox_0.png`,
  `./panorama/${environmentType}/skybox_1.png`,
  `./panorama/${environmentType}/skybox_2.png`,
  `./panorama/${environmentType}/skybox_3.png`,
  `./panorama/${environmentType}/skybox_4.png`,
  `./panorama/${environmentType}/skybox_5.png`
]);```

#

Hmm

#

Uncaught TypeError: Cannot set properties of undefined (setting 'colorSpace')

agile geyser Jul 30, 2023, 8:07 PM

#

mmm no , it has to be added on each THREE.Texture instance

what does 'texture=' variable contain ? its an array of THREE.Textures ?

rain apex Jul 30, 2023, 8:07 PM

#

agile geyser mmm no , it has to be added on each THREE.Texture instance what does 'texture='...

texture varible is empty

rain apex Jul 30, 2023, 8:08 PM

#

rain apex ```js texture.colorSpace=THREE.SRGBColorSpace texture = loader.load([ `./panor...

This part is in a function so I declare let texture; outside of the function

rain apex Jul 30, 2023, 8:08 PM

#

agile geyser mmm no , it has to be added on each THREE.Texture instance what does 'texture='...

What...

agile geyser Jul 30, 2023, 8:09 PM

#

before dealing with textures

are you using renderer.toneMapping = ACESFilmicToneMapping ?

rain apex Jul 30, 2023, 8:10 PM

#

#

Doesn't seem like it

#

But

#

#

I have these thing

agile geyser Jul 30, 2023, 8:11 PM

#

oh , try commenting that ReinHard line and make the exposure value 1

worthy needle Jul 30, 2023, 8:11 PM

#

I believe texture in your code is an array of Texture objects. You'd have to set the color space on the individual texture objects in the array, and do it after you load.

rain apex Jul 30, 2023, 8:12 PM

#

agile geyser oh , try commenting that ReinHard line and make the exposure value 1

This actually fix it....

#

Bruh

#

Thank you so much

#

@agile geyser

#

You're the best

#

🙌

agile geyser Jul 30, 2023, 8:13 PM

#

ah ! 🍻

rain apex Jul 30, 2023, 8:14 PM

#

LOL

#

!close

glacial breachBOT Jul 30, 2023, 8:15 PM

#

The tickets system is disabled for this server. Enable it at: https://yagpdb.xyz/manage/685241246557667386/tickets/settings.

rain apex Jul 30, 2023, 8:59 PM

#

@agile geyser

#

Remove ToneRemapping fix the Background texture

#

But it messes up my Model

#

Is there a way to exclude ToneRemapping effect on the scene.background?

agile geyser Jul 31, 2023, 11:50 AM

#

rain apex Is there a way to exclude ToneRemapping effect on the scene.background?

no i don't think so

for materials you can do material.tonemapping=false

but background is not a material

for models are you doing texture.colorSpace=THREE.SRGBColorspace anywhere ?

rain apex Jul 31, 2023, 12:54 PM

#

agile geyser no i don't think so for materials you can do material.tonemapping=false but b...

No

agile geyser Jul 31, 2023, 12:56 PM

#

rain apex No

Try adding it after whenever you load any texture

#

Oh yeah try the skybox

rain apex Jul 31, 2023, 12:57 PM

#

agile geyser Oh yeah try the skybox

Let me find a template first

#

I've never touched skybox

#

Hmm

#

Can I project 6 images onto a sphereGeometry?

#

Or I need to merge them first into 1 finalized texture and project it onto sphere?

rain apex Jul 31, 2023, 1:22 PM

#

#

I think I overloaded it

#

LOL

rain apex Jul 31, 2023, 1:48 PM

#

@agile geyser

#

Im done with the Skybox

#

let skyboxGeo = new THREE.BoxGeometry( 2000, 2000, 2000);
let skybox = new THREE.Mesh( skyboxGeo, materialArray );
scene.add( skybox );

#

How can I stop the ToneRemapping again?

agile geyser Jul 31, 2023, 2:04 PM

#

What does material array contain?

For each material add

toneMapped=false

rain apex Jul 31, 2023, 2:46 PM

#

agile geyser What does material array contain? For each material add toneMapped=false

let materialArray = [];
let texture_ft = new THREE.TextureLoader().load( './panorama/nether/skybox_0.png');
let texture_bk = new THREE.TextureLoader().load( './panorama/nether/skybox_1.png');
let texture_up = new THREE.TextureLoader().load( './panorama/nether/skybox_2.png');
let texture_dn = new THREE.TextureLoader().load( './panorama/nether/skybox_3.png');
let texture_rt = new THREE.TextureLoader().load( './panorama/nether/skybox_4.png');
let texture_lf = new THREE.TextureLoader().load( './panorama/nether/skybox_5.png');
  
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_ft }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_bk }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_up }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_dn }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_rt }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_lf }));
   
for (let i = 0; i < 6; i++)
  materialArray[i].side = THREE.BackSide;
   
let skyboxGeo = new THREE.BoxGeometry( 2000, 2000, 2000);
let skybox = new THREE.Mesh( skyboxGeo, materialArray );
scene.add( skybox );

#

So each texture_face, I need to set toneMapped = false?

#

Thanks

agile geyser Jul 31, 2023, 2:47 PM

#

for (let i = 0; i < 6; i++)
  materialArray[i].side = THREE.BackSide;
  materialArray[i].toneMapped= false;

https://threejs.org/docs/?q=material#api/en/materials/Material.toneMapped

#

also try

texture_ft.colorSpace=THREE.SRGBColorspace

for each texture

rain apex Jul 31, 2023, 2:49 PM

#

Yeah I know

#

Hmm

#

In THREEJS is there a framework to change texture Saturation?

agile geyser Jul 31, 2023, 2:51 PM

#

no

put the image through a html canvas

or use postprocessing (which will affect everything )

rain apex Jul 31, 2023, 2:53 PM

#

Hmm

#

I will try HTML canvas method then

#

Thanks Vis! You're the best!

#

🙌

rain apex Jul 31, 2023, 4:45 PM

#

Hey @agile geyser

#

You know the "Closest neighbour" option in scaling?

#

How can we apply that in THREEJS?

agile geyser Jul 31, 2023, 4:49 PM

#

rain apex How can we apply that in THREEJS?

is this texture related ?

https://threejs.org/docs/index.html?q=text#api/en/constants/Textures

rain apex Jul 31, 2023, 4:51 PM

#

agile geyser is this texture related ? https://threejs.org/docs/index.html?q=text#api/en/con...

Oh

#

I found the answer using ChatGPT lol

#

hollow ember Aug 31, 2023, 9:38 AM

#

Threejs can make a skybox with only this texture ?

worthy needle Aug 31, 2023, 4:23 PM

#

hollow ember Threejs can make a skybox with only this texture ?

(a) This should be asked in a new thread; (b) you might have to be a little more specific about what you mean.

hollow ember Aug 31, 2023, 6:06 PM

#

worthy needle (a) This should be asked in a new thread; (b) you might have to be a little more...

a) i dont know how to make a new thread b) it's simple, can i use this texture instead of 6 textures for a skybox, the question was clear ... it's resolved

#Wash out texture when import