Three.js | 导入的Blender模型就像低质量渲染一样

Question

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

任何帮助将不胜感激。

Answer 1

renderer.antialias = true;

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

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