三种不同材质和方向光强的js线条

Three.JS Lines with different materials and directional light intensity

本文关键字：方向 光强 线条 js 三种      更新时间：2023-09-26

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之间振荡。

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

我想让整个建筑和栏杆变暗，因为光的强度为零。

检查my fiddle的第72行和第73行。

当我用LineBasicMaterial创建栏杆时，不管光线强度如何，栏杆总是发光的。那不是我想要的。

如果我将栏杆的材质属性改为MeshPhongMaterial，那么栏杆在一定程度上随着光强度变为零而变暗，但是这段代码会在Chrome浏览器控制台上产生"WEBGL错误:INVALID_OPERATION: vertexAttribPointer: no bound 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

相关文章：