Question

Three.js非常好，但我有一点问题。

我在这里创造了一个小提琴：

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 ERROR：INVALID_OPERATION：vertexAttribPointer：无绑定ARRAY_BUFFER”。

我想我理解为什么会出现WEBGL错误。我认为它是因为线条没有法线来反射光线？或类似的东西。

从来没有，在我看来，我应该能够用我的线条强制某种材料属性，这样线条颜色强度可以通过场景的整体光强度以某种方式减少，而无需获得WEBGL错误。几年前我用opengl写了一个c ++程序，我能够毫无问题地做到这一点。这可能是THREE.js错误还是WEBGL问题？当光强度发生变化时，我可以动态地改变线条的颜色值，但有更好的方法吗？

谢谢！

Answer 1

由于你提到的原因，

LineBasicMaterial没有响应灯光，而其他材料也不适合行。

你可以这样做：

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

另一种解决方案是使用CubeGeometry作为栏杆，MeshPhongMaterial作为栏杆材料，并设置wireframe: true。在这种情况下，你应该得到你想要的效果。

three.js r.58

Three.JS线具有不同的材料和定向光强度

1 个答案: