Question

如何在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的对象，似乎没什么帮助。

我该如何解决这个问题？

Answer 1

MeshBasicMaterial没有响应灯光。使用MeshLambertMaterial，MeshPhongMaterial或MeshStandardMaterial。

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

three.js r.75

Answer 2

您是否正在寻找这样的结果。

附加相同的参考代码

        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 );

        }

如何在Three.js中启用着色

2 个答案: