1

ボタンを使用して babylon.js シーンでメッシュを表示/非表示にしようとすると、ひどい時間がかかります。メッシュを表示/非表示にする関数を作成し、ページからそのボタンを呼び出してシーンに影響を与えることができると想定し、次のように記述しました。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script src="assets/js/babylon.js"></script>
<script src="assets/js/hand-1.3.8.js"></script>
<script src="assets/js/cannon.js"></script>  <!-- optional physics engine -->

</head>
<body>
    <div id="container">
        <!-- Page Content -->
        <div id="content">
      <div id="tableBuilder">

        <div id='cssmenu'>
          <ul id="tops">
            <button type="button" onclick="showTop('T115')">Round</button>
            <button type="button" onclick="showTop('T345')">Rectangular</button>
          </ul>
        </div>
              <canvas id="renderCanvas"></canvas>
      </div>
    </div>
  </div>
  <script>


    if (BABYLON.Engine.isSupported()) {
      var myNewScene = null;
      var canvas = document.getElementById("renderCanvas");
      var engine = new BABYLON.Engine(canvas, true);

     BABYLON.SceneLoader.Load("", "test.babylon", engine, function (newScene) {

        myNewScene = newScene;

        var meshT115 = newScene.getMeshByName("T115").visibility = 0;
        var mesh510 = newScene.getMeshByName("510").visibility = 1;
        var meshT345 = newScene.getMeshByName("T345").visibility = 1;
        var mesh350 = newScene.getMeshByName("350").visibility = 0;

        var myBaseMesh = newScene.getMeshByName("510");
        var materialMyMesh = new BABYLON.StandardMaterial("texture1", newScene);
        materialMyMesh.diffuseTexture = new BABYLON.Texture("assets/images/stain/Natural.jpg", newScene);
        materialMyMesh.specularPower = 50;
        myBaseMesh.material = materialMyMesh;

        var myTopMesh = newScene.getMeshByName("T345");
        var materialMyMesh = new BABYLON.StandardMaterial("texture2", newScene);
        materialMyMesh.diffuseTexture = new BABYLON.Texture("assets/images/stain/Natural.jpg", newScene);
        materialMyMesh.specularPower = 50;
        myTopMesh.material = materialMyMesh;

        // Wait for textures and shaders to be ready
        newScene.executeWhenReady(function () {
          // Attach camera to canvas inputs
          var myCamera = new BABYLON.ArcRotateCamera("ArcRotateCamera", 1.2, 1.2, 5, new BABYLON.Vector3(0, 0.1, 0.1), newScene); 
          myCamera.wheelPrecision = 10;

          var light0 = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 50, 0), newScene);
          light0.diffuse = new BABYLON.Color3(1, 1, 1);
          light0.specular = new BABYLON.Color3(1, 1, 1);
          light0.groundColor = new BABYLON.Color3(.5, .5, .5);

          newScene.activeCamera = myCamera;

          newScene.activeCamera.attachControl(canvas);

          // Once the scene is loaded, just register a render loop to render it
          engine.runRenderLoop(function() {
              newScene.render();
          });
        });
      }, function (progress) {
          // To do: give progress feedback to user
      });
    }

    function showTop (x) {
      myNewScene.getMeshById("myTopMesh").visibility = 0;
      myNewScene.getMeshById(x).visibility = 1;
    }  
  </script>
</body>

</html>

しかし、私が得るのはエラーだけです。

Uncaught TypeError: undefined is not a function 
    showTop    3d.php::88
    onclick    3d.php::88

88行目は次のとおりです。

myNewScene.getMeshById(x).visibility = 1;

私の質問は、myNewScene をグローバル変数として宣言し、シーン作成内でそれを割り当てている場合、ブラウザがそれを関数と見なすのはなぜですか?

ありがとう。

4

1 に答える 1