三.js webglrenderer.render 问题答案

【问题标题】：Three.js webglrenderer.render issue三.js webglrenderer.render 问题
【发布时间】：2021-09-27 10:29:24
【问题描述】：

我正在使用 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();

谢谢

【问题讨论】：

请确保将库的所有部分更新到相同的版本。 EffectComposer 或 RenderPass 之类的含义文件应与 three.js 核心文件匹配。您所指的更改是在 r102 中引入的，并在迁移指南中提到：github.com/mrdoob/three.js/wiki/Migration-Guide#r101--r102
@Mugen87 感谢您的回复。在three.js的情况下，我有最后一个版本（“^0.130.1”）并且我已经阅读了这个版本中包含的后处理，但是当我尝试导入它时，nuxt.js控制台说我@987654330 @ 为此，我安装了一个带有效果器的 npm 包。我需要如何导入它才能拥有所有这些文件的最新版本？
所有示例类都是three npm 包的一部分。无需安装第三方包。我建议您阅读以下指南以获取更多信息：threejs.org/docs/index.html#manual/en/introduction/Installation。尤其是Examples 部分。
很抱歉坚持这个话题，但如果我像示例中那样使用导入，它会告诉我Must use import to load ES Module，如果我删除类型：模块，就会告诉我Cannot use import statement outside a module跨度>
@Mugen87 感谢您的宝贵时间。我已经解决了更新threejs的版本和修改nuxt.js配置。

标签： javascript html three.js nuxt.js webgl

【解决方案1】：

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

经过搜索，我发现加载此类文件的方法是在 nuxt.config.js 中包含这个小代码

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

【讨论】：