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> <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"> <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
<p class="has-wc">Loading model...</p> <p class="has-wc">Loading model...</p>
</outline-model-viewer> </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> <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}}"> <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
<p class="has-wc">Loading model...</p> <p class="has-wc">Loading model...</p>
</outline-model-viewer> </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 outline_color = isDark ? 0xffffff : 0x000000;
const model_color = background_color; const model_color = background_color;
// Init scene // // Init scene
const camera = new THREE.PerspectiveCamera( // const camera = new THREE.PerspectiveCamera(
70, // 70,
canvas_rect.width / canvas_rect.height, // canvas_rect.width / canvas_rect.height,
0.1, // 0.1,
100 // 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); camera.position.set(10, 2.5, 4);
// create the scene and the camera // create the scene and the camera
@ -256,7 +259,7 @@ class OutlineModelViewer extends HTMLElement {
// Render loop // Render loop
function update() { function update() {
requestAnimationFrame(update); requestAnimationFrame(update);
// controls.update(); controls.update();
composer.render(); composer.render();
} }
update(); update();
@ -279,6 +282,13 @@ class OutlineModelViewer extends HTMLElement {
window.addEventListener("resize", onWindowResize, false); window.addEventListener("resize", onWindowResize, false);
if(this.getAttribute("debug")) setupDebug(); if(this.getAttribute("debug")) setupDebug();
document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
if (event.key == " ") {
console.log(camera.toJSON());
}
}
} }
render() { render() {
@ -292,6 +302,10 @@ class OutlineModelViewer extends HTMLElement {
</div> </div>
<style> <style>
details {
display: none;
}
#container { #container {
width: 90%; width: 90%;
height: 100%; height: 100%;