2014-10-27 223 views
1

我有一段可怕的时间试图用一个按钮在我的babylon.js场景中显示/隐藏网格。我以为我可以创建一个功能,会显示/隐藏网格,然后从我的页面中调用该按键会影响我的现场,并写道:添加一个按钮来改变在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作为一个全局变量,然后我的场景创作中分配给它为什么我的浏览器认为它应该是一个函数?

谢谢。

+0

你确定当你点击按钮上的场景被载入? – 2014-12-01 21:33:24

回答

1

改变这样的:

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

到这样的事情:

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