How to close water shadow in tilt photography model

Questions
1
shadow in tilt photography model

I have reference a ocean effects in my scene.It appears large area shadow because of the modle is tilt photography model.I just wanner to remove the shadow.what should I do?

Water.js

qq20180424-120703
39165764-a764312e-47b8-11e8-996a-15754ff9a655.jpg1441×737 640 KB

qq20180424-120726
39165767-a9f9e92e-47b8-11e8-81f6-1ef2b9a761ec.jpg1434×724 586 KB

2

It’s hard to see this in the image but I guess the dark ares are not shadows but (maybe wrong) reflections of the water material. Can you share a link to your application?

3

view.airlook.com/huaian

4

Does the ocean effect work if you don’t add the model of the city?

You might want to replace the model with something more simple (e.g. a torus geometry). Maybe the problem is related to the camera controls.

BTW: Is it also possible to unminify your code? It would be helpful to see how you add the ocean to the scene and how your camera controls are implemented.

5

hard to debug but the demo looks really cool!

6

This actually looks a lot like the same issue I am having.

Have not been able to reproduce it in a fiddle so far.

Problem started for me when the Mirror/Reflector code was changed recently.

Once I am able to reproduce I will link my fiddle.

7

I have already publish the sourceCode. The water code segment is in main.js.

8

Thank you for your attention

9

I was not able to find the problem so far. Can you please make a test and replace A3DEarthControls with OrbitControls? Any improvements?

Besides, please provide a reduced test case without such a complex model. It will be easier to find the issue if you can reproduce the visual error with a simple mesh.

1 Like
10

@titansoftime Do you mean this one:

1 Like
11

It’s similar to that in appearance. Whether the cause is the same, I am unsure.

Currently, I am just overwriting the current water/mirror code with the code from around r80.

I wish I could provide more information, I will get back to that issue and delve deeper.

I attempted to mimic the error in a fiddle and have frustratingly failed, spending hours on it lol. I will figure it out though.

I think it may be the controls as you have noted. Will test this weekend.

12

@Maplesog Maybe i’ve found something. The problem could be related to the combination of scene.background and Water. Can you please set the skybox in your application in this way:

var cubeTextureLoader = new THREE.CubeTextureLoader();

cubeTextureLoader.setPath( 'textures/cube/skybox/' );
var cubeTexture = cubeTextureLoader.load( [
   'px.jpg', 'nx.jpg',
   'py.jpg', 'ny.jpg',
   'pz.jpg', 'nz.jpg',
] );

var cubeShader = THREE.ShaderLib[ 'cube' ];
cubeShader.uniforms[ 'tCube' ].value = cubeTexture;

var skyBoxMaterial = new THREE.ShaderMaterial( {
   fragmentShader: cubeShader.fragmentShader,
   vertexShader: cubeShader.vertexShader,
   uniforms: cubeShader.uniforms,
   side: THREE.BackSide
} );

var skyBox = new THREE.Mesh( new THREE.BoxBufferGeometry( 1000, 1000, 1000 ), skyBoxMaterial );
scene.add( skyBox );

The idea is not to use scene.background. Just add the skybox as an ordinary object to the scene graph. Does this solve the problem?