Dont' show background when under the ground

Questions
1

Hi there.

Is there an easy way to display the background image when view (camera) is above the ground and disable the image when the view is under the ground. Maybe replace it with just a gray color ?

// Scene
const scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
//scene.background = new THREE.Color( 0xa0a0a0 );
const canvas = document.querySelector('#c');

//Load background texture
const backgroundloader = new THREE.TextureLoader();
backgroundloader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg' , function(texture)
            {
             scene.background = texture;  
            });

// Ground 
const ground = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000, 100, 100 ), new THREE.MeshPhongMaterial( { color: 0xeeeeee, shininess: 1, depthWrite: false } ) );
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
ground.material.transparent = false;
ground.position.y = -0;
scene.add( ground );

const grid = new THREE.GridHelper( 1000, 1000, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.receiveShadow = false;
grid.material.transparent = true;
grid.position.y = -0.01;
scene.add( grid );
2

Something like this?

1 Like
3

Since there is no informational value in displaying a grey screen other than “you’re viewing the scene from underneath”, what you probably want to achieve is to limit the angular range of OrbitControls(). Here’s how to do that:

https://discourse.threejs.org/t/how-to-limit-x-axis-rotation/13434/2

1 Like
4

Yes ! Someting like that :wink: Thank you

Sorry, but there must be a misunderstanding. I still want to see the model from all sides, that included the
view from under the ground / model (Still see the grid). I just wanted to change the background to something else like a gray color, when you transition between the ground/grid.