three.js - 使用WebGLDeferredRenderer时无法渲染THREE.Line

Question

我最近将场景转换为使用WebGLDeferredRenderer，因为这样更容易实现SSAO。然而，自从转换到延迟渲染器后，我无法渲染THREE.Line对象。相反，我收到以下错误：

THREE.Material: 'shading' parameter is undefined.

这是一段代码，用于绘制网格线条，在不使用延迟渲染器时可以正常工作：

var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -2500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 2500, 0, 0 ) );

linesMaterial = new THREE.LineBasicMaterial( {color: 0xb9b9b9, linewidth: 0.1} );

for ( var i = 0; i <= 50; i ++ ) {

    var line = new THREE.Line( geometry, linesMaterial );
    line.position.z = ( i * 100 ) - 2500;
    scene.add( line );

    var line = new THREE.Line( geometry, linesMaterial );
    line.position.x = ( i * 100 ) - 2500;
    line.rotation.y = 90 * Math.PI / 180;
    scene.add( line );

}

我尝试为THREE.LineBasicMaterial添加一个shading属性，值为THREE.FlatShading，但仍然遇到相同的错误。

错误来自主要的three.js脚本中的THREE.Material部分。如果有帮助的话，我使用的是稍微定制过的three.js版本 - http://alteredqualia.com/three/examples/js/three.max.deferredday.js 感谢任何和所有的帮助！ 更新

这里是一个快速解决方案，用于修复Three.js公共版本中出现的这个问题。

- Robin Hawkes

Answer 1

那是因为在WebGLDeferredRenderer中，线条和LineBasicMaterial尚未得到支持。作为一种解决方法，您可以这样做：

var geometry = new THREE.PlaneGeometry( 5000, 5000, 50, 50 );
var material = new THREE.MeshBasicMaterial( { color: 0xb9b9b9, wireframe: true } );
scene.add( new THREE.Mesh( geometry, material ) );

很遗憾，material.wireframeLinewidth也不支持。

three.js版本为r.55。

- WestLangley