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

案例

描述

1. 通过改变标签可以自定义创建一个橘黄色，带有轻微自发光的效果的物体

结果

完整代码

//场景
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);
    //创建THREE.MeshLambertMaterial材质
    meshMaterial = new THREE.MeshLambertMaterial({
        color:0x7777ff,
    })
    //地面
    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.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 MLM,gui;
function initMBM(){
    MLM = cube.material;
    MLM = new function(){
        this.selectedMesh = "cube";
        //材质颜色
        this.color = meshMaterial.color.getStyle();
        //材质自发光颜色
        this.emissive = meshMaterial.emissive.getHex();
        //材质是否显示线框模式
        this.wireframe = false;
        //材质线框的宽度，在WebGLRenderer下无反应
        this.wireframeLinewidth = 1;
    };

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

    var MLMGUI = gui.addFolder("THREE.MeshLambertMaterial")
    MLMGUI.addColor(MLM,'color').onChange(function(e){
        meshMaterial.color.setStyle(e);
    });
    MLMGUI.addColor(MLM, 'emissive').onChange(function (e) {
        meshMaterial.emissive = new THREE.Color(e);
    });
    MLMGUI.add(MLM,'wireframe').onChange(function (e) {
        meshMaterial.wireframe = e;
    });
    MLMGUI.add(MLM,'wireframeLinewidth',0,20).onChange(function (e) {
        meshMaterial.wireframeLinewidth = e;
    });
    loadGopher(meshMaterial).then(function(gopher){
        gopher.scale.set(4,4,4);
        gui.add(MLM,'selectedMesh',['cube','sphere','plane','gopher']).onChange(function (e){
            scene.remove(cube);
            scene.remove(sphere);
            scene.remove(plane);
            scene.remove(gopher);

            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;
                case 'gopher':
                    scene.add(gopher);
                    selectedMesh = gopher;
                    break;
            }
        });
    });
    //
    // gui.domElement.style.position = 'absolute';
    // gui.domElement.style.right = "300px";
}


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

    animate();
    window.onresize = windowOnresize;
}