javascript - 素材と指向性光強度が異なる Three.JS Lines

Question

Three.js は非常に優れていますが、少し問題があります。

ここでフィドルを作成しました：

http://jsfiddle.net/ntsim/aekPu/4/

var railingGeo = new THREE.Geometry();
    railingGeo.vertices.push(new THREE.Vector3(50, 25, 50));
    railingGeo.vertices.push(new THREE.Vector3(50, 35, 50));

    railingGeo.vertices.push(new THREE.Vector3(-50, 35, 50));
    railingGeo.vertices.push(new THREE.Vector3(-50, 25, 50));
    railingGeo.vertices.push(new THREE.Vector3(-50, 35, 50));

    railingGeo.vertices.push(new THREE.Vector3(-50, 35, -50));
    railingGeo.vertices.push(new THREE.Vector3(-50, 25, -50));
    railingGeo.vertices.push(new THREE.Vector3(-50, 35, -50));

    railingGeo.vertices.push(new THREE.Vector3(50, 35, -50));
    railingGeo.vertices.push(new THREE.Vector3(50, 25, -50));
    railingGeo.vertices.push(new THREE.Vector3(50, 35, -50));

    railingGeo.vertices.push(new THREE.Vector3(50, 35, 50));

    var yellowLineBasicMaterial = new THREE.LineBasicMaterial({
        color: 0x777700,
        shading: THREE.FlatShading
    });

    var yellowMeshPhongMaterial = new THREE.MeshPhongMaterial({ //shininess: 40,
        specular: 0x770000,
        ambient: 0x770000,
        emissive: 0x000000,
        color: 0x777700,
        shading: THREE.FlatShading
    });

    var railing=new THREE.Line(railingGeo,yellowLineBasicMaterial); // railing glows yellow when lights are out
    //var railing = new THREE.Line(railingGeo, yellowMeshPhongMaterial); // railing dims when lights goo out but WEBGL ERROR ocurs 
    // error is:WebGL: INVALID_OPERATION: vertexAttribPointer: no bound ARRAY_BUFFER 

    building.add(railing);
    return building;

このシーンでは、1 つのディレクショナル ライトを使用して、屋根に手すりが付いた小さな建物を作成しました。光の強さは、時間とともに 0 から 100 の間で振動します。

私の質問は手すりについてです。これは実際には単なる一連の単純な線です。

光の強度がゼロになると、建物全体と手すりが暗くなります。

私のフィドルの72行目と73行目をチェックしてください。

LineBasicMaterial を使用して手すりを作成すると、光の強さに関係なく、手すりが常に光ります。それは私が望むものではありません。

手すりのマテリアル プロパティを MeshPhongMaterial に変更すると、光の強度がゼロになると手すりがやや暗くなりますが、このコードは Chrome ブラウザで「WEBGL エラー: INVALID_OPERATION: vertexAttribPointer: no bound ARRAY_BUFFER」を生成しますコンソール。

WEBGLエラーの理由を理解していると思います。線に光を反射する法線がないためだと思いますか？またはそのようなもの。

それでも、WEBGLエラーを発生させることなく、シーンの全体的な光の強度によって線の色の強度を何らかの形で減らすことができるように、線である種のマテリアルプロパティを強制できるはずだと私には思えます。何年も前に、opengl を使用して C++ プログラムを作成しましたが、問題なく実行できました。これは、THREE.js のバグまたは WEBGL の問題である可能性がありますか? 光の強度が変化したときに線の色の値を動的に変更できますが、もっと良い方法はありますか?

ありがとう！