cubeCamer help???

[dannyWoodford]

demo: https://codesandbox.io/s/lucid-dust-dv1qe?file=/src/containers/Scene.js

I can't seem to get the cubeCamera working and I can't find any examples of it being done in react-three-fiber. I was following this tutorial of how to do it in plain three.js. I've played around with it in many many many configurations but I can't get it to work. I'm trying to make the model reflective. I'm passing down a cubeCamera reference to the envMap in and I have a CubeCamera function in Scene.js to initiate and update the cubeCamera.
https://medium.com/@soffritti.pierfrancesco/dynamic-reflections-in-three-js-2d46f3378fc4

Comment-out line 32 in Model.js to see what it looks like without the error. Thanks for the help.

[Fasani]

I noticed you destructuring rendered from useThree but I think you mean gl.

const {
  gl,                           // WebGL renderer
  scene,                        // Default scene
  camera,                       // Default camera
  raycaster,                    // Default raycaster
  size,                         // Bounds of the view (which stretches 100% and auto-adjusts)
  viewport,                     // Bounds of the viewport in 3d units + factor (size/viewport)
  aspect,                       // Aspect ratio (size.width / size.height)
  mouse,                        // Current, centered, normalized 2D mouse coordinates
  raycaster,                    // Intternal raycaster instance
  clock,                        // THREE.Clock (useful for useFrame deltas)
  invalidate,                   // Invalidates a single frame (for <Canvas invalidateFrameloop />)
  intersect,                    // Calls onMouseMove handlers for objects underneath the cursor
  setDefaultCamera,             // Sets the default camera
} = useThree()

Also, you pass cubeCamRef to the <model> but in model.js you do props.cubeCam.

I didn't manage to get it working but these things I did notice.

[drcmda]

the whole thing looks broken to me from a react standpoint. you are defining components inside components, i think i have never seen anyone do that before.

function A() {
  function B() { ... }
  return <B />
}

the B component will mount and unmount every time A renders. that means every time you move your mouse everything will be unmounted, re-mounted, three will recompile shader materials, send geometries to the gpu, etc.

also, the way you handle the color shift, you are re-rendering your scene 60 times per second through react. you should never setState in events or animations. see: https://github.com/react-spring/react-three-fiber/blob/master/pitfalls.md

here's a working demo: https://codesandbox.io/s/floral-wildflower-r14o4

but still creates invalid colors. notice that mouse movement is already inbuilt, you can get normalized (-1/1) x/y coordinates directly from state. you just need to make sure you get colors between 0 and 255.

[drcmda]

this isn't valid color="0xffaabb" not even in the dom, you mean #ffaabb

[dannyWoodford]

Thanks, that all helped a lot.
I just have one last question. I'm having trouble using my own PerspectiveCamera. I was trying to get the one from the receipt working but I can't.

https://github.com/react-spring/react-three-fiber/blob/master/recipes.md#using-your-own-camera-rig

I need it so I can rotate the camera to the correct section when it is clicked on in the menu (projects for example). Right now I have the whole structure moving as a way to get around that but it doesn't work after well and is not the way it should be done anyway. The state of rotation is getting passed down into Scene.js from App.js.

https://codesandbox.io/s/quirky-villani-54ijn?file=/src/App.css

[drcmda]

drei has a really easy to use perspcam https://github.com/react-spring/drei/ , which you can use as the official one, or for off buffer purposes