1

我使用三个.js Geomtry 构建了非常特殊的几何图形，使用面。几何图形表示相框的顶部。我的问题是，几何图形仅对地板上的某些面进行着色。使用平面或立方体，我没有这个问题。

http://postimg.org/image/xy1p2cmg1/

在图像上，您将看到 2 个黑色“东西”，这是两个不同大小的相框，它们具有自己复杂的顶点+面结构，仅部分投射阴影。尤其是里面的脸不投阴影，所以里面的阴影是空的。我在为 MeshPhongMaterials 着色时遇到了一些问题，但这不应该是这个问题的一部分。即使这里的图片不清楚，因为几何是黑色的，但我确信这些面关闭了整个几何。

这是带有线框的相同场景：

http://postimg.org/image/44uotqxsx/

代码如下所示：

// Lights
var spotLight = new THREE.SpotLight( 0xFFD073, 3, 2000, Math.PI/3, 10 );        // hex, intensity, distance, angle, exponent
spotLight.position.set( 100, 1700, 100 );

spotLight.shadowCameraVisible = true;
spotLight.castShadow = true;

spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;
spotLight.shadowCameraNear = 25;
spotLight.shadowCameraFar = 4000;
spotLight.shadowCameraFov = 50;

spotLight.shadowDarkness = 0.5;
spotLight.shadowBias = -0.0002;

scene.add( spotLight );


// build geometry from vertices and faces
function buildGeometry(vertices, faces) {
    var geo = new THREE.Geometry();

    //vertices
    for(var i = 0; i < vertices.length; i++) {
        geo.vertices.push( new THREE.Vector3( vertices[i][0], vertices[i][1], vertices[i][2] ) );
    }

    //faces
    for(var j = 0; j < faces.length; j++) {
        if(faces[j].length == 3) {
            geo.faces.push( new THREE.Face3( faces[j][0], faces[j][1], faces[j][2] ) );
        } else if(faces[j].length == 4) {
            geo.faces.push( new THREE.Face4( faces[j][0], faces[j][1], faces[j][2], faces[j][3] ) );
        } else {
            console.error(j + " face has " + faces[j].length + ", but needs 3 or 4 faces vertices");
        }
        geo.faces[j].color.setHex(Math.random() * 0xFFFFFF);
    }

    return geo;
}


// create the frame side
this.___frame_top = new THREE.Object3D();

// Note: position and rotation is done somewhere else...

// frame side 1
var geo_frame_side = buildGeometry(side_vertices, side_faces);
this.___frame_top.___frame_side = new THREE.Mesh( geo_frame_side, new THREE.MeshPhongMaterial({vertexColors: 0x439812, wireframe: wireframe}) );
this.___frame_top.___frame_side.material.side = THREE.DoubleSide;

// frame edge 1
var geo_edge_1 = buildGeometry(edge_vertices, edge_faces);
this.___frame_top.___frame_edge_1 = new THREE.Mesh( geo_edge_1, new THREE.MeshPhongMaterial({colors: 0x439812, wireframe: wireframe}) );
this.___frame_top.___frame_edge_1.material.side = THREE.DoubleSide;

// frame edge 2
var geo_edge_2 = buildGeometry(edge_vertices, edge_faces);
this.___frame_top.___frame_edge_2 = new THREE.Mesh( geo_edge_2, new THREE.MeshPhongMaterial({colors: 0x439812, wireframe: wireframe}) );
this.___frame_top.___frame_edge_2.material.side = THREE.DoubleSide;
this.___frame_top.___frame_edge_2.rotation.y = Math.PI;

// shadow
this.___frame_top.castShadow = true;
this.___frame_top.receiveShadow = true;
this.___frame_top.___frame_side.receiveShadow = true;
this.___frame_top.___frame_side.castShadow = true;
this.___frame_top.___frame_edge_1.receiveShadow = true;
this.___frame_top.___frame_edge_1.castShadow = true;
this.___frame_top.___frame_edge_2.receiveShadow = true;
this.___frame_top.___frame_edge_2.castShadow = true;

// put all together
this.___frame_top.add(this.___frame_top.___frame_side);
this.___frame_top.add(this.___frame_top.___frame_edge_1);
this.___frame_top.add(this.___frame_top.___frame_edge_2);

scene.add(this.___frame_top);

什么会导致这个阴影问题？我猜这不是threejs中的错误，可能我错过了代码和着色器的一些更深层次的机制？

帮助非常感谢！

4

0 回答 0