如何在Three.js中启用阴影

不同的例子表明它应该像指定THREE.FlatShading一样简单，但是当我这样做时，我的形状根本没有阴影。

我的JS：

CANVAS_WIDTH = 200, 
CANVAS_HEIGHT = 200; 

var camera, scene, renderer; 
var mesh; 
init(); 
animate(); 
function init() { 
    camera = new THREE.PerspectiveCamera(70, CANVAS_WIDTH/CANVAS_HEIGHT, 1, 1000); 
    camera.position.z = 400; 
    scene = new THREE.Scene(); 

    var geometry = new THREE.BoxBufferGeometry(200, 200, 200); 

    var material = new THREE.MeshBasicMaterial({color: 0xff0000}); 
    material.shading = THREE.FlatShading; 
    for(var i=0; i<material.length; i++){ 
     material[i].shading = THREE.FlatShading; 
    } 

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

    // light 
    //scene.add(new THREE.AmbientLight(0x404040)); 
    light = new THREE.DirectionalLight(0xffffff); 
    light.position.set(400, 400, 400); 
    scene.add(light); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setPixelRatio(window.devicePixelRatio); 
    renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT); 
    container = document.getElementById('accelgyro_canvas'); 
    container.appendChild(renderer.domElement); 

    window.addEventListener('resize', onWindowResize, false); 
} 
function onWindowResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
} 
function animate() { 
console.log('animate') 
    requestAnimationFrame(animate); 
    mesh.rotation.x += 0.005; 
    mesh.rotation.y += 0.01; 
    renderer.render(scene, camera); 
}

这使得由立方体为：

我试图调整光的角度，添加/移除的环境光，改变哪个对象予加FlatShading和似乎没有任何帮助。

我该如何解决这个问题？

来源

2016-03-25 Cerin

你是在阴影兴趣（如在http://threejs.org/examples/#webgl_shadowmap_viewer），或在着色（http://threejs.org/例子/＃canvas_materials_normal）？问题的标题与内容不匹配 –

-1

是你在寻找这样的结果。

附加的参考代码相同

 var camera, scene, renderer; 
     var mesh; 

     init(); 
     animate(); 

     function init() { 

      camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
      camera.position.z = 400; 

      scene = new THREE.Scene(); 
      scene.add(new THREE.HemisphereLight(0xffffff,0xffffff,1.0)) 


      var geometry = new THREE.BoxGeometry(200, 200, 200); 
      for (var i = 0; i < geometry.faces.length; i++) 
      { 

       geometry.faces[ i ].color.setRGB(1.0 * Math.random()+0.2 , 0, 0);  
      } 
      var material = new THREE.MeshBasicMaterial({ color:0xff0000,vertexColors: THREE.FaceColors }); 

      mesh = new THREE.Mesh(geometry, material); 
      //mesh.drawMode =THREE.TriangleStripDrawMode; 
      scene.add(mesh); 

      renderer = new THREE.WebGLRenderer(); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      // 

      window.addEventListener('resize', onWindowResize, false); 

     } 

     function onWindowResize() { 

      camera.aspect = window.innerWidth/window.innerHeight; 
      camera.updateProjectionMatrix(); 

      renderer.setSize(window.innerWidth, window.innerHeight); 

     } 

     function animate() { 

      requestAnimationFrame(animate); 

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

      renderer.render(scene, camera); 

     }

来源

2016-03-25 11:29:22

MeshBasicMaterial不响应灯。使用MeshLambertMaterial,MeshPhongMaterial或MeshStandardMaterial。

另外，MeshLambertMaterial没有shading属性。如果您需要FlatShading，则需要使用MeshPhongMaterial或MeshStandardMaterial。

three.js所r.75

来源

2016-03-25 06:16:01 WestLangley

有意义，除非我不明白为什么此jsfiddle似乎使用MeshBasicMaterial进行着色？ http://jsfiddle.net/wilt/w67tzfhx/81/ –

如何在Three.js中启用阴影

回答

相关问题