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

如何在Three.js中启用着色

各种各样的例子表明，它应该像为材质指定3.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 );
}

CANVAS_WIDTH=200，
帆布高度=200；
摄像机、场景、渲染器；
var网格；
init（）；
制作动画（）；
函数init（）{
摄像机=新的三个透视摄像机（70，画布宽度/画布高度，11000）；
摄像机位置z=400；
场景=新的三个。场景（）；
var几何体=新的三个.BoxBufferGeometry（200200200）；
var material=new THREE.MeshBasicMaterial（{color:0xff0000}）；
material.shading=3.FlatShading；
对于（var i=0；i
MeshBasicMaterial
不响应灯光。请使用
MeshLambertMaterial
、
MeshPhongMaterial
或
MeshStandardMaterial

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

three.js r.75
MeshBasicMaterial
不响应灯光。请使用
MeshLambertMaterial
、
MeshPhongMaterial
或
MeshStandardMaterial

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

three.js r.75

你在寻找这样的结果吗

附加相同的参考代码

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

        }

var摄像机、场景、渲染器；
var网格；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=400；
场景=新的三个。场景（）；
添加（新的三个半球灯光（0xffffff，0xffffff，1.0））
var geometry=新的三个.BoxGeometry（200200200）；
对于（变量i=0；i

你在寻找这样的结果吗

附加相同的参考代码

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

        }

var摄像机、场景、渲染器；
var网格；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=400；
场景=新的三个。场景（）；
添加（新的三个半球灯光（0xffffff，0xffffff，1.0））
var geometry=新的三个.BoxGeometry（200200200）；
对于（变量i=0；i
您对阴影（如中）或着色（）感兴趣吗？问题的标题与内容不匹配您对阴影（如中）或着色（）感兴趣吗？问题的标题与内容不匹配，只是我不明白为什么这个JSFIDLE似乎有MeshBasicMaterial着色？@Willkesler，这个立方体没有着色。只是立方体的面被涂成了不同的颜色。我还试图让我的立方体着色：|有意义，但我不明白为什么这个JSFIDLE有阴影是否需要使用MeshBasicMaterial进行着色？@Willkesler该立方体没有着色。只是立方体的面被涂成了不同的颜色。我还在尝试让立方体着色：|