Skip to content

Three.js webglrenderer.render issue

I’m developing a site with three.js and Nuxt.js. When i try to use the EffectComposer, the console give me a lot of warnings like this:

three.webglrenderer.render(): the rendertarget argument has been removed. use .setrendertarget() instead.

In my case, I understand that it’s an issue with the newest versions of three.js, because if I use an earlier version of three.js(101) it’s works, but if I use the newest, I don’t know what I need to change.

This is part of code in the constructor:

    this.renderer.setPixelRatio( window.devicePixelRatio );
    this.renderer.setSize( window.innerWidth, window.innerHeight );
    this.container.appendChild( this.renderer.domElement );

    this.scene.background = new THREE.Color( 0x101010 );

    this.composer = new EffectComposer(this.renderer);
    this.renderPass = new RenderPass(this.scene, this.camera);
    this.composer.addPass(this.renderPass);

And this in the render function:

    this.counter += 0.01;
    this.customPass.uniforms["amount"].value = this.counter;
  
    requestAnimationFrame(this.render.bind(this));
    this.composer.render();

Thanks

Answer

For clarify this question, at the beginning, the error was that I was taking the postprocessing libraries from a non official npm and they had different versions. When I solved this problem, another appear, It was that it gives me this error when I tried to load the examples in my Nuxt code Must use import to load ES Module

After search, I have discovered that the way to load this kind of files it’s include this little code inside the nuxt.config.js

build: { transpile: [ 'three' ], }