0 
<head>
    <title> SceneJS Test</title>
    <script type="text/javascript" src="resources/scenejs.js"></script>
</head>

我想使用 SceneJS 在画布场景上随机分布立方体。由于这个库有很大的学习曲线，我自己检查了几个例子并开始编码。我做了一些代码，无法说服自己错误在哪里：

<body onload = "main()" bgcolor="white">
        <canvas id="theCanvas" width="720" height="405">
        </canvas>
         <script type="text/javascript">

       main = function({

         N = 10;
         var canvas = document.getElementById("theCanvas");
         var sceneName = "theScene";

         SceneJS.createScene({
          id: sceneName,
          canvasId: canvas,
          nodes: [{
            type:"library",
              id:"mylib",
              nodes:[]
            },
            // Viewing transform specifies eye position, looking at the origin by default
            {
              id:"lookat",
              type: "lookAt",
              eye : { x: 0.0, y: 1.0, z: 80.0 },
              up : { z: 1.0 },
              look:{x:0,y:0,z:0},
              nodes: [
                  /* Camera describes the projection*/
                  {
                type: "camera",
                optics: {
                type: "perspective",
                fovy : 45.0,
                aspect : 720/405,
                near : 0.10,
                far : 10000.0
                  },
                  nodes: [
                   {
                    type: "rotate",
                    id: "pitch",
                    angle: 0.0,
                    x : 1.0,    
                    nodes: [
                        {
                          type: "rotate",
                          id: "yaw",
                          angle: 0.0,
                          y : 1.0,
                         }
                        ]
                      }
                      ]
                  }
                  ]
            }
            ]
        });
         var scale = 100;
         var scene = SceneJS.scene(sceneName);
         for(var i=0; i<N; i++)
         {
           scene.add("node",{
          type:"translate",
            x:(Math.random()-0.5)* scale,
            y:(Math.random()-0.5)* scale,
            z:(Math.random()-0.5)* scale,
            nodes:[{
              type: "cube",
            id: "cube"+i
            }]
            });
         }
       });

         </script>
     </body>

我请求有人指出我的错误在哪里，我会非常感谢你。我只能在浏览器中看到空白屏幕:(

4

1 回答 1

0

将您的节点添加到最里面的旋转节点——这样它们将“继承”由查看、相机和旋转节点设置的视图、投影和建模转换。

因此，给该旋转节点一个 ID，如“myYawRotate”，然后在场景之外获取对该节点的引用：

var myRotate = scene.getNode("myYawRotate");

并将您的多维数据集分支添加到该节点：

myYawRotate.add("node", { ...

这是一个场景图概念，称为“状态继承”。它符合 API 的数据驱动方法，有助于场景图的简洁性和可插拔性，但也有助于提高性能，因为变换矩阵将为每一帧上的所有立方体设置一次（“状态排序”的一个方面）。

您还需要在更高的变换中插入灯光，以及一个材质节点。然后，您就拥有了 SceneJS 以您可以看到的方式渲染立方体所需的所有状态。

在您的示例中，可能发生的情况是您确实进行了立方体渲染，但没有照明，也没有转换为视图空间和投影。

于 2012-11-13T02:23:39.573 回答