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

【问题标题】：include three.js in jQuery mobile app在 jQuery 移动应用程序中包含 three.js
【发布时间】：2023-03-11 11:51:01
【问题描述】：

您好，感谢您的回复。

首先，我必须告诉你，感谢 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 mobile 时，立方体不会出现...

干杯

【问题讨论】：

请向我们展示您当前的代码：HTML/CSS/JS/jQuery。最好创建一个 jsfiddle

标签： javascript jquery mobile three.js

【解决方案1】：

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

【讨论】：

嗨，我发现了我的问题，这只是一个声明错误。我将 ("document.body.appendChild(renderer.domElement) ") 替换为 ($('#container').append(renderer.domElement);) 非常感谢您尝试帮助我 :) 干杯