Skip to content

Clipping planes #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kfarr wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Clipping planes #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2f4c47a
new example boilerplate
kfarr Aug 14, 2024
3e1c260
mvp clipping plane working
kfarr Aug 14, 2024
e2ec97a
use target box for clipping plane
kfarr Aug 14, 2024
71c07fa
invisible box to show map clipping
kfarr Aug 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
283 changes: 283 additions & 0 deletions examples/google-tiles-cropping/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,283 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>A-Frame 3D Tiles Component with 3DStreet test</title>
<meta name="description" content="Basic example for 3D Tiles component showing google 3d Tiles.">
</meta>
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
<script src="../../dist/aframe-loader-3dtiles-component.js"></script>

<!-- 3dstreet -->
<script src="https://unpkg.com/[email protected]/dist/aframe-street-component.js"></script>

<script>
AFRAME.registerComponent('clipping-planes', {
schema: {
target: { type: 'selector' }
},

init: function () {
this.clipPlanes = [];
this.targetBox = new THREE.Box3();
this.targetCenter = new THREE.Vector3();
this.targetSize = new THREE.Vector3();

// Enable local clipping in the renderer
this.el.sceneEl.renderer.localClippingEnabled = true;

// Create planes
for (let i = 0; i < 6; i++) {
this.clipPlanes.push(new THREE.Plane());
}
},

tick: function () {
if (this.data.target && this.data.target.object3D) {
this.updateClipPlanes();
}
this.applyClippingPlanes();
},

updateClipPlanes: function () {
// Update bounding box
this.targetBox.setFromObject(this.data.target.object3D);
this.targetBox.getCenter(this.targetCenter);
this.targetBox.getSize(this.targetSize);

// Update plane positions
const normals = [
new THREE.Vector3(1, 0, 0),
new THREE.Vector3(-1, 0, 0),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(0, -1, 0),
new THREE.Vector3(0, 0, 1),
new THREE.Vector3(0, 0, -1)
];

for (let i = 0; i < 6; i++) {
const normal = normals[i];
const point = this.targetCenter.clone().add(normal.clone().multiply(this.targetSize.clone().multiply(new THREE.Vector3(0.5, 0.5, 0.5))));
this.clipPlanes[i].setFromNormalAndCoplanarPoint(normal, point);
}
},

applyClippingPlanes: function () {
this.el.object3D.traverse((obj) => {
if (obj.type === "Mesh") {
if (Array.isArray(obj.material)) {
obj.material.forEach((material) => {
material.clippingPlanes = this.clipPlanes;
material.clipIntersection = true;
});
} else {
obj.material.clippingPlanes = this.clipPlanes;
obj.material.clipIntersection = true;
}
}
});
}
});
</script>

<!-- vr teleport�controls -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aframe-blink-controls.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

<style>
#guide {
position: fixed;
top: 0;
right: 0;
width: 300px;
padding: 1rem 2rem;
font-family: Roboto;
line-height: 1.2;
background-color: white;
color: black;
}

#guide p {
margin-top: 10px;
}

#data-attribution {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
font-size: 14px;
background-color: rgba(0, 0, 0, 0.3);
color: white;
z-index: 1;
}

#googleLogo {
display: inline;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 16px;
padding: 16px;
letter-spacing: 0.0575em;
/* 0.69px */
color: #FFFFFF;
}
</style>

<script>
// this makes the same camera rig setup work in VR and desktop modes
// this could be a new component, such as "swap desktop and vr controls" and put in init section
window.addEventListener("DOMContentLoaded", function () {
const sceneEl = document.querySelector("a-scene");
sceneEl.addEventListener("enter-vr", function () {
document.querySelector('#cameraRig').removeAttribute('look-controls')
document.querySelector('#cameraRig').removeAttribute('wasd-controls')
document.querySelector('#cameraRig').removeAttribute('cursor-teleport')
document.querySelector('#cameraRig').setAttribute('position', '0 0 0')
});
sceneEl.addEventListener("exit-vr", function () {
document.querySelector('#cameraRig').setAttribute('cursor-teleport', "cameraRig: #cameraRig; cameraHead: #camera;")
document.querySelector('#cameraRig').setAttribute('look-controls', "reverseMouseDrag: true;")
document.querySelector('#cameraRig').setAttribute('wasd-controls', "enabled: true")
});
})
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="ui_assets/favicon.ico">
<link rel="stylesheet" href="src/viewer-styles.css">

</head>

<body>
<div id="data-attribution">
<div id="googleLogo">Google</div>
<span id="copyright"></span>
</div>

<!-- loading animation start -->
<div class="loader__wrapper">
<div class="loader">
<div class="entities">
<img src="./ui_assets/loader/entities.svg" alt="entities" />
</div>
<div class="transport">
<div class="wrapper__transport">
<img src="./ui_assets/loader/car.svg" class="car" alt="car" />
<img src="./ui_assets/loader/bus.svg" class="bus" alt="bus" />
<img src="./ui_assets/loader/bike.svg" class="bike" alt="bike" />
</div>
</div>
<div class="road">Loading 3DStreet</div>
</div>
</div>

