javascript - 如何在 Three.js 中启用着色

Question

如何在 Three.js 中启用着色？

各种示例表明它应该像将 THREE.FlatShading 分配给您的 Material 一样简单，但是当我这样做时，我的形状根本没有阴影。

我的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 );
}

这由立方体渲染为:

我尝试过调整光线 Angular 、添加/删除环境光、更改添加 FlatShading 的对象，但似乎没有任何帮助。

如何解决这个问题？

Answer 1

MeshBasicMaterial 不响应灯光。

使用MeshLambertMaterial、MeshPhongMaterial、MeshStandardMaterial或MeshPhysicalMaterial。

三.js r.152