Here I am again, this time wanting to understand the cause of the problem

Here I go again, this time I want to know the cause of the problem, the canvas background color is purple, is that the default color of the threejs engine?

A few months ago, I used hdr for lighting, and this problem also occurred. Recently, I used cubeMap for lighting, but the problem still occurred. I don’t want the background color to be purple, but this problem has been bothering me for a long time, and I still can’t solve it and can’t track it down; So I wish, can i change the background color of canvas to transparent instead of the default purple to solve the problem !!!!

My scene is very simple, just add a car model, and then use hdr or cubeMap for lighting, there is no additional code, it will only appear in ios, will not appear in Android, or I use loadManager can track this problem?

I’m really out of options!!!

image

I don’t know if this code works


scene.background = null

const loader = new THREE.CubeTextureLoader();
loader.setPath( ‘textures/cube/pisa/’ );

const textureCube = loader.load( [
‘px.png’, ‘nx.png’,
‘py.png’, ‘ny.png’,
‘pz.png’, ‘nz.png’
] );
scene. environment = textureCube;

Maybe you already resolved the problem, but here is what I would have tried:

  • sharing a live example, so people can see whether they get this magenta background too (I don’t have access to IOS, but many other do)
  • using another texture for the cube map can resolve the dilemma whether the problem is in the texture, or is not related to the texture
  • simplifying the program as much as it is possible (e.g. replacing the 3D model with a simple cube)
  • removing all decorations and special features (like posteffects, transparency, antialias) and reverting to more basic materials
  • trying the same code with regressively older Three.js releases – this will help to find whether some change in Three.js is “responsible” for the effect