Three.js webglrenderer.render 问题

Question

我正在用 three.js 和 Nuxt.js 开发一个网站。当我尝试使用 EffectComposer 时，控制台会给我很多这样的警告：

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

就我而言，我知道这是最新版本的 three.js 的问题，因为如果我使用早期版本的 three.js(101) 它可以工作，但如果我使用最新的，我不知道我需要改变什么。

这是构造函数中的部分代码：

    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);

渲染函数中的这个：

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

谢谢

Answer 1

为了澄清这个问题，一开始的错误是我从非官方的npm中获取后处理库并且它们有不同的版本。当我解决这个问题时，另一个出现了，当我试图在我的 Nuxt 代码中加载示例时它给了我这个错误 Must use import to load ES Module

经过搜索，我发现加载这种文件的方法是在 nuxt.config.js

中包含这段代码

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

Three.js webglrenderer.render 问题

Three.js webglrenderer.render issue

javascript

html

three.js

nuxt.js

webgl