3d 如何使用SceneJS在场景中分布随机立方体？ SceneJS试验_3d_Webgl_Scenejs

3d 如何使用SceneJS在场景中分布随机立方体？ SceneJS试验

3d webgl

3d 如何使用SceneJS在场景中分布随机立方体？ SceneJS试验,3d,webgl,scenejs,3d,Webgl,Scenejs,我想使用SceneJS在画布场景中随机分布立方体。因为图书馆有主要的学习曲线，我自己用几个例子检查并开始编码。我编写了一些代码，但无法说服自己错误在哪里： <head> <title> SceneJS Test</title> <script type="text/javascript" src="resources/scenejs.js"></script> </head> 主要=功能({ N=10；

我想使用SceneJS在画布场景中随机分布立方体。因为图书馆有主要的学习曲线，我自己用几个例子检查并开始编码。我编写了一些代码，但无法说服自己错误在哪里：

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


主要=功能({
N=10；
var canvas=document.getElementById（“theCanvas”）；
var sceneName=“theScene”；
SceneJS.createScene({
id:sceneName，
canvasId:canvas，
节点：[{
键入：“库”，
id:“mylib”，
节点：[]
},
//“查看变换”指定眼睛位置，默认情况下查看原点
{
id:“看”，
键入：“看”，
眼睛：{x:0.0，y:1.0，z:80.0}，
up:{z:1.0}，
看：{x:0，y:0，z:0}，
节点：[
/*摄影机描述投影*/
{
类型：“照相机”，
光学：{
键入：“透视图”，
佛维：45.0，
外观：720/405，
接近：0.10，
远：10000.0
},
节点：[
{
键入：“旋转”，
id:“音高”，
角度：0.0，
x:1.0，
节点：[
{
键入：“旋转”，
id:“偏航”，
角度：0.0，
y:1.0，
}
]
}
]
}
]
}
]
});
var量表=100；
var scene=SceneJS.scene（sceneName）；
对于（var i=0；i将节点添加到最内侧的旋转节点-这样它们将“继承”由注视、摄影机和旋转节点设置的视图、投影和建模变换
因此，为该旋转节点指定一个类似“myYawRotate”的ID，然后从场景中获取对该节点的引用：
<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>

并将多维数据集分支添加到该节点：
var myRotate = scene.getNode("myYawRotate");

这是一个称为“状态继承”的场景图概念。它符合API的数据驱动方法，有助于场景图的简洁性和可插入性，但也有助于提高性能，因为变换矩阵将为每个帧上的所有多维数据集设置一次（这是“状态排序”的一个方面）
你还需要在更高的变换中插入灯光，再加上一个材质节点，这样你就拥有了SceneJS以你能看到的方式渲染立方体所需的所有状态
在您的示例中，可能发生的情况是您确实进行了立方体渲染，但没有照明，也没有转换为视图空间并进行投影。
Oops，我错过了。谢谢您的回答。myYawRotate.add（“node”，{…
我想这应该是，myRotate.add（“node”，{…既然您已经将“myYawRotate”的实例转换为“myRotate”？我按照您的建议使用了light，myYawRotate的类型为“rotate”作为内部节点，在yawroate之后，我提到了material节点。访问了myyawrotate场景外并绑定了我的立方体。但仍然能够看到相同的白色空白屏幕。我甚至无法看到画布。我使用了定向光源。xeolabs的github中是否有帮助部分，以便我可以在那里发布我的示例。
myYawRotate.add("node", { ...