自定義幾何體上的陰影

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。基本材質不會投射陰影。