Question

我使用顶点和面创建了一个自定义几何体，但我似乎无法让它自己投射阴影。这些面都具有与旋转相同的颜色。这是我尝试过的：http://jsfiddle.net/ZZsXP/。

如何在不使用组合在一起的多个平面网格的情况下使其工作？

代码：

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    width = window.innerWidth / 2
    height = window.innerHeight / 2
    camera = new THREE.OrthographicCamera(-width, width, height, -height, -500, 1000)
    camera.position = new THREE.Vector3(1, 1, 1)
    camera.scale.set(0.4, 0.4, 0.4)

    scene = new THREE.Scene();

    geometry = new THREE.Geometry();

    sizeX = 180
    sizeY = 120
    sizeZ = 100

    geometry.vertices.push(new THREE.Vector3(sizeX / 2, 0, -sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(-sizeX / 2, 0, -sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(-sizeX / 2, 0, sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(sizeX / 2, 0, sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(sizeX / 2, sizeY / 2, -sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(-sizeX / 2, sizeY / 2, -sizeZ / 2));
    geometry.vertices.push(new THREE.Vector3(-sizeX / 2, sizeY / 2, sizeZ / 2));

    geometry.faces.push(new THREE.Face3(0, 1, 2))
    geometry.faces.push(new THREE.Face3(0, 2, 3))
    geometry.faces.push(new THREE.Face3(0, 4, 5))
    geometry.faces.push(new THREE.Face3(0, 1, 5))
    geometry.faces.push(new THREE.Face3(1, 2, 6))
    geometry.faces.push(new THREE.Face3(1, 5, 6))

    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        side: THREE.DoubleSide,
    });

    light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, 1, 0);
    scene.add(light);

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}

Answer 1

将材质更改为THREE.MeshPhongMaterial或THREE.MeshLambertMaterial。基本材质不会投射阴影。

自定义几何体上的阴影

1 个答案: