iPhone - JavaScript 事件...for three.js答案

【问题标题】：iPhone - JavaScript Events...for three.jsiPhone - JavaScript 事件...for three.js
【发布时间】：2021-01-22 08:27:24
【问题描述】：

我正在做这个项目...假设在浏览器和 iPhone 上也可以工作。

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

【问题讨论】：

标签： javascript iphone events 3d three.js

【解决方案1】：

这取决于您需要什么功能，但请在您的手机上尝试this。它应该呈现一些类似于这些的立方体结构：
_{（来源：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;
            }

            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 等。请随意使用该链接中的源代码，但请注意我去年编写的代码，所以有些three.js 代码可能略有不同（可能是材料等），但如果将其粘贴到代码中，事件部分应该仍然有效。

HTH

【讨论】：

再次感谢您的帮助，伙计！...我尝试了您的演示，可悲但真实，它不适用于 iphone...我的意思是唯一有效的旋转是 (y)。第二件事是......我的问题更大......不仅我需要旋转“相机”......我在画布上制作了可拖动的对象
看到这个问题：stackoverflow.com/questions/8307535/…
从技术上讲，如果您可以在 Y 轴上旋转，触摸事件就会起作用，这**回答了您的问题**（“我可以为 iphone 使用哪些 javascript 事件”）；）。它仅适用于 Y，因为这就是我编码的方式，否则没有其他方法可以处理它（比如拖动）。目前无法提交其他问题。正在查看您的other question，并发现了一些问题，但正如我所说，目前没有时间。将在本周晚些时候尝试