在jQuery移动应用程序中包含three.js

Question

Hi and thank you for your response. 嗨，谢谢您的回复。

Firstly, i have to tell you that i'm tranlsating XML file in HTML file thanks to XSL API, it's actually not a problem for me. 首先，我必须告诉您，由于使用XSL API，我正在将HTML文件转换为HTML文件，这实际上对我来说不是问题。

My current code : 我当前的代码：

[...]
<xsl:template match="/">
    <html>
        <head>              
            <meta name="viewport" content="width=device-width, initial-scale=1"/> 
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
            <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
            <script src="http://www.html5canvastutorials.com/libraries/Three.js"></script>
        </head> 
        <body>              
            <xsl:apply-templates select="STAGE"/>
        </body>         
    </html>     
</xsl:template>

<xsl:template match="STAGE">
    <xsl:apply-templates select="PAGE"/>        
</xsl:template>

<xsl:template match="PAGE">
    <xsl:variable name="T">
                <xsl:value-of select="TITLE"/>
    </xsl:variable>

    <!-- page -->
    <div data-role="page" id="{@id}" data-theme="b">
        <!-- header -->
        <div data-role="header">
            <h1>            
                <xsl:value-o select="$T"/>                                      
            </h1>   
        </div>
        <!-- /header -->

        <!-- content -->
        <div data-role="content">   
            <!--<xsl:apply-templates select="COMPONENT"/>-->
        </div>
        <!-- /content -->

                            <!-- HERE IS MY PROBLEM -->
            <script src="myJS.js"></script> 

    </div>
    <!-- /page -->      

</xsl:template>
    [...]

and my javaScript code is the exemple of the tutorial i told you : 我的javaScript代码是我告诉您的教程的一个示例：

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();

function animate(lastTime, angularSpeed, three){
    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
    three.cube.rotation.y += angleChange;
    lastTime = time;

    // render
    three.renderer.render(three.scene, three.camera);

    // request new frame
    requestAnimFrame(function(){
        animate(lastTime, angularSpeed, three);
    });
}

window.onload = function(){
    var angularSpeed = 0.2; // revolutions per second
    var lastTime = 0;

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // camera
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 700;

    // scene
    var scene = new THREE.Scene();

    // cube
    var colors = [0x0000ff, 0x00ff00, 0x00ffff, 0xff0000, 0xff00ff, 0xffff00];
    var materials = [];

    for (var n = 0; n < 6; n++) {
        materials.push([new THREE.MeshBasicMaterial({
            color: colors[n]
        })]);
    }

    var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
    cube.overdraw = true;
    scene.add(cube);   

    // create wrapper object that contains three.js objects
    var three = {
        renderer: renderer,
        camera: camera,
        scene: scene,
        cube: cube
    };

    animate(lastTime, angularSpeed, three);
};

When i'm calling this .js file from a "classic" html code (without jQuery mobile libraries), thats works. 当我从“经典” html代码（没有jQuery移动库）调用此.js文件时，可以使用。 But when i include .js jQuery mobile, the cube does not appear... 但是当我包括.js jQuery mobile时，多维数据集不会出现...

Cheers 干杯

Answer 1

尝试从html文档的正文而不是文件头加载three.js库。

在jQuery移动应用程序中包含three.js

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-03-08 07:51:45

在jQuery移动应用程序中包含three.js

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-03-08 07:51:45

解决方案1
0 已采纳 2013-03-08 07:51:45