在iPad上的ThreeJS Canvas渲染

Question

我已经在现代浏览器中创建了一个ThreeJS应用程序，我正在使用WebGL，在旧版浏览器和平板电脑中，我正在使用Canvas渲染，因为WebGL还没有被支持。

在PC浏览器（Chrome，IE，Firefox，Opera和Safari）中，Canvas渲染没有任何问题。但是当我在iPad上使用它时，渲染完全搞砸了。就像下面的截图：

我已经创建了一个自定义几何体，当使用原始图像比例时，一切正常（并且PC没问题）。但是当我在iPad上移动一个角落或更多时，它就搞砸了。我使用的默认几何是原始ThreeJS Three.CubeGeometry的副本。当人们拖动角落时，我正在编辑x和y顶点。

我曾尝试编辑faceVertexUvs，但情况只会越来越糟。我不知道它可能是什么。

在一些代码下面更改角落：

function onDocumentMouseMove(event) {
    if (!me.initMode || event.cus) {
        mouse.x = (event.originalEvent.pageX / me.backgroundImageWidth) * 2 - 1;
        mouse.y = -(event.originalEvent.pageY / window.innerHeight) * 2 + 1;

        var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);

        projector.unprojectVector(vector, camera);

        var dir = vector.sub(camera.position).normalize();
        var raycaster = new THREE.Raycaster(camera.position, dir);
        var intersects = raycaster.intersectObjects(objects);

        // Moving selected
        if (SELECTED) {

            me.drag();

            // Fix the X-Y when you don't use Z
            //      more info: http://stackoverflow.com/questions/13055214/mouse-canvas-x-y-to-three-js-world-x-y-z
            var distance = -camera.position.z / dir.z;
            var pos = camera.position.clone().add(dir.multiplyScalar(distance));

            // What normally happens with 3d
            var intersects = raycaster.intersectObject(plane);
            var newPosition = pos; // intersects[ 0 ].point.sub( offset );

            var moveOldPosition = SELECTED.position.clone();
            SELECTED.position.copy(newPosition);
            SELECTED.position.z = 10;

            // Move door corner
            var index = $.inArray(SELECTED, objects);

            var oldPosition = $.extend({}, door.geometry.vertices[
                    index == 0 ? 0 :
                        index == 1 ? me.segments :
                            index == 2 ? me.segments * (me.segments + 1) :
                                index == 3 ? me.segments * (me.segments + 2) : 0
                ]);

            // Dragg center
            if (index == 4) {
                var diffX = newPosition.x - moveOldPosition.x,
                    diffY = newPosition.y - moveOldPosition.y;

                for (var i = 0; i < objects.length; i++) {
                    if (i != 4) {
                        objects[i].position.x += diffX;
                        objects[i].position.y += diffY;
                    }
                }
                door.position.x += diffX;
                door.position.y += diffY;

                xOffset += diffX;
                yOffset += diffY;
            }
            else {
                for (var i = 0; i < door.geometry.vertices.length; i++) {
                    // 4 = segments + 1
                    var colIndex = index == 1 || index == 3 ? (i % (me.segments + 1)) : me.segments - (i % (me.segments + 1)),
                        rowNr = index == 2 || index == 3 ? Math.floor(i / (me.segments + 1)) : me.segments - Math.floor(i / (me.segments + 1)),

                        partX = colIndex * 1 / me.segments,
                        partY = rowNr * 1 / me.segments,

                    //                        flipDiff = (!flipped ? 0 : (
                    //                                        index == 0 || index == 2 ? 100 : -100
                    //                                    )),
                        diffX = (newPosition.x - xOffset) - oldPosition.x, // (newPosition.x - xOffset + flipDiff) - oldPosition.x
                        diffY = (newPosition.y - yOffset) - oldPosition.y;

                    door.geometry.vertices[i].x += (diffX * partX * partY);
                    door.geometry.vertices[i].y += (diffY * partX * partY);
                    //door.geometry.vertices[ i ].z += ((newPosition.z - oldPosition.z) * ((1 / 3) * rowIndex));
                }

                door.geometry.verticesNeedUpdate = true;
            }
        } else if (intersects.length > 0) {
            if (INTERSECTED != intersects[0].object) {
                INTERSECTED = intersects[0].object;
                INTERSECTED.material.color = new THREE.Color(0xfdc689);

                plane.position.copy(INTERSECTED.position);
                plane.lookAt(camera.position);
            }

            $("body").css("cursor", 'move');
            me.mouseEnterDraggable();
            // Rotate
        }
        else if (controlsEnabled && mousedown) {
            INTERSECTED = null;
            $("body").css("cursor", 'auto');

            // Rotate
            mouseX = event.clientX - windowHalfX;
            targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02;
        }
        else {
            if (INTERSECTED) {
                me.mouseOutDraggable();
                INTERSECTED.material.color = new THREE.Color(0xf19001);
            }
            INTERSECTED = null;
            $("body").css("cursor", 'auto');
        }
    }
}