Question

我正在关注“WebGL：up and running”这本书。它使用Sim.js制作的第一个程序有点复杂，我很难识别每个指令的作用，而且我没有找到任何可靠的Sim.js文档;所以我正在尝试编写一个更简单的程序，以了解它是如何工作的。

该程序受到第3章代码的“启发”，该代码包含以下两个文件：

earth-basic.js;
graphics-earth-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>

Answer 1

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

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

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

Sim.js第一个程序：屏幕上没有任何内容

1 个答案: