wallabyway/clone-three-mesh.html

## clone-three-mesh.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="data:,">
    <link rel="stylesheet" href="https://wallabyway.github.io/floor-animation/skeleton.min.css">
    <title>SkeletonCSS</title>
</head>

<body onload="init('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLnFMUF82TVVXVFYtaDFMUE0xZ1ozZXc_dmVyc2lvbj0z')" style="margin:0; overflow-y: hidden;">
 <div class="container">
    <nav class="navbar">
      <div class="container">
        <ul class="navbar-list">
          <li class="navbar-item"><img class="navbar-button navbar-img" src="https://wallabyway.github.io/floor-animation/logo.png"/></li>
          <li class="navbar-item"><button onClick="alert('dummy1')" class="navbar-button button-primary">Button1</button></li>
          <li class="navbar-item"><button onClick="alert('dummy2')" class="navbar-button button-primary">Button2</button></li>
          <li class="navbar-itemr mobile"><a class="navbar-button button" href="https://github.com/wallabyway">Github</a></li>
        </ul>
      </div>
    </nav>
  </div>
  <div id="forgeViewer"></div>
</body>

<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script src="https://6jm6lvl74k.execute-api.us-west-2.amazonaws.com/latest/_adsk.js"></script>

<script>
let viewer = null;
let modelBuilder = null;

function init(urn) {

    const options = {
        env: 'Local',
        isAEC: true,
        svf:'./Model/output/1/Result.svf'
    };

    Autodesk.Viewing.Initializer(options, async () => {

        const div = document.getElementById('forgeViewer');

        const config = { extensions: ["Autodesk.Viewing.SceneBuilder"] };

        viewer = new Autodesk.Viewing.Private.GuiViewer3D(div, config);
        viewer.start(options.svf, options);
        viewer.setTheme("light-theme");
        viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onLoadFinished)
    });

    function onLoadFinished() {
        let state = {
          "viewport": {
            "name": "",
            "eye": [457.0459792269146, 435.36437034649543, 340.8248383086444],
            "target": [320.2851566928801, 560.900149810315, 232.42396101101994],
            "up": [-0.37212532679833116, 0.34028567101377705, 0.863555674671841],
            "worldUpVector": [-4.440892098500626e-16, 0, 1],
            "pivotPoint": [691.0592814703068, 652.7783060222673, -128.95114313668273],
            "distanceToOrbit": 214.97326509282175,
            "aspectRatio": 1.1098814229249012,
            "projection": "orthographic",
            "isOrthographic": true,
            "orthographicHeight": 214.9732650928228
          }
        };

        viewer.restoreState(state, null, true);
        let instanceTree = viewer.model.getInstanceTree();

        function cloneMesh(dbid, x) {
            let container = new THREE.Object3D();
            instanceTree.enumNodeFragments(dbid, (fragId) => {
                let mesh = viewer.model.getFragmentList().getVizmesh(fragId).clone();
                mesh.applyMatrix(mesh.matrixWorld);
                mesh.translateOnAxis(new THREE.Vector3(1,0,0), x);
                mesh.frustumCulled = false;
                //modelBuilder.addMesh(mesh);
                container.add(mesh);
            });
            //modelBuilder.addMesh(container);
            viewer.impl.scene.add(container);
        }

        cloneMesh(12, -50);
        cloneMesh(12, -80);
        cloneMesh(12, -100);
        viewer.impl.invalidate(true, true, true);

    }
}
</script>

<script>
// save this script as seperate file...
// ------------- ./LabelsExtension.js

class LabelsExtension extends Autodesk.Viewing.Extension {
    load() {
        alert('LabelsExtension...loaded');
        return true;
    }

    unload() {
        return true;
    }
}

Autodesk.Viewing.theExtensionManager.registerExtension('LabelsExtension', LabelsExtension);
</script>


	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="icon" href="data:,">
	<link rel="stylesheet" href="https://wallabyway.github.io/floor-animation/skeleton.min.css">
	<title>SkeletonCSS</title>
	</head>

	<body onload="init('dXJuOmFkc2sud2lwcHJvZDpmcy5maWxlOnZmLnFMUF82TVVXVFYtaDFMUE0xZ1ozZXc_dmVyc2lvbj0z')" style="margin:0; overflow-y: hidden;">
	<div class="container">
	<nav class="navbar">
	<div class="container">
	<ul class="navbar-list">
	<li class="navbar-item"><img class="navbar-button navbar-img" src="https://wallabyway.github.io/floor-animation/logo.png"/></li>
	<li class="navbar-item"><button onClick="alert('dummy1')" class="navbar-button button-primary">Button1</button></li>
	<li class="navbar-item"><button onClick="alert('dummy2')" class="navbar-button button-primary">Button2</button></li>
	<li class="navbar-itemr mobile"><a class="navbar-button button" href="https://github.com/wallabyway">Github</a></li>
	</ul>
	</div>
	</nav>
	</div>
	<div id="forgeViewer"></div>
	</body>

	<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
	<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
	<script src="https://6jm6lvl74k.execute-api.us-west-2.amazonaws.com/latest/_adsk.js"></script>

	<script>
	let viewer = null;
	let modelBuilder = null;

	function init(urn) {

	const options = {
	env: 'Local',
	isAEC: true,
	svf:'./Model/output/1/Result.svf'
	};

	Autodesk.Viewing.Initializer(options, async () => {

	const div = document.getElementById('forgeViewer');

	const config = { extensions: ["Autodesk.Viewing.SceneBuilder"] };

	viewer = new Autodesk.Viewing.Private.GuiViewer3D(div, config);
	viewer.start(options.svf, options);
	viewer.setTheme("light-theme");
	viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, onLoadFinished)
	});

	function onLoadFinished() {
	let state = {
	"viewport": {
	"name": "",
	"eye": [457.0459792269146, 435.36437034649543, 340.8248383086444],
	"target": [320.2851566928801, 560.900149810315, 232.42396101101994],
	"up": [-0.37212532679833116, 0.34028567101377705, 0.863555674671841],
	"worldUpVector": [-4.440892098500626e-16, 0, 1],
	"pivotPoint": [691.0592814703068, 652.7783060222673, -128.95114313668273],
	"distanceToOrbit": 214.97326509282175,
	"aspectRatio": 1.1098814229249012,
	"projection": "orthographic",
	"isOrthographic": true,
	"orthographicHeight": 214.9732650928228
	}
	};

	viewer.restoreState(state, null, true);
	let instanceTree = viewer.model.getInstanceTree();

	function cloneMesh(dbid, x) {
	let container = new THREE.Object3D();
	instanceTree.enumNodeFragments(dbid, (fragId) => {
	let mesh = viewer.model.getFragmentList().getVizmesh(fragId).clone();
	mesh.applyMatrix(mesh.matrixWorld);
	mesh.translateOnAxis(new THREE.Vector3(1,0,0), x);
	mesh.frustumCulled = false;
	//modelBuilder.addMesh(mesh);
	container.add(mesh);
	});
	//modelBuilder.addMesh(container);
	viewer.impl.scene.add(container);
	}

	cloneMesh(12, -50);
	cloneMesh(12, -80);
	cloneMesh(12, -100);
	viewer.impl.invalidate(true, true, true);

	}
	}
	</script>

	<script>
	// save this script as seperate file...
	// ------------- ./LabelsExtension.js

	class LabelsExtension extends Autodesk.Viewing.Extension {
	load() {
	alert('LabelsExtension...loaded');
	return true;
	}

	unload() {
	return true;
	}
	}

	Autodesk.Viewing.theExtensionManager.registerExtension('LabelsExtension', LabelsExtension);
	</script>