How do you put a second camera perspective on the 2D Screen Element?
Like in the example above, I would like for me to be able to see the camera view of the dronecase directly on the 2D Screen, so that I can see what I’m taking a picture of when I press the Take Pic button on the smartwatch UI element.
Hi @Lorenzmotors,
You can use a 2nd camera that renders on a render target. That is basically a texture that you can later use on your UI element.
Check this example on how to get started:
So, I looked at the code and extracted what might be related to what I need:
I get the following error:
I’m honestly not sure what most of the code means, and what I’m supposed to do in PlayCanvas in terms of what entities to add, or where to attach the script, etc.
Most likely you are missing a worldLayer variable, that would be something like this, make sure to add it before it’s required:
// get a reference to the world layer
const worldLayer = this.app.scens.layers.getLayerByName('World');
Yes, porting that code to your project requires some experience, agreed it’s not that easy. It won’t be a matter of copy/pasting. You will have to study and understand first what each part does.
So, I added the following code to get rid a few other errors that showed up after porting over the worldLayer:
I’m getting an error that says:
I see that the canvas is on the first line, as in
function example(canvas: HTMLCanvasElement, assets: { 'helipad.dds': pc.Asset }
, but to my understancing, this is automatically assumed by PlayCanvas? So, do I still need to add that line somewhere, and if so, where?
No you don’t need to create a new pc.Application instance. In a script you can access it like this:
const app = this.app;Okay, that’s what I was thinking, I just didn’t know how to write that.
I’m making progress; just a slight hiccup:
I copied and pasted the code exactly as it was in the example, but it’s saying there is a syntax error. Am I supposed to replace the string with a string, number with a number, color with a color, etc?
Oh no, you can’t copy paste that code directly, that is Typescript. It’s not supported in the PlayCanvas code editor, you need to rewrite it in Javascript.
Can I get a hint at least 
I think in this case you need to learn how to remove the type definitions from the Typescript code.
For example this TS (Typescript) code:
function createPrimitive(primitiveType: string, position: number | pc.Vec3, scale: number | pc.Vec3, color: pc.Color, layer: number[]) {
Translates to this JS (Javascript) code:
function createPrimitive(primitiveType, position, scale, color, layer) {
For more hints try looking for a TS tutorial online, you can find plenty.
Thank you for that!
So, I’m not getting any more errors, but the textureCamera isn’t showing up on the 2D screen.
How did you attach the render target texture to your UI element?
Well attaching a screen to an entity doesn’t do anything on its own. You will have to code that functionality in the script, mainly set the render target pc.Texture to an image element component texture (not at the screen).
This example for example does something similar, it creates a pc.Texture from a video source and it sets it on the diffuse map of a material:
https://developer.playcanvas.com/en/tutorials/video-textures/
