Как распределить случайные кубы в сцене, используя SceneJS?

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

Я прошу кого-то определить меня, где ошибки, я был бы очень благодарен вам. Я мог видеть только пустой белый экран в моем браузере:(

Источник

1 ответ

Решение

Добавьте ваши узлы к самому внутреннему узлу поворота - таким образом они будут "наследовать" преобразования вида, проекции и моделирования, установленные узлами lookat, camera и rotate.

Так что дайте этому вращающемуся узлу идентификатор типа "myYawRotate", а затем получите ссылку на этот узел вне сцены:

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

и добавьте свои ветви куба к этому узлу:

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

Это концепция графа сцены, называемая "наследование состояний". Он соответствует управляемому данными подходу API, помогая краткости и подключаемости графа сцены, а также производительности, поскольку матрицы преобразования будут установлены один раз для всех кубов в каждом кадре (аспект "сортировки состояний").

Вам также нужно будет вставить источники света среди высших преобразований, а также узел материала. Тогда у вас есть все состояние, необходимое SceneJS для рендеринга кубов таким образом, чтобы вы могли их видеть.

В вашем примере, вероятно, происходит то, что у вас есть рендеринг кубов, но без подсветки, и он не трансформируется в пространство просмотра и не проецируется.

Источник
Другие вопросы по тегам