jsfiddle demo
If I don’t set sprite.position.z = -20, I rotate the camera, it met my expectations:
But when I setsprite.position.z = -20, how to maintain Sprite‘s position when rotating the camera:
1 Like
Apparently, the Sprite’s properties only say that its plane will always face the camera (which is what you need for a background simulation like you want), and not that it won’t rotate (which you don’t need since it messes up the desired background simulation’s position). The fact that it doesn’t seem to rotate when you create it is because when positioned at (0, 0, 0) there is no “translation” / “movement” of the sprite, and its actual rotation is cancelled by the fact that it has to face the camera.
In other words, when the sprite is positioned at the (0, 0, 0) center of rotation it will look as it doesn’t rotate since it always faces the camera and doesn’t really move, but then positioned somewhere else, its rotation along the rotation direction / circle will be visible (even though it will still face the camera at all times), hence the undesired movement you noticed.
Understanding that the reason why you changed the sprite’s position was to avoid its intersection with the object, I took the liberty to fork your fiddle as an alternative and use another <div> where I put your background image from the other thread, placed it behind the Three.js canvas via z-index in CSS, made it not draggable so it doesn’t react to the drag in Three.js, and applied a color matrix filter to make it darker as you wanted. The color matrix simply lowers the Red, Green and Blue amounts (i.e. the matrix’ columns) for the Red, Green and Blue channels (i.e. the matrix’ rows) from their normal 1.00 values to half of their normal aka 0.50, leaving the Alpha amounts (4th column) and channel (4th row) untouched. If you find color matrix too complex you can always apply any other suited / simpler CSS filters to the image to achieve more or less the desired effect. Or, you can use another alternative from the ones I listed in the other thread - you decide. 
P.S. A bit of playing with the color matrix filter here, if you want to understand it better. It’s not as complicate as it seems, unless you want to do specific color alterations based on formulas.
Thank you a lot, I use two camera and two scene to achieve the effect, the demo is below, but I don’t know if it will bring extra expenses. And I choose to use the .color property of the material to make my image darker, because It is easy for me, by the way the css filters is so amazing!
updated demo
Ah, ok, no problem - I was aware of the duplicate camera + scene method, but I imagined you’d think of it as too redundant to have an idle scene just to have a background image working like you wanted, so I didn’t mention it. On the other hand, the .color method is straightforward and simple, just what you need.
Glad you got it working in the end. Yeah, the filters are nice and you might need them one day - I talked about the color matrix first because I also use it and it can do things with the colors that you generally would need multiple specific CSS filters otherwise (i.e. it’s roughly the “all in one” style).
Thanks for the updated demo, it makes things clear and it could prove useful for other readers in the future! 
1 Like