0

マウスクリックイベントでJSONオブジェクトをキャッチしようとしています。私は光線を使用してオブジェクトを識別しますが、何らかの理由で、オブジェクトが常に識別されるとは限りません。物体の近くをクリックすると識別されるので、カメラを動かしたことに関係しているのではないかと思います。

カメラの動きに応じて、光線を正しく設定する方法を理解するのを手伝ってもらえますか？

コードは次のとおりです。

これはマウスダウンイベントの一部です*

    document.addEventListener("mousemove", onDocumentMouseMove, false);
    document.addEventListener("mouseup", onDocumentMouseUp, false);
    document.addEventListener("mouseout", onDocumentMouseOut, false);
    mouseXOnMouseDown = event.clientX - windowHalfX;
    targetRotationOnMouseDown = targetRotation;
    var ray, intersections;
    _vector.set((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0);
    projector.unprojectVector(_vector, camera);
    ray = new THREE.Ray(camera.position, _vector.subSelf(camera.position).normalize());
    intersections = ray.intersectObjects(furniture);

    if (intersections.length > 0) {
        selected_block = intersections[0].object;
        _vector.set(0, 0, 0);
        selected_block.setAngularFactor(_vector);
        selected_block.setAngularVelocity(_vector);
        selected_block.setLinearFactor(_vector);
        selected_block.setLinearVelocity(_vector);
        mouse_position.copy(intersections[0].point);
        block_offset.sub(selected_block.position, mouse_position);
        intersect_plane.position.y = mouse_position.y;
    }

}

これはカメラの動きの一部です*

camera.position.x = (Math.cos(timer) * 10);
camera.position.z = (Math.sin(timer) * 10);
camera.lookAt(scene.position);
4

1 に答える 1

1

うーん、あなたのプログラムが実際にどのように機能しているかのある種のデモンストレーションを見ずに、あなたの問題が何であるかを言うのは難しいです。今日取り組んでいるデモをご覧になることをお勧めします。私は自分のカメラ、コントロール、光線を扱います。私もJSONを使用しています。

まず、私のデモを見ることができます。ここで、それが何をしているのか、あなたの説明が似ているのかを知ることができます。あなたがそれを理解することができれば、あなたは私のコードを適応させることができるはずです。
-ソースコードへの直接リンクが必要な場合：main.js

また、光線とマウスの衝突を使用して立方体を回転させる場合に役立つと思われる別の方法もあります。
-ソースコード：main.js

最後に、マウスイベントの内臓と、最初のデモでトラックボールカメラを使用してそれを処理する方法を投稿します。これにより、解決策が得られることを願っています。

/** Event fired when the mouse button is pressed down */
function onDocumentMouseDown(event) {
    event.preventDefault();

    /** Calculate mouse position and project vector through camera and mouse3D */
    mouse3D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse3D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse3D.z = 0.5;
    projector.unprojectVector(mouse3D, camera);

    var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());

    var intersects = ray.intersectObject(maskMesh);

    if (intersects.length > 0) {
        SELECTED = intersects[0].object;
        var intersects = ray.intersectObject(plane);
        offset.copy(intersects[0].point).subSelf(plane.position);
        killControls = true;
    }
    else if (controls.enabled == false)
        controls.enabled = true;
}

/** This event handler is only fired after the mouse down event and
    before the mouse up event and only when the mouse moves */
function onDocumentMouseMove(event) {
    event.preventDefault();

    /** Calculate mouse position and project through camera and mouse3D */
    mouse3D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse3D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
    mouse3D.z = 0.5;
    projector.unprojectVector(mouse3D, camera);

    var ray = new THREE.Ray(camera.position, mouse3D.subSelf(camera.position).normalize());

    if (SELECTED) {
        var intersects = ray.intersectObject(plane);
        SELECTED.position.copy(intersects[0].point.subSelf(offset));
        killControls = true;
        return;
    }

    var intersects = ray.intersectObject(maskMesh);

    if (intersects.length > 0) {
        if (INTERSECTED != intersects[0].object) {
            INTERSECTED = intersects[0].object;
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            plane.position.copy(INTERSECTED.position);
        }
    }
    else {
        INTERSECTED = null;
    }
}

/** Removes event listeners when the mouse button is let go */
function onDocumentMouseUp(event) {
    event.preventDefault();
    if (INTERSECTED) {
        plane.position.copy(INTERSECTED.position);
        SELECTED = null;
        killControls = false;
    }

}

/** Removes event listeners if the mouse runs off the renderer */
function onDocumentMouseOut(event) {
    event.preventDefault();
    if (INTERSECTED) {
        plane.position.copy(INTERSECTED.position);
        SELECTED = null;
    }
}

そして、最初のデモで必要な効果を得るには、これをアニメーションループに追加して、killControlsフラグを使用して、マウスの衝突に基づいてトラックボールカメラのコントロールを選択的にオンまたはオフにする必要がありました。

if (!killControls) controls.update(delta);
else controls.enabled = false;
于 2012-06-14T01:17:53.017 に答える