用chechbutton隱藏/顯示模型（jsc3d）

-1

我是jsc3d的新用戶。我在互聯網上沒有找到任何工作示例。我想在jsc3d中隱藏或顯示stl模型並點擊chechbutton。任何人都可以幫我完成我的代碼。用chechbutton隱藏/顯示模型（jsc3d）

非常感謝。

這裏是我的代碼： https://github.com/humu2009/jsc3d/issues/174

感謝您的答覆。但是下面的代碼仍然不起作用。你有什麼想法，爲什麼？

</HEAD> 
<script src="/m/raw-attachment/wiki/WikiStart/jsc3d.min.js"></script> 
<script src="/m/raw-attachment/wiki/WikiStart/jsc3d.touch.js"></script> 
<script src="/m/raw-attachment/wiki/WikiStart/jsc3d.webgl.js"></script> 
</HEAD> 

<BODY> 
<div style="width:800px; margin:auto; position:relative;"> 
    <canvas id="cv" style="border: 1px solid;" width="750" height="400"> 

    </canvas> 

<form action=""> 
     <label> 
     <input type='checkbox' onclick='toggleShapeGreen(this.checked);'>Toggle Shape Green 
     </label> 
     <label> 
     <input type='checkbox' onclick='toggleShapeBlueViolet(this.checked);'>Toggle Shape Blue Violet 
     </label> 
     <label> 
     <input type='checkbox' onclick='toggleShapeBlue2(this.checked);'>Toggle Shape Blue 2 
     </label> 
</form> 
</div> 

<script type="text/javascript"> 
var canvas = document.getElementById('cv'); 
var viewer = new JSC3D.Viewer(canvas); 
var components = ['/m/raw-attachment/wiki/WikiStart/shape_green.stl', '/m/raw-attachment/wiki/WikiStart/shape_blue_violet.stl', '/m/raw-attachment/wiki/WikiStart/shape_blue.2.stl']; 
var colors = [0xff0000, 0x0000ff, 0x00ff00, 0xffff00, 0x00ffff]; 
var theScene = new JSC3D.Scene; 
var numOfLoaded = 0; 

var onModelLoaded = function(scene) { 
    var meshes = scene.getChildren(); 
    for (var i=0; i<meshes.length; i++) { 
     meshes[i].name = scene.srcUrl;    
     theScene.addChild(meshes[i]); 
     if (meshes.length > 0) 
      meshes[0].setMaterial(new JSC3D.Material('red-material', 0, colors[numOfLoaded])); 
    } 
     if (++numOfLoaded == components.length) 
     viewer.replaceScene(theScene); 
}; 

function getMeshIndexByName(name) { 
    var meshes = viewer.scene.getChildren(); 
    for (var i=0, l=meshes.length; i<l; i++) { 
     if (meshes[i].name == name) { 
      return i; 
     } 
    } 
    return null; 
} 

function toggleShapeGreen(checked) { 
    viewer.scene.children[0].visible = checked; 
    viewer.update(); 
} 
function toggleShapeBlueViolet(checked) { 
    viewer.scene.children[1].visible = checked; 
    viewer.update(); 
} 
function toggleShapeBlue2(checked) { 
    viewer.scene.children[2].visible = checked; 
    viewer.update(); 
} 

function toggleShapeGreen(checked) { 
    viewer.scene.children[getMeshIndexByName("shape_green.stl")].visible = checked; 
    viewer.update(); 
} 
function toggleShapeBlueViolet(checked) { 
    viewer.scene.children[getMeshIndexByName("shape_blue_violet.stl")].visible = checked; 
    viewer.update(); 
} 
function toggleShapeBlue2(checked) { 
    viewer.scene.children[getMeshIndexByName("shape_blue.2.stl")].visible = checked; 
    viewer.update(); 
} 

viewer.setParameter('ModelColor', '#FF0000'); 
viewer.setParameter('BackgroundColor1', '#E5D7BA'); 
viewer.setParameter('BackgroundColor2', '#383840'); 
viewer.setParameter('RenderMode', 'flat'); 
viewer.setParameter('Renderer', 'webgl'); 
viewer.init(); 
viewer.update(); 

</script> 
</BODY>

來源

2016-02-25 medo93

在你的HTML很顯然你應該添加一些複選框：

<label> 
    <input type='checkbox' onclick='toggleShapeGreen(this.checked);'>Toggle Shape Green 
</label> 
<label> 
    <input type='checkbox' onclick='toggleShapeBlueViolet(this.checked);'>Toggle Shape Blue Violet 
</label> 
<label> 
    <input type='checkbox' onclick='toggleShapeBlue2(this.checked);'>Toggle Shape Blue 2 
</label>

在腳本中添加處理程序：

function toggleShapeBlue(checked) { 
    viewer.scene.children[0].visible = checked; 
    viewer.update(); 
} 
... and so on

上面的代碼假定網已經在被加載正確的順序 - 居多，這不是的情況。因此，您需要通過她的名字來識別網格。要做到這一點，您應該修改您的modelloaded處理程序以跟蹤網格的名稱。

var onModelLoaded = function(scene) { 
    var meshes = scene.getChildren(); 
    for (var i=0; i<meshes.length; i++) { 
     // add this below or, better, extract just only the file name part 
     meshes[i].name = scene.srcUrl;    
     theScene.addChild(meshes[i]); 
     if (meshes.length > 0) 
      meshes[0].setMaterial(new JSC3D.Material('red-material', 0, colors[numOfLoaded])); 
    } 
    if (++numOfLoaded == components.length) 
     viewer.replaceScene(theScene); 
};

現在，您可以通過名稱獲得網格的指數，通過這樣的功能：

function getMeshIndexByName(name) { 
    var meshes = viewer.scene.getChildren(); 
    for (var i=0, l=meshes.length; i<l; i++) { 
     if (meshes[i].name == name) { 
      return i; 
     } 
    } 
    return null; 
}

現在，如果你已經確定了網格，可以顯示/帶隱藏這樣一段代碼如下：

function toggleShapeGreen(checked) { 
    viewer.scene.children[getMeshIndexByName("shape_green.stl")].visible = checked; 
    viewer.update(); 
}

...等等其他兩個。

來源

2016-02-27 13:22:35 deblocker

看看我的新問題。謝謝。 – medo93

用chechbutton隱藏/顯示模型（jsc3d）

回答

相關問題