Three.js材质属性的实例应用（MeshNormalMaterial）

案例

描述

选择sphere（球体）作为网格，当flatshading属性设置为true时，网格的每一个面渲染的颜色都不同，即使球体在旋转时，这些颜色也基本保持在原来的位置（每个面的颜色都是由从该面向外指的法向量计算得到的）。

结果

完整代码

//场景
var scene;
function initScene() {
    scene = new THREE.Scene();
}

//摄像机
var camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
    camera.position.set(-20,50,40);
    camera.lookAt(new THREE.Vector3(10,0,0));
    scene.add(camera);
}
//渲染器
var webGLRenderer,canvasRenderer,renderer;
function initRenderer() {
    webGLRenderer = new THREE.WebGLRenderer();
    webGLRenderer.setClearColor(new THREE.Color(0x000000));
    webGLRenderer.setSize(window.innerWidth,window.innerHeight);
    webGLRenderer.shadowMap.enabled = true;

    canvasRenderer = new THREE.CanvasRenderer();
    canvasRenderer.setSize(window.innerWidth,window.innerHeight);

    renderer = webGLRenderer;
    document.getElementById("webgl-output").appendChild(renderer.domElement);
}
//初始化性能插件
var stats;
function initStats(){
    stats = new Stats();
    document.getElementById("webgl-output").appendChild(stats.domElement);
}
//光源
function initLight(){
    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
    scene.add(ambientLight);

    var spotLight = new THREE.SpotLight("#ffffff");
    spotLight.position.set(-40,60,-10);
    spotLight.castShadow = true;
    spotLight.shadow.mapSize = new THREE.Vector2(1024,1024);
    spotLight.shadow.camera.far = 130;
    spotLight.shadow.camera.near = 40;
    scene.add(spotLight);
}

//模型
var axes,cube,plane,meshMaterial,sphere,ground,selectedMesh;
function initModels(){
    //坐标轴
    axes = new THREE.AxesHelper(50);
    scene.add(axes);
    //材质
    meshMaterial = new THREE.MeshNormalMaterial()
    //地面
    var groundGeometry = new THREE.PlaneGeometry(100,100,4,4);
    var groundMaterial = new THREE.MeshBasicMaterial({
        color:0x777777,
    })
    ground = new THREE.Mesh(groundGeometry,groundMaterial);
    ground.rotation.x = -Math.PI / 2;
    ground.position.y = -20;
    ground.receiveShadow = true;
    scene.add(ground);

    //立方体
    var cubeGeometry = new THREE.CubeGeometry(15,15,15);
    cube = new THREE.Mesh(cubeGeometry,meshMaterial);
    cube.position.set(0,3,2);
    cube.castShadow = true;
    scene.add(cube);

    //球
    var sphereGeometry = new THREE.SphereGeometry(14,20,20);
    sphere = new THREE.Mesh(sphereGeometry,meshMaterial);
    sphere.position.set(0,3,2);
    sphere.castShadow = true;
    // scene.add(sphere);

    //平面
    var planeGeometry = new THREE.PlaneGeometry(14,14,4,4);
    plane = new THREE.Mesh(planeGeometry,meshMaterial);
    plane.position = sphere.position;

    selectedMesh = cube;

}

//鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    //是否可以缩放
    controls.enableZoom = true;
    //是否自动旋转
    controls.autoRotate = true;
    //设置相机距离原点的最远距离
    controls.minDistance  = 1;
    //设置相机距离原点的最远距离
    controls.maxDistance  = 200;
    //是否开启右键拖拽
    controls.enablePan = true;
}

function render() {
    renderer.render(scene,camera);
}

function animate(){
    stats.update();

    selectedMesh.rotation.y += 0.02;

    render();
    requestAnimationFrame(animate);
}

//窗口自适应
function windowOnresize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
}

var MBM,MaterialGui,gui;
function initMBM(){
    MBM = cube.material;
    MBM = new function(){
        this.selectedMesh = "cube";
    };

    gui = new dat.GUI();
    addBasicMaterialSettings(gui,MBM,meshMaterial);

    gui.add(MBM,'selectedMesh',['cube','sphere','plane']).onChange(function (e){
        scene.remove(cube);
        scene.remove(sphere);
        scene.remove(plane);

        switch (e){
            case 'cube':
                scene.add(cube);
                selectedMesh = cube;
                break;
            case 'sphere':
                scene.add(sphere);
                selectedMesh = sphere;
                break;
            case 'plane':
                scene.add(plane);
                selectedMesh = plane;
                break;
        }
    });
 
}


function draw(){
    initScene();
    initCamera();
    initRenderer();
    initStats();
    initLight();
    initModels();
    initControls();
    initMBM();

    animate();
    window.onresize = windowOnresize;
}