1

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 错误：无效操作：顶点属性指针：没有绑定 ARRAY_BUFFER”安慰。

我想我明白为什么 WEBGL 错误。我认为是因为线条没有法线来反射光线？或类似的东西。

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

谢谢！

4

1 回答 1

3

LineBasicMaterial对灯光没有反应，其他材料不适合做线条，因为你提到的原因。

你可以这样做：

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

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

三.js r.58

于 2013-04-30T21:23:09.987 回答