iPhone - JavaScript事件......为three.js事件、JavaScript、iPhone、three

2023-09-08 00:53:31 作者:用微笑伪装自己的悲伤。

我在做这个项目......那假设在浏览器中工作 而在iPhone以及... 所以我用事件处理的问题,现在... WICH JavaScript事件,我可以使用iPhone ???

I working on this project...that suppose to work in a browser and in iphone as well... So I am dealing with the events issue right now... Wich javascript events can I use for iphone???

推荐答案

这取决于你所需要的功能,但尝试的这你的手机上。 它应使有些类似于这些立方体结构:

It depends on what functionality you need, but try this on your phone. It should render some a cube structure similar to these:

有应该是可能的触摸和拖动。这是基于旧的立方体拖动样品随three.js这里是在活动中使用的:

It should be possible to touch and drag. This is based on the old cube drag sample that comes with three.js and here are the events used:

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );

和这里的听众:

function onDocumentMouseDown( event ) {

                event.preventDefault();

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'mouseout', onDocumentMouseOut, false );

                mouseXOnMouseDown = event.clientX - windowHalfX;
                targetRotationOnMouseDown = targetRotation;
            }

            function onDocumentMouseMove( event ) {

                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY;

                targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
            }

            function onDocumentMouseUp( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
            }

            function onDocumentMouseOut( event ) {

                document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
                document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
            }

            function onDocumentTouchStart( event ) {

                if ( event.touches.length == 1 ) {

                    event.preventDefault();

                    mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotationOnMouseDown = targetRotation;

                }
            }

            function onDocumentTouchMove( event ) {

                if ( event.touches.length == 1 ) {

                    event.preventDefault();

                    mouseX = event.touches[ 0 ].pageX - windowHalfX;
                    targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;

                }
            }

请注意,有使用了一些变数,这可能不是很明显,像targetRotation,targetRotationOnMouseDown等随意使用源$ C ​​$ C从该链接,但是要知道,我codeD,去年一年,所以,一些three.js code可能会略有不同(可能的材料等等),但如果你将其粘贴到你的code事件的部分应该仍然工作。

Note that there are a few variables used, which might not be obvious, like targetRotation, targetRotationOnMouseDown, etc. Feel free to use the source code from that link, but be aware that I coded that last year, so, some of the three.js code might be slightly different(maybe materials and such), but the events part should still work if you paste it in your code.

心连心