Casting ThreeJs Camera video on Screen

🌵 Needle Engine
1

Hello,

Some time ago I saw a needle example where screens displayed in real time the content of a threeJs camera placed at a particular location.
However, I no longer see this example, has this functionality been removed?

Original Post on Discord

by user 224464722878005248

2

Hi, you could just use the RenderTexture (either assign in Unity or create it at runtime) and assign it to the camera. The texture can then be added to any material. That would be the easiest solution where you dont have to deal with blitting etc

3

Okay thanks

by user 224464722878005248

4

I tried to add it like it :
const renderTexture = new RenderTexture()
GameObject.addComponent(this.context.mainCamera, renderTexture)
const planeGeometry = new THREE.PlaneGeometry(5, 5);
const planeMaterial = new THREE.MeshBasicMaterial({ map: renderTexture });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
this.context.scene.add(plane)

But I got error and I don’t find examples on the Needle Documentation

by user 224464722878005248

5

You’re trying to add the render texture as a component here. That can’t work like that - I’ll try to send you an example in a little bit

6

See line 53 and onwards: Needle Engine RenderTexture & CullingMask - StackBlitz
Creating a camera + a render texture + assigning the rendertexture to the camera (69)

7

Here’s the code for future reference:


function createRenderTexture(scene: THREE.Scene) {
  const quad = ObjectUtils.createPrimitive(PrimitiveType.Quad);
  quad.position.z = -2;
  quad.scale.multiplyScalar(4);
  scene.add(quad);

  const cam = new THREE.PerspectiveCamera(90);
  cam.position.set(0, 2, 4);
  cam.lookAt(new THREE.Vector3(0, 0.5, 0));
  scene.add(cam);

  const rt = new RenderTexture(256, 256);
  if (quad.material instanceof THREE.MeshStandardMaterial)
    quad.material.map = rt.texture;

  const cameraComponent = GameObject.addNewComponent(cam, Camera);
  cameraComponent.targetTexture = rt;
}
8

Oh, thanks a lot

by user 224464722878005248

9

That’s the important part:

  const rt = new RenderTexture(256, 256);
  if (quad.material instanceof THREE.MeshStandardMaterial)
    quad.material.map = rt.texture;

  const cameraComponent = GameObject.addNewComponent(cameraObjectOrEmptyObject, Camera);
  cameraComponent.targetTexture = rt;
10

Yes I succeed
I don’t have Environnement Sphere, so I got a black background on my display, how can I change it ? (different color or make it transparent ?)

by user 224464722878005248

11

What do you want? You can set the clearFlags on the cameraComponent to solid for example

12

I found :
export declare enum ClearFlags {
Skybox = 1,
SolidColor = 2,
Uninitialized = 4
}

I need to use it as : cameraComponent.clearFlags = 2 ?

by user 224464722878005248

13

camerComponent.clearFlags = ClearFlags.SolidColor (or you can set 2 directly sure)

14

Okay, can I make my background transparent on my texture ? Instead of a solid color ?

by user 224464722878005248

15

Sure


  // render transparent:
  cameraComponent.clearFlags = ClearFlags.SolidColor;
  cameraComponent.backgroundColor = new RGBAColor(0, 0, 0, 0);
  if (quad.material instanceof THREE.MeshStandardMaterial)
    quad.material.transparent = true;
16

I updated the link above to the live sample :wink: