三.js |导入的 Blender 模型就像它以低质量渲染答案

【问题标题】：Three.js | Imported Blender model is like it's rendered in low quality三.js |导入的 Blender 模型就像它以低质量渲染
【发布时间】：2019-01-31 11:23:17
【问题描述】：

我在我的 Three.js 项目中导入了一个从 Blender 导出的 gltf 模型。

我知道模型是正确的，并且在https://gltf-viewer.donmccurdy.com/ 中完美呈现。

但在我的 Three.js 项目中，从这些屏幕截图中可以看出，它的质量似乎更差：

https://ibb.co/qrqX8dF（donmccurdy 查看器）

https://ibb.co/71wLDLJ（我的项目）

我不知道这是否可能是照明问题或渲染器对象中的某些设置问题。

这是我的渲染器和灯光设置：

// renderer
var renderer= new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor (0xf9f9f9, 1);
renderer.gammaOutput= true;
renderer.antialias= true;
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// light
var directionalLight= new THREE.DirectionalLight(0xffffff, 0.9);
scene.add(directionalLight);

任何帮助将不胜感激。

【问题讨论】：

如何设置渲染器？尝试使用以下几行，看看它是否会变得更好：renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight );
我做到了，但没有任何改变。我在我的问题中添加了渲染器和灯光设置。
从您的屏幕截图中，您看起来像是在使用高 DPI 显示器，而 Don 的查看器显示的是具有高 DPI 的模型，而您的查看器使用的是较低的分辨率。此外，您的照明设置看起来更加褪色，请尝试将灯移到一侧。

标签： javascript three.js gltf

【解决方案1】：

renderer.antialias=true;

这样设置antialias 参数是无效的。所有 WebGL 渲染上下文参数都必须应用于构造函数。就这样吧

renderer = new THREE.WebGLRenderer( { antialias: true } );

【讨论】：