0

こんにちは。返信ありがとうございます。

まず、XSL API のおかげで、XML ファイルを HTML ファイルに翻訳していることをお伝えしなければなりません。実際には、私にとっては問題ではありません。

私の現在のコード:

[...]
<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>
    [...]

私の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);
};

「クラシック」html コード (jQuery モバイル ライブラリなし) からこの .js ファイルを呼び出している場合、それは機能します。しかし、.js jQuery モバイルを含めると、キューブが表示されません...

乾杯

4

1 に答える 1

0

html ドキュメントの head ではなく body から three.js ライブラリを読み込んでみてください。

于 2013-03-08T07:51:45.163 に答える