模拟.js第一个程序:屏幕上没有绘制任何内容

Sim.js first program: nothing drawn on the screen

本文关键字：绘制 任何内 屏幕 js 第一个 程序 模拟      更新时间：2023-09-26

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

该程序的"灵感"来自第 3 章中的代码，其中包含以下两个文件：

  1. 地球基本.js;
  2. 图形-地球-基础.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>

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

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

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

相关文章：