iPhone - JavaScript 事件...forthree.js [英] iPhone - JavaScript Events...for three.js

问题描述

我正在研究这个项目……它应该可以在浏览器和 iPhone 上运行.

所以我现在正在处理事件问题，我可以在 iPhone 上使用哪些 JavaScript 事件?

解决方案

这取决于您需要什么功能，但请尝试
_{(来源:lifesine.eu)}

应该可以触摸和拖动.这是基于three.js附带的旧立方体拖动示例，这里是使用的事件:

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;}函数 onDocumentMouseMove( 事件 ) {mouseX = event.clientX - windowHalfX;mouseY = event.clientY - windowHalfY;targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;}函数 onDocumentMouseUp( 事件 ) {document.removeEventListener('mousemove', onDocumentMouseMove, false );document.removeEventListener('mouseup', onDocumentMouseUp, false );document.removeEventListener('mouseout', onDocumentMouseOut, false );}函数 onDocumentMouseOut( 事件 ) {document.removeEventListener('mousemove', onDocumentMouseMove, false );document.removeEventListener('mouseup', onDocumentMouseUp, false );document.removeEventListener('mouseout', onDocumentMouseOut, false );}函数 onDocumentTouchStart( 事件 ) {if ( event.touches.length == 1 ) {event.preventDefault();mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;targetRotationOnMouseDown = targetRotation;}}函数 onDocumentTouchMove( 事件 ) {if ( event.touches.length == 1 ) {event.preventDefault();mouseX = event.touches[0].pageX - windowHalfX;targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;}}

请注意，使用了一些可能不明显的变量，例如 targetRotation、targetRotationOnMouseDown 等.请随意使用该链接中的源代码，但请注意，我去年编写了该代码，因此，有些Three.js 代码可能略有不同(可能是材料等)，但如果您将其粘贴到代码中，事件部分应该仍然有效.

HTH

I am working on this project... that is suppose to work in a browser and on iPhone as well.

So I am dealing with the events issue right now, which 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:
_{(source: lifesine.eu)}

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 );

And here are the listeners:

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;

                }
            }

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.

HTH

这篇关于iPhone - JavaScript 事件...forthree.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！