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

ノードを最も内側の回転ノードに追加します。これにより、lookat、カメラ、および回転ノードによって設定されたビュー、投影、およびモデリングの変換が「継承」されます。

したがって、その回転ノードに「myYawRotate」のようなIDを指定してから、そのノードへの参照をシーン外で取得します。

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

そして、そのノードにキューブブランチを追加します。

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

これは「状態継承」と呼ばれるシーングラフの概念です。これは、APIのデータ駆動型アプローチに適合し、シーングラフの簡潔さとプラグ可能性を支援しますが、変換行列が各フレームのすべてのキューブに対して1回設定されるため、パフォーマンスも向上します（「状態の並べ替え」の側面）。

また、より高いトランスフォームとマテリアルノードの間にライトを挿入する必要があります。これで、SceneJSがキューブを表示できるようにレンダリングする必要があるすべての状態が得られます。

あなたの例では、おそらく起こっていることは、立方体のレンダリングがありますが、照明がなく、ビュー空間に変換されて投影されていないことです。

于 2012-11-13T02:23:39.573 に答える