28 - three.js 笔记 - MeshBasicMaterial 材质

MeshBasicMaterial是一种非常简单的材质，继承自Material，这种材质不受光线的影响，可以显示模型的线框，对场景中的雾化会有反应。
通过操作示例可以对这种材质有一定的了解
示例：MeshBasicMaterial.html

构造函数

MeshBasicMaterial( parameters : Object )

参数

parameters：可选参数一般指定为颜色，{color:0xffffff}，也可以添加别的从Material父类继承来的属性。
除却继承的属性外，MeshBasicMaterial也有自己独有的属性，以下是部分属性。

属性	简介
alphaMap	alpha地图是一种灰度纹理，它控制着表面的不透明度（黑色：完全透明;白:完全不透明)。默认为null。
color	材料的颜色值，默认为白色
combine	将材质表面颜色与环境贴图相结合，默认为THREE.Multiply，如果选择混合模式，则反射率是用来混合两种颜色的
envMap	环境贴图，默认为null
lightMap	灯光贴图，默认为null
lightMapIntensity	灯光贴图的强度，默认为1
lights	材料是否受到光线影响，默认为false
map	贴图，默认为null
reflectivity	反射率，表面对环境的影响程度，有效范围在0 - 1之间，默认为1
wireframe	是否以线框模式呈现，默认为false

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MeshBasicMaterial 基础材质</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three.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, light, controls, guiControls;

    // 场景
    function initScene() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x050505);

    }

    // 相机
    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, alpha: 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;

    // 灯光
    function initLight() {

        ambientLight = new THREE.AmbientLight({color: 0xDBDBDB});
        scene.add(ambientLight);

    }

    // 控制器
    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 () {

            // Scene
            this.background = scene.background.getStyle();
            this.ambientLight = ambientLight.color.getStyle();
            this.fog = false;
            this.fogColor = scene.background.getStyle();

            // Material
            this.transparent = torusKont.material.transparent;
            /*注意：如果材料不透明，那么这个值得改变只会对材料的颜色有影响，为 0 时材料的颜色会变成白色*/
            this.opacity = torusKont.material.opacity;
            this.depthTest = true;
            this.depthWrite = true;
            this.visible = true;
            this.side = 'front';

            // MeshBasicMaterial
            this.color = torusKont.material.color.getStyle();
            this.wireframe = torusKont.material.wireframe;
            this.wireframeLinecap = torusKont.material.wireframeLinecap;

        };

        let gui = new dat.GUI({width: 300});

        // scene
        let sceneFolder = gui.addFolder('Scene');
        sceneFolder.addColor(guiControls, 'background').onChange(function (e) {
            scene.background.setStyle(e);
        });
        sceneFolder.addColor(guiControls, 'ambientLight').onChange(function (e) {
            ambientLight.color.setStyle(e);
        });
        sceneFolder.open();

        // fog
        let fogFolder = sceneFolder.addFolder('scene.fog');
        fogFolder.add(guiControls, 'fog').onChange(function (e) {
            if (e){
                scene.fog = new THREE.Fog(scene.background, 0.1, 500);
            }else{
                scene.fog = null;
            }
        });
        fogFolder.addColor(guiControls,'fogColor').onChange(function (e) {
           scene.fog.color.setStyle(e);
        });
        fogFolder.open();

        // material
        let materialFolder = gui.addFolder('THREE.Material');
        materialFolder.add(guiControls, 'transparent').onChange(function (e) {
            torusKont.material.transparent = e;
        });
        materialFolder.add(guiControls, 'opacity', 0.0, 1.0).onChange(function (e) {
            torusKont.material.opacity = e;
        });
        materialFolder.add(guiControls,'depthTest').onChange(function (e) {
           torusKont.material.depthTest = e;
        });
        materialFolder.add(guiControls,'depthWrite').onChange(function (e) {
            torusKont.material.depthWrite = e;
        });
        materialFolder.add(guiControls,'visible').onChange(function (e) {
           torusKont.material.visible = e;
        });
        materialFolder.add(guiControls,'side',['front','back','double']).onChange(function (e) {
            switch (e){
                case "front":
                    torusKont.material.side = THREE.FrontSide;
                    break;
                case "back":
                    torusKont.material.side = THREE.BackSide;
                    break;
                case "double":
                    torusKont.material.side = THREE.DoubleSide;
                    break;
            }
        });

        // basicMaterial
        let basicMaterial = gui.addFolder('THREE.MeshBasicMaterial');
        basicMaterial.addColor(guiControls,'color').onChange(function (e) {
           torusKont.material.color.setStyle(e);
        });
        basicMaterial.add(guiControls,'wireframe').onChange(function (e) {
           torusKont.material.wireframe = e;
        });
        basicMaterial.add(guiControls,'wireframeLinecap',['round','butt','square']).onChange(function (e) {
            switch (e){
                case "round":
                    torusKont.material.wireframeLinecap = "round";
                    break;
                case "butt":
                    torusKont.material.wireframeLinecap = "butt";
                    break;
                case "square":
                    torusKont.material.wireframeLinecap = "square";
                    break;
            }

        });

        basicMaterial.open();

        materialFolder.open();

    }

    let torusKont;

    // 场景中的内容
    function initContent() {

        // 创建一个换面纠结对象
        let torusKontGeometry = new THREE.TorusKnotGeometry(40, 10, 50, 50);
        let basicMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff});
        torusKont = new THREE.Mesh(torusKontGeometry, basicMaterial);

        scene.add(torusKont);

    }

    // 性能插件
    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;
    }

    let step = 0;

    // 更新
    function update() {

        stats.update();
        controls.update();
        torusKont.rotation.y += 0.01;
        torusKont.rotation.x += 0.01;

    }

    // 初始化
    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>

28 - three.js 笔记 - MeshBasicMaterial 材质

构造函数

参数

示例代码

猜你喜欢