2

配列と for ループを介して three.js を使用して一連の球体を生成しています。元の配列は次のようになります。

atoms = [
 ['Na', [0, 0, 0]],
 ['Na', [0.5, 0.5, 0]],
 ['Na', [0.5, 0, 0.5]],
 ['Na', [0, 0.5, 0.5]],
 ['Cl', [0.5, 0, 0]],
 ['Cl', [0, 0.5, 0]],
 ['Cl', [0, 0, 0.5]],
 ['Cl', [0.5, 0.5, 0.5]],
];

そして、3つの数字がx、y、z座標を表すようにデータを解析します。

最終製品は orbitcontrols.js によって制御され、次のようになります。ここに画像の説明を入力

私が疑問に思っていたのは、これをどのように行うかということです: 球の上にマウスを置き (軌道制御に干渉しないように特定のキーを押しながら)、マウスをクリックすると、クリックした球の xyz が返されます。

4

1 に答える 1

2

まず、keydown、keyup、および mousedown イベント用の eventListeners を追加する必要があります。

document.addEventListener('keydown', onKeyDown, false);
document.addEventListener('keyup', onKeyUp, false);
document.addEventListener('mousedown', onMouseDown, false);

これらの eventListeners をシーンまたはクラスに追加できます。keyup と keydown については、使用する keyCode を検索する必要があります。

クリック イベントには、THREE.Raycaster を使用する必要があります。次のようなものを最初に使用できます。

function onMouseDown(event) {
    event.preventDefault();

    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 1, 10000);
    projector.unprojectVector(vector, camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

    for (var i=1; i<=16; i++) {
        var intersect = raycaster.intersectObject(spheres[i]);
        if (intersect.length > 0) {
            console.log(spheres[i].position);
            break;
        }
    }
}

フルスクリーンを使用していない場合は、ベクターを微調整する必要があります。

お役に立てれば。

于 2013-07-02T21:50:26.950 に答える