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

案例

描述：

用THREE.MeshDepthMaterial材质渲染方块，基于摄像机的距离上色，点击addCube添加方块、removeCube移除方块（从最后一个添加进场景的方块开始移除）、自定义方块旋转速度、控制摄像机的近面距离和远面距离。

结果

完整代码

//场景
var scene;
function initScene() {
    scene = new THREE.Scene();
    //overrideMaterial设置所有物体材质的属性
    scene.overrideMaterial = new THREE.MeshDepthMaterial();
}

//摄像机
var camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,50,110);
    camera.position.set(-50,40,50);
    camera.lookAt(scene.position);
    scene.add(camera);
}

var renderer;
function initRenderer() {
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.shadowMap.enabled = true;
    document.getElementById("webgl-output").appendChild(renderer.domElement);
}

var stats;
function initStats() {
    stats = new Stats();
    document.getElementById("webgl-output").appendChild(stats.domElement);
}

//窗口响应式布局
function windowOnresize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
}

var MDM,gui,rotationSpeed;
function initGUI(){
    MDM = new function(){
        this.rotationSpeed = 0.02;
        this.cameraNear = camera.near;
        this.cameraFar = camera.far;
		//移除场景中添加的最后一个Mesh对象
        this.removeCube = function (){
            var allChildren = scene.children;
            var lastChild = allChildren[allChildren.length - 1];
            if(lastChild instanceof THREE.Mesh){
                scene.remove(lastChild);
            }
        }
		//在场景中添加一个随机方块
        this.addCube = function () {
        	//设置方块大小随机
            var cubeSize = Math.ceil(3+(Math.random()*3));
            var cubeGeometry = new THREE.BoxGeometry(cubeSize,cubeSize,cubeSize);
            //设置方块材质：MeshDepthMaterial
            var cubeMaterial = new THREE.MeshDepthMaterial({
            	//颜色随机（结果显示颜色唯一）
            	//如果要添加彩色方块可以运用联合材质
                color:Math.random()*0xffffff
            });
            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
            cube.castShadow = true;
            //方块位置随机
            cube.position.x = -60+Math.round((Math.random()*100));
            cube.position.y = Math.round((Math.random()*10));
            cube.position.z = -100+Math.round((Math.random()*150));

            scene.add(cube);
        }
    }

    gui = new dat.GUI();
    gui.add(MDM,'removeCube');
    gui.add(MDM,'addCube');
    gui.add(MDM,'cameraNear',0,100).onChange(function (e){
        camera.near = e;
        camera.updateProjectionMatrix();
    });
    gui.add(MDM,'cameraFar',0,200).onChange(function(e){
        camera.far = e;
        camera.updateProjectionMatrix();
    });

    var i = 0;
    while (i < 10) {
        MDM.addCube();
        i++;
    }

}

//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
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(){
    render();

    stats.update();

    //遍历场景中mesh对象。
    scene.traverse(function(e){
        if(e instanceof THREE.Mesh){
            e.rotation.x += 0.02;
            e.rotation.y += 0.02;
            e.rotation.z += 0.02;
        }
    });

    requestAnimationFrame(animate);
}

function draw(){
    initScene();
    initCamera();
    initRenderer();
    initStats();
    initGUI();
    initControls();

    animate();
    window.onresize = windowOnresize;
}