CubaCamera won't cover all faces

Questions
1

Hello all.

I’m trying to add a cubeCamera to an object on position (0,0,0). In theory, the camera should reflect all sides. I’m able to have the camera working but It will render only a small part of the reflection (see image).
In this example, it seems all side reflection is possible.

what am i doing wrong?

My code:

   cubeRenderTarget = new THREE.WebGLCubeRenderTarget(1024, {
            format: THREE.RGBFormat,
            generateMipmaps: true,
            minFilter: THREE.LinearMipmapLinearFilter,
            mapping: THREE.EquirectangularReflectionMapping
        })
   cubeCamera = new THREE.CubeCamera(0.1, 10000, cubeRenderTarget);
   cameraMaterial = new THREE.MeshPhongMaterial({
            color: 0xffffff,
            envMap: cubeRenderTarget.texture,
   })

  sphere = new THREE.Mesh(new THREE.SphereGeometry(500), material); 
  sphere.add(cubeCamera );
  sphere.camera= cubeCamera;

// in update
  sphere.visible = false;
  sphere.camera.update(renderer, scene);
  sphere.visible = true;

Untitled
Untitled1920×1043 85 KB

2

You need a camera whose position is outside of the sphere.

3

I didn’t get, what is this line for?
As later you do this: sphere.camera.update(renderer, scene); which is strange, because sphere.camera now is MeshPhongMaterial, that has no .update() method that takes renderer and scene in its parameters.

4

Thanks for your reply. Sorry that was a typo, I fixed it to sphere.camera = cubeCamera

5

Thanks for your reply. How would i do that?
In the linked example there is no update for the camera position, and still the sphere can reflect other objects in all angles. I was trying to update the cubeCamera with the camera position, but still it won’t cover the whole sphere.

6

Seems like you have overlooked code lines 182 - 184 of your linked example:

	camera.position.x = 100 * Math.sin( phi ) * Math.cos( theta );
	camera.position.y = 100 * Math.cos( phi );
	camera.position.z = 100 * Math.sin( phi ) * Math.sin( theta );
7

These lines are making the perspective camera to rotate around the center. I’m already rotating the camera using orbitControls, no effect.

8

Sort of. They are moving the camera’s position on a circular path having a radius of 100 units. They are not rotating the camera about its own origin. The camera is always 100 units away from the center of the world (or your sphere, for that matter).

If the camera also rotates, that’s because the camera.target is at 0,0,0 and the camera is always looking at its target (hence that name), while moving on its circular path around the world center.

9

I tried that as well. More than this I took the whole setting and implemented in my sketch. Still I’m getting the camera to work only on one side. I believe the problem is that the material does not stretch itself on all the faces, see that in the attached image the box is visible on the sphere camera while it’s actually behind it, which means this is the back side reflection.
Also the other objects render the camera on only one side.

Untitled2
Untitled21543×1029 40.4 KB

10

See this example as an alternate example.
It has 3 cube cameras. All cameras are inside the spheres.
Example : CubeCamera Reflections - Three.js Tutorials

image
image750×345 60.6 KB

three r135

11

Thanks all. I figured it was the Water element that caused the error. Don’t have the solution yet but I lead I know where’s the error :wink:

12

you’re right. It’s something to do with the water.
if I flip the water upside down, i.e., it’s rotation.x = Math.PI / 2 and make its material side:THREE.BackSide it works better.
I can’t say what exactly is the cause yet.

image
image1063×624 64.4 KB