實現threejs模型交互：快速添加點擊事件

一、在threejs中添加點擊事件的必要性

在threejs渲染的3D場景中，我們往往需要讓用戶對模型進行交互，例如在一個3D房間場景中，用戶需要通過點擊鼠標來打開門或者窗戶等。如果加入交互功能，用戶體驗會更加豐富，而不是僅僅作為一個靜態的3D渲染模型。因此，在threejs中實現模型點擊事件是一個必要且重要的功能。

二、實現模型交互的基本方法

首先我們需要在threejs場景中找到對應的模型，然後將點擊事件綁定到該模型上，隨後通過點擊事件處理函數實現模型的交互。

三、確定模型

在threejs中處理模型交互之前，我們需要知道當前場景中的模型是哪一個。在確定模型過程中，可以使用Raycaster對象。

// 初始化射線輔助器
var raycaster = new THREE.Raycaster();

// 鼠標控制對象
var mouse = new THREE.Vector2();

// 監聽鼠標的移動事件
document.addEventListener('mousemove', onDocumentMouseMove, false);

// 鼠標移動事件處理函數
function onDocumentMouseMove(event){
    // 得到鼠標相對於容器的坐標
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}

四、綁定點擊事件

在確定了當前場景中的模型之後，我們需要將點擊事件綁定到該模型上。

// 綁定點擊事件
document.addEventListener('click', onDocumentClick, false);

// 點擊事件處理函數
function onDocumentClick(event) {
    // 執行射線檢測
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(objects, true);

    // 判斷是否成功
    if (intersects.length > 0) {
        // 選取第一個物體並對其執行交互
        var object = intersects[0].object;
        interactWithObject(object);
    }
}

五、執行交互

在確定了需要交互的對象後，我們需要執行對應的交互操作。

// 交互函數
function interactWithObject(object){

    // 判斷是否是需要進行交互的模型
    if(object.name == "door"){
        // 打開門的動畫
    }else if(object.name == "window"){
        // 打開窗戶的動畫
    }else{
        // do nothing
    }
}

六、完整的示例代碼

// 場景
var scene = new THREE.Scene();

// 攝像機
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加模型
var boxGeometry = new THREE.BoxGeometry(1, 1, 1);
var boxMaterial = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
var box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 0, -5);
box.name = "box";
scene.add(box);

// 初始化射線輔助器
var raycaster = new THREE.Raycaster();

// 鼠標控制對象
var mouse = new THREE.Vector2();

// 監聽鼠標的移動事件
document.addEventListener('mousemove', onDocumentMouseMove, false);

// 鼠標移動事件處理函數
function onDocumentMouseMove(event) {
    // 得到鼠標相對於容器的坐標
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}

// 綁定點擊事件
document.addEventListener('click', onDocumentClick, false);

// 點擊事件處理函數
function onDocumentClick(event) {
    // 執行射線檢測
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children, true);

    // 判斷是否成功
    if (intersects.length > 0) {
        // 選取第一個物體並對其執行交互
        var object = intersects[0].object;
        interactWithObject(object);
    }
}

// 交互函數
function interactWithObject(object) {

    // 判斷是否是需要進行交互的模型
    if (object.name == "box") {
        // 給box添加動畫
        var tween = new TWEEN.Tween(object.rotation)
          .to({ x:Math.PI*2, y:Math.PI*2 }, 1000)
          .start();

    } else {
        // do nothing
    }
}

// 持續渲染
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();