How would I remove the black background from the Sprite being Textured to the cube if it’s already got a transparent background to begin with?
The black background is coming from Phaser itself, since the default background color in Phaser is black. I don’t think it would matter that you make it transparent in Three.js. Every pixel of that texture is coming from the Phaser canvas and that includes the black background. Maybe there are some tricks in Three.js to make the black in the CanvasTexture transparent but if there is I am not aware how. Otherwise, you would have to do any kind of color manipulation on the Phaser side.
And 2ndly, how do I make my player in threejs interact with arcade physics & collision in phaser?
This would be extremely difficult. You need to look at this as having two different, encapsulated sets of game logic: one in Phaser and one in Three.js. The set of logic in the Phaser app is producing a texture that you have in Three.js, but all you have in Three.js is a set of pixels that make up that Phaser canvas. You don’t have sprites, physics, collisions, etc.
To merge these two sets of game logic, you would essentially have to wire it all together yourself. The best way I can decide to do it would be to choose which game engine you want the logic to run in, be it Phaser or Three.js. Then on that side, you would have to invisibly represent whatever exists in the other engine and send events back and forth to keep them in sync. So for example, if you wanted to have a 3D Three.js character existing inside of a Phaser game and you wanted it to react to collisions and the physics inside that Phaser game, you would need to make an invisible physics body in the Phaser game so you can actually run Phaser’s physics engine on it. But instead of displaying a sprite in Phaser for that character, you put the Three.js 3D character there. You would have to set up an event that you can call to update Three.js with how and where the 3D character should be displayed since the Phaser logic and the Three.js logic will be running separately. See what I mean?
The only other way I can see doing it would be to make an abstraction of the whole game that runs “above” both engines, and then it pushes that game state down to both Phaser and Three.js that displays the game correctly. This would still essentially use the method outlined in the previous paragraph but it would abstract it away from the game logic.
Either way, this will be a lot of work. The first option would be significantly less. The latter would be a very large project since you would essentially be making an entire game engine to stitch both engines together as a rendering layer.