CubeCamera reflection issue (codepen included)

Questions
1

Hi, good people.
I am currently struggling with one issue. Check out the codepen : https://codepen.io/janek_marcepan/pen/ExpoywV
As you can see I am trying to get a reflection of the sphere floating above using CubeCamera. It works but in a strange way. I mean the reflection is clearly off ( position, scale ) to the point that I had to manipulate the position of the cube camera so that the reflection is visible at all.
Thanks for your help in advance !!! Greatly appreciated…
image

2

i think that’s not going to work with a cubecamera no matter what. reflections must be calculated in a specific way. there’s a reflectormaterial in threejs examples. it does look pretty silly though.

there’s a reflector that can blur in distance in the react + three world

if react’s not an option it has been ported to vanilla here on discord. search for “blur reflections” or something like that and you find it.

1 Like
3

Thanks for your reply!
No, React is not an option. The result should be a simple html+js package that can be served as a html5 advertisement :confused:

4

everything is html + javascript on the web. but as i said, a good looking material is available somewhere here on discourse. or try the reflector material in three/examples.

5

I glanced at the reflector object - it looks promising. Is there a non-module version of it so I could upload as few files in the project as possible? Meaning, I would like to avoid uploading the whole three js directory as I have to keep the files local. Thanks again !

6

npm create vite
cd yourfolder
npm install three
npm run dev

there is no away around modules, and everything that used to be non modular has been deleted. you don’t need to copy anything by hand, or upload threejs. whenever you’re ready you type “npm run build” and it creates a tiny distributable that you can upload.

btw i found it back, that’s the reflector in these demos above: Blurred reflections - #23 by Anderson_Mancini

1 Like
7

Thanks a lot. I will give it a try soon. I have no experience working with modules, but it looks not-that-complicated :slight_smile: I followed your link as well. Correct me if I am wrong, but it looks like some people turned the reflector material into a non-module version (MeshReflectorMaterial.es5.js) - at least this is my understanding of the forum thread.
Thank you a bunch for your support!

PS. As a side note - I have been trying to use ChatGPT to help me out with the reflective material before I came here. It turned out to be completely useless and wasted several hours of my life :slight_smile: