Three.js - THREE.Line cannot be executed when using WebGLDeferredRenderer

Question

I recently converted my scene to using WebGLDeferredRenderer as it is easier for me to implement SSAO. However, since the conversion to the deferred renderer cannot display the THREE.Line objects. Instead, I get the following error:

 THREE.Material: 'shading' parameter is undefined. 

This is the code for strings (grid), which works fine when I do not use deferred renderer:

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

I tried adding the shading property to THREE.LineBasicMaterial with a value like THREE.FlatShading , but I still get the same error.

The error is reported in the THREE.Material section of the main three.js script file. If this helps, I use a slightly customized version of three.js - http://alteredqualia.com/three/examples/js/three.max.deferredday.js

Any help is appreciated!

Update

Here is a quick hack with the open version of Three.js demonstrating this problem.

Answer 1

This is because strings and LineBasicMaterial not supported (yet) using WebGLDeferredRenderer.

As a job, you can do this:

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

Unfortunately, material.wireframeLinewidth also not supported.

three.js r.55