Three.js – MeshLambertMaterial 用于暗淡不光亮表面的材质



这种材质,可以创建看上去并不光亮(不具有光滑度)的表面,例如墙体等。该材质会对场景中的光源产生反应,并且该材质自身也会发出颜色,自身发出的颜色不受环境的影响。
示例:https://ithanmang.gitee.io/threejs/home/201808/20180807/01-meshLambertMaterial.html
基础材质中很多属性,它基本上都具有,不同的是,它具有一个自发光的属性emissive,可以设置自发光的颜色、强度、以及贴图属性。
它的color属性是漫反射的颜色,默认为白色。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MeshLambertMaterial 暗淡并不光亮的材质</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three-r93.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>
</head>
<body>
<script>

    let stats = initStats();
    let scene, camera, renderer, controls, guiControls;
    let directionalLightHelper;

    // 场景
    function initScene() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xB0E2FF);
        scene.fog = new THREE.Fog(scene.background, 1, 5000);
    }

    // 相机
    function initCamera() {

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000);
        camera.position.set(0, 0, 250);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

    // 渲染器
    function initRenderer() {

        renderer = new THREE.WebGLRenderer({antialias: true});
        // 设置渲染器的像素比例,按照设备
        renderer.setPixelRatio(window.devicePixelRatio);
        // 渲染范围
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 开启阴影支持
        renderer.shadowMap.enabled = true;
        // 阴影类型
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        document.body.appendChild(renderer.domElement);

    }

    // 灯光
    let ambientLight;
    let directionalLight;

    function initLight() {

        ambientLight = new THREE.AmbientLight(0xffffff);
        scene.add(ambientLight);

        directionalLight = new THREE.DirectionalLight(0xffffff, 0.2);
        directionalLight.position.set(-50, 50, 10);

        directionalLight.castShadow = true;

        directionalLight.shadow.mapSize.width = 1024;
        directionalLight.shadow.mapSize.height = 1024;

        // 为光线设置阴影属性
        directionalLight.shadow.camera.left = -50;
        directionalLight.shadow.camera.right = 50;
        directionalLight.shadow.camera.top = 50;
        directionalLight.shadow.camera.bottom = -50;

        directionalLight.shadow.camera.far = 3500;
        // 偏差率
        directionalLight.shadow.bias = -0.001;
        scene.add(directionalLight);

        directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 10);
        scene.add(directionalLightHelper);

    }

    // 控制器
    function initControls() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        // 添加惯性
        controls.enableDamping = true;
        // 最大偏移角度
        controls.maxPolarAngle = 0.49 * Math.PI;
        // 旋转速度
        controls.rotateSpeed = 0.05;
        // 最大可视距离
        controls.maxDistance = 500;
        // 最小可视距离
        controls.minDistance = 100;

    }

    // 调试插件
    function initGui() {

        guiControls = new function () {

            this.ambientColor = ambientLight.color.getStyle();
            this.directionalLight = directionalLight.color.getStyle();
            this.opacity = sphere.material.opacity;
            this.transparent = sphere.material.transparent;
            this.color = sphere.material.color.getStyle();
            this.emissive = sphere.material.emissive.getStyle();
            this.wireframe = sphere.material.wireframe;

        };

        let gui = new dat.GUI();

        gui.addColor(guiControls,'ambientColor').onChange(function (e) {

            ambientLight.color.setStyle(e);

        });

        gui.addColor(guiControls,'directionalLight').onChange(function (e) {

            directionalLight.color.setStyle(e);

        });

        let materialFolder = gui.addFolder('MeshLambertMaterial');
        materialFolder.add(guiControls,'opacity',0 ,1).onChange(function (e) {

            sphere.material.opacity = e;

        });

        materialFolder.add(guiControls,'transparent').onChange(function (e) {

            sphere.material.transparent = e;

        });

        materialFolder.addColor(guiControls,'color').onChange(function (e) {

            sphere.material.color.setStyle(e);

        });

        materialFolder.addColor(guiControls,'emissive').onChange(function (e) {

            sphere.material.emissive.setStyle(e);

        });

        materialFolder.add(guiControls,'wireframe').onChange(function (e) {

            sphere.material.wireframe = e;

        });

        materialFolder.open();

    }

    // 场景中的内容
    let sphere;

    function initContent() {

        let groundGeometry = new THREE.PlaneBufferGeometry(10000, 10000);
        let groundMaterial = new THREE.MeshLambertMaterial({color: 0x6C7B8B});

        let ground = new THREE.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = -0.5 * Math.PI;
        ground.position.y = -80;
        ground.receiveShadow = true;

        scene.add(ground);

        let sphereGeometry = new THREE.SphereGeometry(30, 50, 50);
        let sphereMaterial = new THREE.MeshLambertMaterial({color: 0x836FFF});
        sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        sphere.castShadow = true;

        scene.add(sphere);

    }

    // 性能插件
    function initStats() {

        let stats = new Stats();

        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';

        document.body.appendChild(stats.domElement);

        return stats;
    }

    // 更新
    function update() {

        stats.update();
        controls.update();
        hemiLightHelper.update();

    }

    // 初始化
    function init() {
        // 兼容性判断,若不兼容会提示信息
        if (!Detector.webgl) Detector.addGetWebGLMessage();

        initScene();
        initCamera();
        initRenderer();
        initLight();
        initControls();
        initContent();
        initGui();

        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);
        renderer.render(scene, camera);
        update();
    }

    // 页面绘制完后加载
    window.onload = function () {

        init();
        animate();

    };

</script>
</body>
</html>