tom/personal_site
1
0
Fork 0
mirror of https://github.com/TomHodson/tomhodson.github.com.git synced 2025-06-26 10:01:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add zoom control

Browse Source
This commit is contained in:
Tom 2023-11-10 13:12:20 +00:00
parent f5b1cdf150
commit d5bd1a236e
3 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_projects/bike_lights.md
View File

@ -26,7 +26,7 @@ head: |
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
---
<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb">
<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb" zoom=37>
<img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
<p class="has-wc">Loading model...</p>
</outline-model-viewer>

2
_projects/helmet_lights.md
View File

@ -26,7 +26,7 @@ head: |
<script src="/assets/js/outline-model-viewer/index.js" type="module"></script>
---
<outline-model-viewer model = "{{page.models}}/model.glb">
<outline-model-viewer model = "{{page.models}}/model.glb" zoom=60>
<img class="outline-model-poster no-wc" src = "{{page.img.src}}">
<p class="has-wc">Loading model...</p>
</outline-model-viewer>

30
assets/js/outline-model-viewer/index.js
View File

@ -153,13 +153,16 @@ class OutlineModelViewer extends HTMLElement {
const outline_color = isDark ? 0xffffff : 0x000000;
const model_color = background_color;
// Init scene
const camera = new THREE.PerspectiveCamera(
70,
canvas_rect.width / canvas_rect.height,
0.1,
100
);
// // Init scene
// const camera = new THREE.PerspectiveCamera(
// 70,
// canvas_rect.width / canvas_rect.height,
// 0.1,
// 100
// );
const camera = new THREE.OrthographicCamera( canvas_rect.width / - 2, canvas_rect.width / 2, canvas_rect.height / 2, canvas_rect.height / - 2, 1, 1000 );
camera.zoom = parseFloat(this.getAttribute("zoom") || "1")
console.log(camera.zoom)
camera.position.set(10, 2.5, 4);
// create the scene and the camera
@ -256,7 +259,7 @@ class OutlineModelViewer extends HTMLElement {
// Render loop
function update() {
requestAnimationFrame(update);
// controls.update();
controls.update();
composer.render();
}
update();
@ -279,6 +282,13 @@ class OutlineModelViewer extends HTMLElement {
window.addEventListener("resize", onWindowResize, false);
if(this.getAttribute("debug")) setupDebug();
document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
if (event.key == " ") {
console.log(camera.toJSON());
}
}
}
render() {
@ -292,6 +302,10 @@ class OutlineModelViewer extends HTMLElement {
</div>
<style>
details {
display: none;
}
#container {
width: 90%;
height: 100%;