こんにちは。返信ありがとうございます。
まず、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 モバイルを含めると、キューブが表示されません...
乾杯