<!-- viewer ui start -->
<div class="viewer-header-wrapper">
<button class="viewer-logo-start-editor-button" onclick="startEditor()">
<img class="viewer-logo-img" alt="3DStreet Viewer" src="ui_assets/3DStreet-Viewer-Start-Editor.svg">
</button>
</div>

<div class="right-fixed">
<ul class="right-menu">
<li onclick="buttonScreenshotTock()"> <a class="camera" href="#"> <span> Capture image as PNG </span> <img
src="ui_assets/camera-icon.svg"> </a></li>
<li onclick="STREET.utils.inputStreetmix()"> <a class="load" href="#"> <span> Load Streetmix URL </span> <img
src="ui_assets/streetmix-logo.svg"> </a></li>
<!-- <li onclick="inputJSON()"> <a class="load" href="#"> <span> Load JSON String </span> <img src="assets/ui_assets/upload-icon.svg"> </a></li> -->
<li><a class="load"> <label for="inputfile" style="display: inherit; align-items: center; cursor: pointer"> <input
type="file" id="inputfile" style="display:none" accept=".js, .json, .txt"> <span> Load JSON File </span>
<img src="ui_assets/upload-icon.svg"></label></a></li>
</ul>
</div>

<a-scene renderer="colorManagement: true; physicallyCorrectLights: true; anisotropy: 16;"
inspector="url: //3dstreet.app/dist/3dstreet-editor.js" notify metadata scene-title reflection>
<a-assets>
<!-- uncomment the line below to load assets from local github submodule -->
<!-- <street-assets url="./assets/"></street-assets> -->
<!-- uncomment the line below to load all possible asset categories -->
<!-- <street-assets categories="sidewalk-props people people-rigged vehicles vehicles-rigged buildings intersection-props segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets> -->
<!-- a reduced set of assets for non-animated streetmix streets without intersections -->
<street-assets
categories="loud-bicycle sidewalk-props people vehicles vehicles-rigged buildings segment-textures segment-colors lane-separator stencils vehicles-transit dividers sky grounds"></street-assets>
</a-assets>

<a-entity id="street-container" data-layer-name="3D Street Layers" data-layer-show-children>
<a-entity id="default-street" street streetmix-loader="streetmixStreetURL: https://streetmix.net/kfarr/3/"
set-loader-from-hash position="-52.815 0 -45.027" rotation="0 45 0"></a-entity>
</a-entity>

<a-entity id="cameraRig" position="0 10 30" data-layer-name="Viewer"
cursor-teleport="cameraRig: #cameraRig; cameraHead: #camera;" look-controls="reverseMouseDrag: true"
wasd-controls="enabled: true">
<a-entity id="camera" camera="far: 1000" position="0 1.6 0"></a-entity>
<a-entity id="leftHand" hand-controls="hand: left;"
blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
<a-entity id="rightHand" hand-controls="hand: right"
blink-controls="cameraRig: #cameraRig; teleportOrigin: #camera; rotateOnTeleport:false;"></a-entity>
<a-entity id="screenshot" class="no-pause" screentock visible="false"></a-entity>
</a-entity>
<a-entity id="reference-layers" data-layer-name="Reference Layers" data-layer-show-children>
<a-entity id="tileset" data-no-pause loader-3dtiles="
url: https://tile.googleapis.com/v1/3dtiles/root.json;
lat: 37.77522354250163;
long: -122.41931773049723;
height: -16.5;
googleApiKey: AIzaSyAQshwLVKTpwTfPJxFEkEzOdP_cgmixTCQ;
maximumSSE: 48;
maximumMem: 400;
copyrightEl: #copyright;" clipping-planes="target: #clip-box">
</a-entity>

</a-entity>
<a-box id="clip-box" position="0 1.5 -2" scale="20 20 20" visible="false"></a-box>
<a-entity id="environment" data-layer-name="Environment" street-environment="preset: day;"></a-entity>



</a-scene>
</body>
<script>
/* loading animation script */
document.addEventListener('DOMContentLoaded', function () {
const scene = document.querySelector('a-scene');
const splash = document.querySelector('.loader__wrapper');
scene.addEventListener('loaded', function (e) {
setTimeout(() => {
splash.style.display = 'none';
}, 1000);
});
});
</script>
<script>

document.getElementById('inputfile')
.addEventListener('change', STREET.utils.fileJSON);

function buttonScreenshotTock() {
const screenshotEl = document.getElementById('screenshot');
screenshotEl.play(); // double check playing in case we're in editor mode
screenshotEl.setAttribute('screentock', 'type', 'jpg');
screenshotEl.setAttribute('screentock', 'takeScreenshot', true);
}

function startEditor() {
var sceneEl = document.querySelector('a-scene');
sceneEl.components.inspector.openInspector();
document.querySelector('.viewer-header-wrapper').style.display = 'none';
}

AFRAME.registerComponent('timed-inspector', {
init: function () {
setTimeout(function () {
window.postMessage('INJECT_AFRAME_INSPECTOR')
}, this.data * 1000)
}
});

</script>

</html>
1 change: 1 addition & 0 deletions examples/google-tiles-cropping/src/notyf.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading