我正在关注“WebGL:启动并运行”一书。它用 Sim.js 制作的第一个程序有点复杂,我很难识别每条指令的作用,而且我还没有找到任何可靠的 Sim.js 文档;所以我试图编写一个更简单的程序来了解它是如何工作的。
该程序是从第 3 章中的代码“启发”而来的,其中包含以下两个文件:
我尝试编写一个基本相同的程序,但构建一个没有纹理的简单球体。但可能有问题,因为屏幕上没有绘制任何内容:我看到一个只有标题的空白页面。这是代码:
<!DOCTYPE html>
<html>
<head>
<title> Sim.js Test </title>
</head>
<body>
<h1 align="center"> Sim.js Test </h1>
<div id="container" width="400" height="400"> </div>
<script src="../Three.js-master/build/three.min.js"></script>
<script src= "../Sim.js-master/sim.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.mousewheel.min.js"> </script>
<script type="text/javascript">
SphereApp= function() {
Sim.App.call(this);
}
SphereApp.prototype= new Sim.App();
SphereApp.prototype.init= function(param) {
Sim.App.prototype.init.call(this,param);
var sphere= new Sphere();
sphere.init();
this.addObject(sphere);
}
Sphere= function() {
Sim.Object.call(this);
}
Sphere.prototype= new Sim.Object();
Sphere.prototype.init = function() {
var object= new THREE.Mesh( new THREE.SphereGeometry(1,10,10), new THREE.MeshBasicMaterial({color:0xff0000}));
this.setObject3D(object);
}
Sphere.prototype.update= function() {
}
$(document).ready( function() {
var container= document.getElementById("container");
var app= new SphereApp();
app.init({container:container});
app.run();
});
</script>
</body>
</html>