diff options
Diffstat (limited to 'Custom keyboard V2/pcb/index.html')
| -rw-r--r-- | Custom keyboard V2/pcb/index.html | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/Custom keyboard V2/pcb/index.html b/Custom keyboard V2/pcb/index.html new file mode 100644 index 0000000..8a6ce3f --- /dev/null +++ b/Custom keyboard V2/pcb/index.html @@ -0,0 +1,224 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>three.js webgl - loaders - VRML loader</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> + <link type="text/css" rel="stylesheet" href="main.css"> + </head> + + <body> + <canvas class="3d_viewer" file="Node5.net_2_PCB"></canvas> + + <div id="overlay"> + <div id="text">Loading</div> + </div> + + <script type="importmap"> + { + "imports": { + "three": "./three.module.js" + } + } + </script> + + <script type="module"> + import * as THREE from 'three'; + import Stats from './stats.module.js'; + import { OrbitControls } from './OrbitControls.js'; + import { VRMLLoader } from './VRMLLoader.js'; + // import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; + + window.addEventListener( 'resize', onWindowResize ); + window.addEventListener('mousedown', onMouseDown); + window.addEventListener("touchstart", onMouseDown); + + var canvases = document.getElementsByClassName('3d_viewer'); + var canvas = canvases[0]; + + let camera, scene, renderer, stats, controls, loader, vrmlScene, model; + var spin = true; + + /* // XYZ vector indicators + const axesHelper = new THREE.AxesHelper( 5 ); + scene.add( axesHelper ); + */ + + camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 10, 1e10 ); + camera.position.set( - 10, 5, 10 ); + + scene = new THREE.Scene(); + scene.add( camera ); + + // light + const ambientLight = new THREE.AmbientLight( 0xffffff, 1.2 ); + scene.add( ambientLight ); + const dirLight = new THREE.DirectionalLight( 0xffffff, 2.0 ); + dirLight.position.set( 200, 200, 200 ); + scene.add( dirLight ); + + loader = new VRMLLoader(); + loadAsset(canvas.getAttribute("file")); + + // renderer + renderer = new THREE.WebGLRenderer({canvas: canvas}); + renderer.setPixelRatio( window.devicePixelRatio ); + renderer.setSize( window.innerWidth, window.innerHeight ); + renderer.setAnimationLoop( animate ); + document.body.appendChild( renderer.domElement ); + + // controls + controls = new OrbitControls( camera, renderer.domElement ); + controls.minDistance = 1; + controls.maxDistance = 200; + controls.enableDamping = false; + controls.enablePan = true; + + // FPS counter + stats = new Stats(); + document.body.appendChild( stats.dom ); + + function onMouseDown(){ + spin = false; + } + + const fitCameraToCenteredObject = function (camera, object, offset, orbitControls ) { + // https://wejn.org/2020/12/cracking-the-threejs-object-fitting-nut/ + const boundingBox = new THREE.Box3(); + boundingBox.setFromObject( object ); + + var middle = new THREE.Vector3(); + var size = new THREE.Vector3(); + boundingBox.getSize(size); + + // figure out how to fit the box in the view: + // 1. figure out horizontal FOV (on non-1.0 aspects) + // 2. figure out distance from the object in X and Y planes + // 3. select the max distance (to fit both sides in) + // + // The reason is as follows: + // + // Imagine a bounding box (BB) is centered at (0,0,0). + // Camera has vertical FOV (camera.fov) and horizontal FOV + // (camera.fov scaled by aspect, see fovh below) + // + // Therefore if you want to put the entire object into the field of view, + // you have to compute the distance as: z/2 (half of Z size of the BB + // protruding towards us) plus for both X and Y size of BB you have to + // figure out the distance created by the appropriate FOV. + // + // The FOV is always a triangle: + // + // (size/2) + // +--------+ + // | / + // | / + // | / + // | F° / + // | / + // | / + // | / + // |/ + // + // F° is half of respective FOV, so to compute the distance (the length + // of the straight line) one has to: `size/2 / Math.tan(F)`. + // + // FTR, from https://threejs.org/docs/#api/en/cameras/PerspectiveCamera + // the camera.fov is the vertical FOV. + + const fov = camera.fov * ( Math.PI / 180 ); + const fovh = 2*Math.atan(Math.tan(fov/2) * camera.aspect); + let dx = size.z / 2 + Math.abs( size.x / 2 / Math.tan( fovh / 2 ) ); + let dy = size.z / 2 + Math.abs( size.y / 2 / Math.tan( fov / 2 ) ); + let cameraZ = Math.max(dx, dy); + + // offset the camera, if desired (to avoid filling the whole canvas) + if( offset !== undefined && offset !== 0 ) cameraZ *= offset; + + camera.position.set( 0, 0, cameraZ ); + + // set the far plane of the camera so that it easily encompasses the whole object + const minZ = boundingBox.min.z; + const cameraToFarEdge = ( minZ < 0 ) ? -minZ + cameraZ : cameraZ - minZ; + + camera.far = cameraToFarEdge * 3; + camera.updateProjectionMatrix(); + + if ( orbitControls !== undefined ) { + // set camera to rotate around the center + orbitControls.target = new THREE.Vector3(0, 0, 0); + + // prevent camera from zooming out far enough to create far plane cutoff + orbitControls.maxDistance = cameraToFarEdge * 2; + } + }; + + + function loadAsset(asset) { + + loader.load( './' + asset + '.wrl', + + // onLoad callback + function ( object ) { + vrmlScene = object; + scene.add( object ); + + document.getElementById('overlay').hidden = true; + + // Center + const box = new THREE.Box3().setFromObject( object ); + const center = box.getCenter( new THREE.Vector3() ); + object.translateX( object.position.x - center.x ); + object.translateY( object.position.y - center.y ); + object.translateZ( object.position.z - center.z ); + /* + object.position.x += ( object.position.x - center.x ); + object.position.y += ( object.position.y - center.y ); + object.position.z += ( object.position.z - center.z ); + */ + controls.reset(); + model = object; + fitCameraToCenteredObject(camera, model, 1.1, controls); + //console.log(model) + }, + + /* + // onProgress callback. Useless because it reaches 100% quickly, then hangs + function ( xhr ) { + console.log( (xhr.loaded / xhr.total * 100) + '% loaded' ); + }, + */ + + ); + + } + + function onWindowResize() { + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + + } + + function animate() { + controls.update(); // to support damping + + //console.log(isMouseDown) + if(model && spin){ + model.rotation.y += 0.0015 + } + + renderer.render( scene, camera ); + + stats.update(); + + } + + addEventListener("resize", (event) => { + fitCameraToCenteredObject(camera, model, 1.1, controls); + }); + </script> + </body> +</html> |