CubaCamera won't cover all faces

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 ); cubeCamera;

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

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

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

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

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.

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 );

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

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 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.

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.

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

three r135

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:

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.