2

我在玩jquery mobile 和three.js。

这是我的代码

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <title>Hello World</title>
    </head>
    <body>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.mobile-1.2.0.js"></script>   
    <script src="js/three.min.js"></script>

    <script>

    var camera, scene, renderer;
    var geometry, material, mesh;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        scene = new THREE.Scene();

        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

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

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

        document.body.appendChild( renderer.domElement );
        $(document).live("vclick", function (evt) {
            alert('list click');
        }); 
    }

    function animate() {

        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame( animate );


        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );

    }

    </script>   
    </body>
</html>

这是来自three.js 的一个示例，效果很好。虽然如果我包含 jquery mobile 和 jquery 库，文档会加载两次。（有一个矩形，如果你向下滚动，有一个旋转的立方体，底部有一个文本“加载”两次。）

有人可以解释发生了什么吗？我只包括了两个 jquery 库。

4

1 回答 1

0

这是一个 jquery 移动怪癖。尝试将您的脚本移动到head，而不是body. 如果这不能解决问题，请将您的 three.js 代码移动到 jqm 的 pageinit 中：

$(document).bind('pageinit', function() {
     // your code here...
})
于 2013-03-24T23:28:06.147 回答