728x90
728x90
자바스크립트로 3D 모델을 로드하는 방법
SAP 3D Visual Enterprise Viewer SDK와 함께 JavaScript를 사용하여 브라우저에서 3d 모델을 로드하는 것은 매우 쉽습니다. 아래 예제에서는 MyRHFile.rh라는 모델을 사용하고 있습니다. 실제 사용 시 이 파일의 이름을 변경해야 합니다.
<html>
<head> </head>
<body>
<object id="VEViewer" type="application/rh" width="100%" height=600px">
<div align="center">Couldn't instantiate VEViewer for some reason</div>
</object>
<script type="text/javascript">
function windowOnLoad()
{
VEViewer = document.getElementById("VEViewer");
VEViewer.FileName = "MyRHFile.rh";
}
// Initialisation
var VEViewer; window.onload = windowOnLoad;
</script>
</body>
</html>
로드 시 자바스크립트를 사용하여 objects를 강조 표시 (highlight objects) 하는 방법
SAP 3D Visual Enterprise Viewer SDK와 함께 JS를 사용하여 scene tree에서 objects를 강조 표시하는 방법을 보여줍니다. 모델에서 선택된 노드는 JS에서 명시적으로 지정됩니다.
<html>
<head>
<object id="Viewer" type="application/rh" width="100%" height=600px">
</object>
</head>
<body>
<script type="text/javascript">
onload = windowOnLoad;
function windowOnLoad()
{
Viewer = document.getElementById("Viewer");
Viewer.FileName = "MyRHFile.rh";
Viewer.SceneLoaded = SelectNodes;
}
function SelectNodes()
{
var nodes = Viewer.Scene.Nodes;
var nodeCount = Viewer.Scene.Nodes.Count;
// Loops thro' the scene tree to select objects [_1_Primary_Driven_Gear & _6_Left_Case]
for (var i = 0; i < nodeCount; i++)
{
var node = nodes.GetByIndex(i);
var output = node.name;
if(output=="_1_Primary_Driven_Gear" || output=="_6_Left_Case")
{
node.visible = true;
node.selected = true;
}
}
}
</script>
</body>
</html>
scene tree에서 object 및 steps 목록을 얻는 방법
JS로 SAP 3D Visual Enterprise Viewer의 scene tree를 탐색하여 object와 steps 목록들을 가져오는 방법입니다. 이 예제를 사용하려면 여기에 "c : \ SAPVisualEnterpriseViewerSDKSamples"디렉토리 예제를 만들어야합니다. 아래 코드를 .htm 파일에 저장해야합니다. 이 디렉토리에는 MyRHFile.rh라는 샘플 .rh 파일도 있어야 합니다. 코드를 수정하여 파일 이름을 변경할 수 있습니다.
참고 :이 예에서는 document.write를 사용하지 않았습니다. 그 이유는 출력이 느려지고 insertAdjacentHTML을 사용하여 결과를 출력하기 때문 입니다.
<html>
<head>
<object id="Viewer" type="application/rh" width="100%" height=600px">
</object>
</head>
<body>
<div id="firstDiv">Ojbect <strong>List</strong></div>
<script type="text/javascript">
onload = windowOnLoad;
function windowOnLoad()
{
Viewer = document.getElementById("Viewer");
Viewer.FileName = "MyRHFile.rh";
Viewer.SceneLoaded = GetNode;
}
function GetNode()
{
var nodes = Viewer.Scene.Nodes;
var nodeCount = Viewer.Scene.Nodes.Count;
// Traverse all the Scene's nodes
for (var i = 0; i < nodeCount; i++)
{
var node = nodes.GetByIndex(i);
var output = node.name;
var div1 = document.getElementById('firstDiv');
div1.insertAdjacentHTML('afterend', '<div id="secondDiv">Second <strong>'+output+'</strong></div>');
if(output=="_1_Primary_Driven_Gear" || output=="_6_Left_Case")
{
//node.visible = true;
//node.selected = true;
//var ExecuteQuery;
//var querytoexecute ="everything() set_opacity(0.3)";
//Viewer.Scene.ExecuteQuery(querytoexecute);
}
}
}
</script>
</body>
</html>
Object를 회전, 스케일 조절
SAP 3D Visual Enterprise Viewer와 JS로 객체를 회전, 확대, 축소하는 방법입니다. 버튼 같은 것을 누르면 작동하게 하겠죠. 그의 예시입니다.
<html>
<head>
<script id=clientEventHandlersJS language=javascript>
function LoadFile() {
var fileToUpload = document.getElementById("myfile").value;
document.getElementById("vev").LoadFile(fileToUpload);
}
function rh() {
return element("vev");
}
//ALL ROTATE CODE ETC
function BadNodeWarning() {
alert("Please select an object from your Model.");
}
function UpdateScene() {
Viewer = document.getElementById("vev");
Viewer.Scene.update();
}
function getSelected() {
Viewer = document.getElementById("vev");
var nodes = Viewer.Scene.Nodes;
for (var i = 0; i < nodes.count; i++) {
n = nodes.getByIndex(i);
if (n.selected) return n;
}
return null;
}
function RotateWorld_onclick() {
var n = getSelected();
if (!n) return BadNodeWarning();
// rotate in world coords
n.transform.rotateAboutZInplace(3.14159 / 7);
UpdateScene();
}
function ScaleWorld_onclick() {
var n = getSelected();
if (!n) return BadNodeWarning();
// rotate in world coords
n.transform.scaleInPlace(1.1, 1.1, 1.1);
UpdateScene();
}
</script>
<style>
p.controls span {
display: inline-block;
width: 150px;
}
p.controls input,
input[type="button"] {
width: 100px;
}
</style>
</head>
<body>
<h1>Sample Browse and Load SAP 3d Visual Enterprise Models </h1>
<b>Step One:</b> <br><br>
<input id="myfile" name="myfile" type="file"><br><br>
<b>Step Two:</b> <br><br>
<input value="Click Here To Load Your 3D Model" type="submit" onclick="return LoadFile()">
<br><br>
<object id="vev" style="width: 600px; height: 400px" type="application/rh"></object>
<p class="controls">
<span>World transformations:</span>
<input id="RotateWorld" type="button" value="Rotate" onclick="return RotateWorld_onclick()">
<input id="ScaleWorld" type="button" value="Scale" onclick="return ScaleWorld_onclick()">
</p>
</body>
</html>
SAP 3D Visual Enterprise Viewer SDK - SAP Visual Enterprise - Community Wiki
페이지 SAP Visual Enterprise Wiki Space 배너의 맨 끝으로 배너의 맨 처음으로 SAP 3D Visual Enterprise Viewer SDK 메타 데이터의 끝으로 건너뛰기 작성자 : Fergal Dalton - 1월 28, 2015 메타 데이터의 시작으로 이동
wiki.scn.sap.com
728x90
728x90
'Javascript' 카테고리의 다른 글
| JS 싱글톤, Atomics, 데드락, 크리티컬섹션, promise, async await (0) | 2020.09.22 |
|---|---|
| [JS] replaceAll 대신하여 replace 정규식 사용하기 (0) | 2020.09.22 |
| 모던 자바스크립트 입문 : 8. 함수 (0) | 2020.07.16 |
| 모던 자바스크립트 입문 : 7. 제어 구문 (0) | 2020.07.07 |
| 모던 자바스크립트 입문 : 6. 웹 브라우저에서의 입출력 (0) | 2020.07.03 |
coding-restaurant
코딩 맛집에 방문해주셔서 감사합니다.
