The WebGLRenderTarget texture is not displayed, please help to check

Thank you very much.I’m having a problem with the WebGLRenderTarget that doesn’t show up when I create it

 this.cameraPara = {
      "fov": 90,
      "aspect": this.container.offsetWidth / this.container.offsetHeight,
      "near": 1,
      "far": 1000
    this.RTScene = new THREE.Scene();
    this.RTcamera = new THREE.PerspectiveCamera(_this.cameraPara.fov, _this.cameraPara.aspect, 
    _this.cameraPara.near, _this.cameraPara.far);
    this.RTcamera.position.set(0.1, 1, 1);;
    var geometry = new THREE.PlaneGeometry(384, 192, 3, 3);
    const texture = new THREE.VideoTexture(video);
    texture.maxFilter = THREE.NearestFilter;
    texture.minFilter = THREE.NearestFilter;
    const material = new THREE.MeshLambertMaterial({ map: texture, side: THREE.DoubleSide });
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.z = 200
    const RenderTarget = this.RenderTarget = new THREE.WebGLRenderTarget(
   var scene = this.scene;
    var camera =;
    const geometry = new THREE.SphereGeometry(
    geometry.scale(-1, 1, 1) 
    var RenderTargettexture = this.RenderTarget.texture;
    const material = new THREE.MeshBasicMaterial({ map: RenderTargettexture, side: THREE.DoubleSide }); = true;
    var mesh = new THREE.Mesh(geometry, material); = "vrliveBox";
    this.renderer.render(scene, camera);
 render() {
    var width = this.container.offsetWidth;
    var height = this.container.offsetHeight;
    var scene = this.scene
    var camera =
    this.renderer.setSize(width, height);
    var _this = this;
    if (this.RenderTarget !== null) {
      this.renderer.render(_this.RTScene, _this.RTcamera)
    this.renderer.render(scene, camera);

I don’t know if there’s something wrong with the code, but it’s black in the display
I want the video to render on the SphereGeometry

If you need to provide other comments please say, I do not know WebGLRenderTarget, please forgive me

Thank you very much

Im sorry i can’t help, but it may be worth mentioning in the title that this is related to displaying a video. This may be slightly more complex than say just rendering some triangles into a texture because i think it can fail at two points. The texture may be rendering, but whatever was supposed to end up in the texture may not have been read if that makes sense.

You should render your scene, look at the camera position, adjust it, and then use it as webgl rendertarget.I think the map rendered by webgl rendertarget should be what your camera sees, so the map is black

Should I adjust my camera so that he can read my plane graphics

I think you should do this, just like you take a picture from one place, but your lens is not aimed at the object you want to take, and it will certainly not achieve the effect you want.

1 Like

I would like to ask, webGLRenderTarget camera, is not moving, how to fill the entire camera Angle

You can load the scene of planegeometry to adjust the position of the camera

Thank you very much, Let me try something like yours

I would also like to ask if the new version of THREE PlaneGeometry does not have faceVertexUvs

Correct, it doesn’t have that property.
Instead, it has geometry.attributes.uv, a buffer attribute with UV coordinates per vertex.


How should the current version be set up, * Same as the previous version
Geometry.FaceVertexUvs [0][m] = [UV [2], UV [3], UV [1]];
Is there a good example.Sorry, I’m not familiar with this,

    const max = mergeGeometry.boundingBox.max;
    const min = mergeGeometry.boundingBox.min;
    const offset = new THREE.Vector2(0 - min.x, 0 - min.y);
    const range = new THREE.Vector2(max.x - min.x, max.y - min.y);
    const uv = [];

    for (let i = 0; i < mergeGeometry.attributes.position.array.length; i += 3) {

      let u = (mergeGeometry.attributes.position.array[i] + offset.x) / range.x;

      let v = (mergeGeometry.attributes.position.array[i + 1] + offset.y) / range.y

      uv.push(u, v);


    mergeGeometry.setAttribute("uv", new THREE.Float32BufferAttribute(uv, 2, true));

Like this?

1 Like

我能回到之前的版本的 能使用face 和WebGLrenderTarget的版本吗

I think you’d better not do this. The new version of three has better performance and better effect. :beers:

  • Sorry, because I don’t know anything about UV :joy:

You can try to learn about UV. :blush:

Thank you so much,

I don’t know if my UV inside the red box is correct

  • I found that each rectangle showed only part of the content

This seems to be the problem of UV,This case seems to help you.