Currently, I am working my way through the book "WebGL: up and running". The initial program introduced using Sim.js is quite complex for me to comprehend every instruction effectively, as I haven't been able to find any reliable documentation on Sim.js. Therefore, I have decided to create a simpler program in order to gain a better understanding of how it functions.
This program draws inspiration from the code provided in the 3rd chapter, specifically from these two files:
I attempted to replicate a similar program that constructs a simple sphere without texture. However, there seems to be an issue as nothing appears on the screen besides the title. Below is the code snippet:
<!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>