javascript - 三，不同 Material 和定向光强度的JS线

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;

在此场景中，我创建了一个带有屋顶的栏杆和一个定向光的小建筑物。
光的强度随时间在0到100之间振荡。

我的问题是关于栏杆，栏杆实际上只是一组简单的线条。

我希望随着光的强度变为零，整个建筑物和栏杆都变暗。

检查我的小提琴的第72和73行。

使用LineBasicMaterial创建我的栏杆时，无论光照强度如何，栏杆始终发光。那不是我想要的

如果将栏杆的材料属性更改为MeshPhongMaterial，则
栏杆确实会随着光强度变为零而逐渐变暗，但是此代码会在Chrome浏览器控制台上产生“ WEBGL错误：INVALID_OPERATION：vertexAttribPointer：无界ARRAY_BUFFER”。

我想我明白为什么会出现WEBGL错误。我认为是因为线条没有法线将光反射回去吗？或类似的东西。

不过，在我看来，我似乎应该可以对线条施加某种材质属性，以便可以通过场景的整体光照强度以某种方式降低线条的颜色强度，而不会出现WEBGL错误。几年前，我使用opengl编写了一个c ++程序，并且能够做到这一点而没有任何问题。这可能是THREE.js错误或WEBGL问题吗？当光线强度发生变化时，我可以动态更改线条的颜色值，但是有更好的方法吗？

谢谢！

最佳答案

LineBasicMaterial对灯光不响应，并且由于您提到的原因，其他材料不适用于线条。

您可以执行以下操作：

yellowLineBasicMaterial.color.setRGB( light.intensity / 100, light.intensity / 100, 0 );

另一种解决方案是对栏杆使用CubeGeometry，对栏杆材料使用MeshPhongMaterial，然后设置wireframe: true。在这种情况下，您应该获得想要的效果。

three.js r.58

关于javascript - 三，不同 Material 和定向光强度的JS线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16308730/