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場景。