Question

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

我请求有人发现错误的地方，我真的很感谢你。我只能在浏览器中看到空白的白色屏幕:(

Answer 1

将您的节点添加到最里面的旋转节点 - 这样他们将继续＆＃34;继承＆＃34;视图，投影和建模变换由外观，摄像机和旋转节点设置。

所以给旋转节点一个像＆＃34; myYawRotate＆＃34;这样的ID，然后在场外获得对该节点的引用：

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

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

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

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

您还需要在较高的变换中添加灯光以及材质节点。然后，您拥有SceneJS需要以您可以看到它们的方式呈现多维数据集的所有状态。

在你的例子中，可能发生的事情是你有多维数据集渲染，但没有照明，没有转换为视图空间和投影。

如何使用SceneJS在场景中分配随机立方体？

1 个答案: