flux-viewport
Version:
Flux viewport for visualizing geometry
126 lines (111 loc) • 5.34 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Flux Multiple Viewports</title>
<script src="../build/flux-viewport-bundle.global.js"></script>
</head>
<body onkeypress="focusAll()" style="background-color: lightblue;">
<select id="viewMenu" onchange="setView()">
<option value="perspective">perspective</option>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="front">front</option>
<option value="back">back</option>
<option value="right">right</option>
<option value="left">left</option>
</select>
<button onclick="focusAll()">Focus All</button>
<br>
<div id="first" style="width:400px;height:400px;display:inline-block;"></div>
<div id="second" style="width:300px;height:300px;display:inline-block;"></div>
<br>
<div id="third" style="width:400px;height:500px;display:inline-block;"></div>
<div id="fourth" style="width:400px;height:500px;display:inline-block;"></div>
<script>
var viewports = [];
// materials for testing
var lambert = new THREE.MeshLambertMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
var basic = new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide } );
var first = document.querySelector("#first");
viewports.push(new FluxViewport(first));
createFocusTestScene(viewports[0]);
var second = document.querySelector("#second");
viewports[1] = new FluxViewport(second);
viewports[1].setView(FluxViewport.getViews().top);
viewports[1].render();
var third = document.querySelector("#third");
viewports[2] = new FluxViewport(third, {selection: FluxViewport.getSelectionModes().CLICK});
createShadowTestScene(viewports[2]);
var fourth = document.querySelector("#fourth");
viewports[3] = new FluxViewport(fourth);
createFogTestScene(viewports[3]);
function setView() {
viewports[0].setView(viewMenu.value);
var view = FluxViewport.getViews()[viewMenu.value];
viewports[0].setView(view);
}
// creates a ground plane, adds to scene
function createGround(scene, size) {
var plane = new THREE.PlaneGeometry( size, size );
ground = new THREE.Mesh( plane, lambert );
scene.add(ground);
return ground;
}
function createFocusTestScene(viewport) {
viewport.setClearColor('black',0.0);
viewport.setupDefaultLighting();
viewport.setEdgesMode(FluxViewport.getEdgesModes().FRONT);
viewport.setGeometryEntity({"origin":[5,0,0],"primitive":"sphere","radius":1});
}
// creates a scene to test stencilbuffer shadows
// also tests selection
function createShadowTestScene(viewport) {
viewport.setHelpersVisible(false);
viewport.setupDefaultLighting();
viewport.setGeometryEntity([
{"origin": [4,6,4],"radius": 4,"primitive":"sphere","id":"A"},
{"origin": [-4,4,4],"radius": 4,"primitive":"sphere","id":"B"},
{"origin": [0,0,2],"radius": 4,"primitive":"sphere"},
{"vertices": [[-20,0,0],[0,20,0],[20,0,0],[0,-20,0]],"faces":[[0,3,1],[1,3,2]],"primitive":"mesh"}])
.then(function (result) {
viewport.setSelection(result.getObject().children[0]);
viewport.activateShadows();
viewport.focus(); // updates controls and causes a render
viewport.render(); // Render again due to some bug in shadows
});
viewport.addEventListener(FluxViewport.getEvents().CHANGE, function (event) {
if (event.event === FluxViewport.getEvents().SELECT) {
console.log("SELECT", event.selection);
}
});
}
// creates a scene to test fog
function createFogTestScene(viewport) {
viewport.setFogDensity(0.005);
viewport.setGeometryEntity([
{"origin":[-10,0,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
{"origin":[0,-12,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
{"origin":[1,0,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
{"origin":[1,4,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
{"origin":[4,4,0],"dimensions":[1,2,3],"axis":[0,0,1],"reference":[0,1,0],"primitive":"block"},
{"vertices": [[-50,0,0],[0,50,0],[50,0,0],[0,-50,0]],"faces":[[0,3,1],[1,3,2]],"primitive":"mesh"}])
.then(function () {
viewport.focus(); // updates controls and causes a render
});
// createGround(viewport.getScene(), 200);
// createCubes(viewport.getScene(), 200, 20, 10);
viewport.setupDefaultLighting();
viewport.focus(); // updates controls and causes a render
}
function focusAll() {
for (var i=0;i<viewports.length;i++) {
var vp = viewports[i];
if (vp) {
vp.focus();
}
}
}
</script>
</body>
</html>