# CubaCamera won't cover all faces

**URL:** <https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645>\
**Category:** Questions\
**Tags:** cube-camera\
**Created:** [December 13, 2021, 8:15pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645 "2021-12-13T20:15:37Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![AfarsheziF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/afarshezif/32/15683_2.png) [@AfarsheziF](https://discourse.threejs.org/u/AfarsheziF)\
**Post date:** [December 13, 2021, 8:15pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/1 "2021-12-13T20:15:37Z")

</div>

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](https://threejs.org/examples/#webgl_materials_cubemap_dynamic), it seems all side reflection is possible.

what am i doing wrong?

My code:

```javascript
   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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/4/b475a11ce7f53a7916a581781e87d0873af1e5b1.jpeg)

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [December 13, 2021, 8:30pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/2 "2021-12-13T20:30:00Z")

</div>

> [@AfarsheziF](#):
>
> what am i doing wrong?

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [December 13, 2021, 8:51pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/3 "2021-12-13T20:51:20Z")

</div>

> [@AfarsheziF](#):
>
> `sphere.camera= cameraMaterial;`

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.

---

<div class="post-metadata">

**Author:** ![AfarsheziF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/afarshezif/32/15683_2.png) [@AfarsheziF](https://discourse.threejs.org/u/AfarsheziF)\
**Post date:** [December 13, 2021, 10:25pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/4 "2021-12-13T22:25:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AfarsheziF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/afarshezif/32/15683_2.png) [@AfarsheziF](https://discourse.threejs.org/u/AfarsheziF)\
**Post date:** [December 13, 2021, 10:30pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/5 "2021-12-13T22:30:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [December 14, 2021, 7:06am UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/6 "2021-12-14T07:06:20Z")

</div>

> [@AfarsheziF](#):
>
> In the linked example there is no update for the camera position

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

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

```

---

<div class="post-metadata">

**Author:** ![AfarsheziF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/afarshezif/32/15683_2.png) [@AfarsheziF](https://discourse.threejs.org/u/AfarsheziF)\
**Post date:** [December 14, 2021, 10:18am UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/7 "2021-12-14T10:18:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [December 14, 2021, 10:46am UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/8 "2021-12-14T10:46:28Z")

</div>

> [@AfarsheziF](#):
>
> These lines are making the perspective camera to rotate around the center.

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.

---

<div class="post-metadata">

**Author:** ![AfarsheziF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/afarshezif/32/15683_2.png) [@AfarsheziF](https://discourse.threejs.org/u/AfarsheziF)\
**Post date:** [December 14, 2021, 6:18pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/9 "2021-12-14T18:18:14Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/6/96b3b46d2ab4bbfc735bdebbe943cb26647ae809.jpeg)

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [December 14, 2021, 7:02pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/10 "2021-12-14T19:02:49Z")

</div>

See this example as an alternate example.  
It has 3 cube cameras. All cameras are inside the spheres.  
Example : [CubeCamera Reflections - Three.js Tutorials](https://sbcode.net/threejs/cubecamera/)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/d/0d5beb1c3d4e1837672bb34c32453e78ce6c7059.jpeg)

_three r135_

---

<div class="post-metadata">

**Author:** ![AfarsheziF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/afarshezif/32/15683_2.png) [@AfarsheziF](https://discourse.threejs.org/u/AfarsheziF)\
**Post date:** [December 14, 2021, 7:11pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/11 "2021-12-14T19:11:19Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [December 14, 2021, 9:10pm UTC](https://discourse.threejs.org/t/cubacamera-wont-cover-all-faces/32645/12 "2021-12-14T21:10:13Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/c/2cae04c90586f3ed41120f67fef761df0da97afe.jpeg)