Three.js iPad 性能

Question

在我完全放弃这个想法之前，我想咨询一下 three.js 社区，以确保我没有做错什么？

基本上，我采用了 Mr doobs 画布几何立方体示例 http://mrdoob.github.io/three.js/examples/canvas_geometry_cube.html 并将图像应用于立方体面。在 iPad 上进行测试时，我的帧速度为 1fps（而不是原始示例中的 60fps）。图像在旋转时看起来也很破碎。

有什么技巧可以让它在 iPad 上正常工作吗？我知道不支持 WebGL，但我认为画布渲染器的性能会比它更好？

代码如下

非常感谢

function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            var info = document.createElement( 'div' );
            info.style.position = 'absolute';
            info.style.top = '10px';
            info.style.width = '100%';
            info.style.textAlign = 'center';
            info.innerHTML = 'Drag to spin the cube';
            container.appendChild( info );

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.y = 150;
            camera.position.z = 500;

            scene = new THREE.Scene();

            // Cube

            var loader = new THREE.TextureLoader();
            loader.load( 'test-texture.png', function ( texture ) {
                var materials = [];
                var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
                material.transparent = true;
                for ( var i = 0; i < 6; i ++ ) {
                 materials.push( material );
                }
                // then the cube definitions
                cube = new THREE.Mesh( new THREE.CubeGeometry( 200, 200, 200,4,4,4), new THREE.MeshFaceMaterial(materials));
                cube.position.y = 150;
                scene.add( cube );

                animate();   
            });

            // Plane

            var geometry = new THREE.PlaneGeometry( 200, 200 );
            geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

            var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );

            plane = new THREE.Mesh( geometry, material );
            scene.add( plane );

            renderer = new THREE.CanvasRenderer();
            renderer.setClearColor( 0xf0f0f0 );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            container.appendChild( stats.domElement );

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

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

Answer 1

我建议等待 iOS8 带来 WebGL 支持。