Three.js实现室内模型行走

在本文中，将介绍如何使用Three.js创建室内模型，并在场景中实现行走。为了实现这一目标，需要完成以下任务：

• 加载室内模型及材质贴图
• 实现摄像机控制，支持用户自由行走
• 添加光源，提高场景真实感

一、加载室内模型及材质贴图

加载三维模型和材质贴图是实现室内模型的第一步。在加载模型之前，需要先准备好模型和贴图，此处使用了blender软件制作模型，并使用GIMP进行材质贴图的编辑。

/*加载模型和材质*/
var mtlLoader = new THREE.MTLLoader();
mtlLoader.load('model/model.mtl', function(materials){
    materials.preload();
    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials(materials);
    objLoader.load('model/model.obj', function(object){
        scene.add(object);
    });
});

在代码中，首先使用MTLLoader加载材质，并使用OBJLoader加载模型。之后将模型添加到场景中。

二、实现摄像机控制，支持用户自由行走

为了让用户能够自由地行走在室内模型中，需要实现摄像机控制。可以使用OrbitControls类，或者实现自定义的摄像机控制。

/*实现自定义摄像机控制*/
var controls = new THREE.PointerLockControls(camera, document.body);
scene.add(controls.getObject());

var moveForward = false;
var moveBackward = false;
var moveLeft = false;
var moveRight = false;

document.addEventListener('keydown', function(event){
    switch(event.keyCode){
        case 38: // up
        case 87: // w
            moveForward = true;
            break;
        case 37: // left
        case 65: // a
            moveLeft = true; 
            break;
        case 40: // down
        case 83: // s
            moveBackward = true;
            break;
        case 39: // right
        case 68: // d
            moveRight = true;
            break;
    }
});

document.addEventListener('keyup', function(event){
    switch(event.keyCode){
        case 38: // up
        case 87: // w
            moveForward = false;
            break;
        case 37: // left
        case 65: // a
            moveLeft = false;
            break;
        case 40: // down
        case 83: // s
            moveBackward = false;
            break;
        case 39: // right
        case 68: // d
            moveRight = false;
            break;
    }
});

var controlsEnabled = false;

function onPointerlockChange(){
    if(document.pointerLockElement === document.body){
        controlsEnabled = true;
        controls.enabled = true;
    }else{
        controlsEnabled = false;
        controls.enabled = false;
    }
}

document.addEventListener('pointerlockchange', onPointerlockChange, false);

function animate() {
    requestAnimationFrame(animate);
    if (controlsEnabled) {
        var time = performance.now();
        var delta = (time - prevTime) / 1000;
        velocity.x -= velocity.x * 10.0 * delta;
        velocity.z -= velocity.z * 10.0 * delta;
        if (moveForward) velocity.z -= 400.0 * delta;
        if (moveBackward) velocity.z += 400.0 * delta;
        if (moveLeft) velocity.x -= 400.0 * delta;
        if (moveRight) velocity.x += 400.0 * delta;
        controls.getObject().translateX(velocity.x * delta);
        controls.getObject().translateZ(velocity.z * delta);
        prevTime = time;
    }
    renderer.render(scene, camera);
}
animate();

/*启动指针锁定*/
var element = document.body;
var pointerlockchange = function(event){
    if(document.pointerLockElement === element){
        controlsEnabled = true;
        controls.enabled = true;
    }else{
        controls.enabled = false;
    }
};
var pointerlockerror = function(event){
    console.log('pointer lock error');
};
element.addEventListener('click', function(event){
    element.requestPointerLock();
}, false);
document.addEventListener('pointerlockchange', pointerlockchange, false);
document.addEventListener('pointerlockerror', pointerlockerror, false);

代码中使用PointerLockControls实现摄像机控制， 用户可以通过WASD键控制摄像机移动，并且可以通过鼠标进行摄像机旋转。此外，为了了解指针锁定的使用，需要在代码开头调用requestPointerLock()函数来启用指针锁定。

三、添加光源，提高场景真实感

场景中添加光源可以提高场景真实感。为了满足室内模型的真实感，可以添加两种类型的光源：环境光(AmbientLight)和点光源(PointLight)。

/*添加光源*/
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

var pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.z = 500;
scene.add(pointLight);

代码中使用了AmbientLight来模拟全局光照，并使用PointLight来模拟室内灯光。

结论

至此，通过以上三个任务的完成，就可以实现一个基本的室内模型行走的three.js场景。