1

私はしばらくThree.jsで遊んでいましたが、現在、カメラを操作するためのトラックボールコントロールを使用して、three.jsのドラッグ可能なキューブの例と同じ方法でマウスドラッグを処理していますが、これらのコントロールは両方ともアプリケーションにブラウザウィンドウ全体を使用することを前提に作業します。
これらのマウスコントロールをキャンバスに合わせて拡大縮小（および制限）する方法はありますか？

編集：これは、オブジェクトをドラッグするためのマウスイベントを示すコードサンプルです（実際には、three.jsのexamplesディレクトリで提供されている例とほとんど同じですが、uhuraのコードを適用しました）

`//Called when cursor is moved, drags object if one is selected
        function onDocumentMouseMove( event ) {

            event.preventDefault();

            //mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            //mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

            mouse.x = cursorPositionInCanvas( renderer.domElement, event )[0];
            mouse.y = cursorPositionInCanvas( renderer.domElement, event )[1];

            var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
            projector.unprojectVector( vector, camera );
            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

            if ( SELECTED ) {
                var intersects = raycaster.intersectObject( plane );
                SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
                return;
            }

            var intersects = raycaster.intersectObjects( objects );

            if ( intersects.length > 0 ) {
                if ( INTERSECTED != intersects[ 0 ].object ) {
                    INTERSECTED = intersects[ 0 ].object;
                    plane.position.copy( INTERSECTED.position );
                    plane.lookAt( camera.position );
                }
            } 
            else {
                INTERSECTED = null;
            }               

        }

        //Called when user clicks, selects object if mouse is over it and disables trackball controls
        function onDocumentMouseDown( event ) {

            event.preventDefault();

            var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
            projector.unprojectVector( vector, camera );
            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
            var intersects = raycaster.intersectObjects( objects );
            if ( intersects.length > 0 ) {
                controls.enabled = false;

                SELECTED = intersects[ 0 ].object;
                var intersects = raycaster.intersectObject( plane );
                offset.copy( intersects[ 0 ].point ).sub( plane.position );
            }

        }

        //Called when user releases mouse button, deselects any selected objects and re-enables trackball controls
        function onDocumentMouseUp( event ) {

            event.preventDefault();

            controls.enabled = true;
            if ( INTERSECTED ) {
                plane.position.copy( INTERSECTED.position );

                SELECTED = null;
            }

        }

        function cursorPositionInCanvas(canvas, event) {
            var x, y;

            canoffset = $(canvas).offset();
            x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
            y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;
            return [x,y];
        }`
4

2 に答える 2

2

jQueryを使用する場合：

function cursorPositionInCanvas(canvas, event) {
                var x, y;

                canoffset = $(canvas).offset();
                x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
                y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;

                return [x,y];
    }

Javascriptソリューション

その他

更新しました：

mouse.x = (cursorPositionInCanvas( renderer.domElement, event )[0]) / $(canvas).width()) * 2 - 1;
mouse.y = - (cursorPositionInCanvas( renderer.domElement, event )[1])/ $(canvas).height()) * 2 + 1;
于 2013-02-27T09:51:25.653 に答える
1

あなたの質問への答えは実際には非常に簡単です。しかし、これを理解するのに少し時間がかかりました。TrackballControlsコンストラクターに2番目のパラメーターを追加することにより、コントロールがアクティブになる要素を制御できます。

var controls = new THREE.TrackballControls(camera, renderer.domElement)
于 2019-04-18T00:47:34.430 に答える