0

我正在关注“WebGL：启动并运行”一书。它用 Sim.js 制作的第一个程序有点复杂，我很难识别每条指令的作用，而且我还没有找到任何可靠的 Sim.js 文档；所以我试图编写一个更简单的程序来了解它是如何工作的。

该程序是从第 3 章中的代码“启发”而来的，其中包含以下两个文件：

  1. 地球基础.js；
  2. 图形-地球-basic.html。

我尝试编写一个基本相同的程序，但构建一个没有纹理的简单球体。但可能有问题，因为屏幕上没有绘制任何内容：我看到一个只有标题的空白页面。这是代码： 

<!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>
4

1 回答 1

0

div我通过向 HTML元素 添加一些属性解决了这个问题：

<div id="container" style="width:100%;height:100%;background-color:black;overflow:hidden; position:absolute;"> </div>

绘图没问题，但容器被隐藏了。

于 2013-10-21T11:20:02.600 回答