How to apply webGlRenderTarget texture properly?

Questions
, ,
1

i’m trying to make interactive screen of TV by using webGlRenderTarget as a screen texture, i created the second scene and camera, but nothing works properly. Despite it actually rendering on the screen, it doesn’t behaving as expected, i have a camera pointing at wrong coords, everything looks so distorted and if i’m rotating/moving camera it act so weird, like i have a huge scale, it’s too sensitive. i also can’t change camera’s angle.

here’s my secondary scene setup:

const renderTarget = new THREE.WebGLRenderTarget(1024, 1024)

    const screenScene = new THREE.Scene();
    screenScene.background = new THREE.Color(0x8e4a4a)

    const screenCamera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000)
    screenCamera.position.set(0,0,1)
    screenCamera.lookAt(0,0,0)

    const screenDirectionalLight = new THREE.DirectionalLight(0xFFFFFF, 5)
    screenDirectionalLight.position.z = 1
    screenScene.add(screenDirectionalLight)

    screenScene.add(new THREE.AmbientLight(0xffffff, 0.5));

    const mesh = new THREE.Mesh(
        new THREE.BoxGeometry(1, 0.1, 1),
        new THREE.MeshStandardMaterial({ color: 0xffffff })
      );

    mesh.position.set(0,0,0)

    screenScene.add(mesh)

    screenScene.add(new THREE.AxesHelper(3));
    screenScene.add(new THREE.GridHelper(10, 10));

here’s the full code: https://codepen.io/qwothex-/pen/Byyvmer

and the video of problem:

to move something for an inch, i need to use enormous values, how to make it look just like regular scene, with normal values, etc.?

3

@qwothex

It looks like the UVs of your virtual screen aren’t mapped from 0 to 1, instead only occupying a smaller region of that space.

Feel free to DM me if you want some help. I’ve done this before:

image
image1920×1080 120 KB

3 Likes
4

@manthrax thanks for your reply, i’d like to chat a little, how can i reach you? can’t text on linkedin without premium

5

I dm’ed you.