jquery mobile和three.js使文档加载两次_Jquery_Mobile_Three.js

jquery mobile和three.js使文档加载两次

jquery mobile three.js

jquery mobile和three.js使文档加载两次,jquery,mobile,three.js,Jquery,Mobile,Three.js,我在玩弄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"

我在玩弄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>


你好，世界
摄像机、场景、渲染器；
变量几何、材质、网格；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=1000；
场景=新的三个。场景（）；
几何=新的三立方测量法（200200200）；
材质=新的三个.MeshBasicMaterial（{颜色：0xff0000，线框：true}）；
网格=新的三个网格（几何体、材质）；
场景。添加（网格）；
renderer=new THREE.CanvasRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
$（文档）.live（“vclick”，函数（evt）{
警报（“列表单击”）；
}); 
}
函数animate（）{
//注意：three.js包括requestAnimationFrame垫片
请求动画帧（动画）；
网格旋转.x+=0.01；
网格旋转y+=0.02；
渲染器。渲染（场景、摄影机）；
}

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

有人能解释一下发生了什么事吗？我只包括了两个jquery库。

这是jquery手机的一个怪癖。尝试将脚本移动到

头部

，而不是

正文

。如果这不能解决问题，请将three.js代码移动到jqm的pageinit中：

$(document).bind('pageinit', function() {
     // your code here...
})

是否有任何理由不将

init

包装在

$（文档）中。准备好了或pageinit
处理程序？我猜jQM会弄乱你的JS已经创建的内容，所以你应该在jQM初始化页面之后再这样做。请看一下这个。我搞不清楚到底是什么问题？瓦莱：vclick似乎不起作用。如果我在本地主机（WAMP）上尝试它，它将挂起在“define（['require'，'./widgets/loader'，…”请尝试运行此代码并让我知道。我希望您能解决您的需求问题。瓦莱：谢谢，但您的小提琴挂起了。我可以看到红色矩形，但没有动画，只有ui图标ui图标加载图标在上面。顺便说一句，vclick起作用，因此jquery mobile已加载。