Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>THREE.6DOF - Image Viewer Example</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> | |
| <style> | |
| body { | |
| background: #000; | |
| color: #fff; | |
| padding: 0; | |
| margin: 0; | |
| overflow: hidden; | |
| font-family: georgia; | |
| text-align: center; | |
| } | |
| a { | |
| color: skyblue; | |
| text-decoration: none | |
| } | |
| video { | |
| display: none; | |
| } | |
| #info { | |
| position: absolute; | |
| top: 15px; | |
| width: 100%; | |
| } | |
| #info_wrapper { | |
| background: rgba(0, 0, 0, 0.7); | |
| } | |
| </style> | |
| <!-- Favicon --> | |
| <link rel="apple-touch-icon" sizes="180x180" href="public/images/favicon/apple-touch-icon.png"> | |
| <link rel="icon" type="image/png" sizes="32x32" href="public/images/favicon/favicon-32x32.png"> | |
| <link rel="icon" type="image/png" sizes="16x16" href="public/images/favicon/favicon-16x16.png"> | |
| <link rel="manifest" href="public/site.webmanifest"> | |
| <!-- Libraries --> | |
| <script src="https://unpkg.com/[email protected]/build/three.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script> | |
| <!-- <script src="public/js/WebVR.js"></script> --> | |
| <script src="public/js/GUIHelper.js"></script> | |
| <!-- THREE-6DOF --> | |
| <script src="public/js/three-6dof.min.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| ; | |
| // get data-rgb from parent iframe tag | |
| var rgbBase64Img = window.frameElement?.getAttribute('data-rgb'); | |
| var depthBase64Img = window.frameElement?.getAttribute('data-depth'); | |
| // debug GUI | |
| var gui = new dat.GUI({ closed: true, closeOnTop: true }); | |
| // We will create the viewer once the textures are loaded | |
| var sixDofViewer; | |
| // Keep track of time | |
| var clock = new THREE.Clock(); | |
| let enableAnimation = true; | |
| // Create the scene, renderer and camera | |
| var scene = new THREE.Scene(); | |
| const w = 1024 | |
| const h = 512 | |
| var renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| // renderer.setSize(w, h); //window.innerWidth, window.innerHeight); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| // renderer.vr.enabled = true; | |
| document.body.appendChild(renderer.domElement); | |
| // document.body.appendChild(THREE.WEBVR.createButton(renderer)); | |
| var camera = new THREE.PerspectiveCamera(55, w / h, 0.001, 1000); | |
| var cameraDolly = new THREE.Object3D(); // We use a camera dolly since WebVR/XR will override camera transform | |
| cameraDolly.position.y = -1.7; | |
| cameraDolly.add(camera); | |
| scene.add(cameraDolly); | |
| var loadingManager = new THREE.LoadingManager(); | |
| var textureLoader = new THREE.TextureLoader(loadingManager); | |
| // Load the textures and store them | |
| var colorTexture, depthTexture; | |
| // three.js load texture from base64 | |
| if (rgbBase64Img && depthBase64Img) { | |
| textureLoader.load(rgbBase64Img, texture => { colorTexture = texture }); | |
| textureLoader.load(depthBase64Img, texture => { depthTexture = texture }); | |
| } else { | |
| textureLoader.load('public/images/equirectangular/kandao3.jpg', texture => { colorTexture = texture }); | |
| textureLoader.load('public/images/equirectangular/kandao3_depthmap.jpg', texture => { depthTexture = texture }); | |
| } | |
| // On finish loading create the viewer with the textures | |
| loadingManager.onLoad = () => { | |
| sixDofViewer = new SixDOF.Viewer(colorTexture, depthTexture, | |
| { | |
| 'type': SixDOF.TextureType.SEPERATE, // For seperate depth and texture (for single top bottom use TextureType.TOP_BOTTOM) | |
| 'style': SixDOF.Style.MESH, // Chooses the rendering style (defaults to Style.MESH) | |
| 'density': SixDOF.MeshDensity.EXTRA_HIGH, // Chooses geometry tesselation level | |
| 'displacement': 4.0, // Defaults to 4.0 | |
| 'radius': 6 // Defaults to 6 | |
| }) | |
| scene.add(sixDofViewer); | |
| // Create the debug GUI and add some debug params | |
| var shaderParams = gui.addFolder('Shader'); | |
| shaderParams.add(sixDofViewer, 'displacement', 0, 7).name('Displacement'); | |
| shaderParams.add(sixDofViewer, 'opacity', 0, 1).name('Opacity'); | |
| shaderParams.add(sixDofViewer, 'pointSize', 0, 10).name('Point Size'); | |
| shaderParams.add(camera, 'fov', 1, 100).name('Camera FOV').onChange(val => { | |
| camera.updateProjectionMatrix(); | |
| }); | |
| shaderParams.add(camera.position, 'x', -10, 10).name('Camera X'); | |
| shaderParams.add(camera.position, 'y', -10, 10).name('Camera Y'); | |
| shaderParams.add(camera.position, 'z', -10, 10).name('Camera Z'); | |
| shaderParams.add({ 'debugDepth': false }, 'debugDepth') | |
| .name('Debug Depth') | |
| .onChange(val => { | |
| sixDofViewer.toggleDepthDebug(val); | |
| }); | |
| shaderParams.add({ | |
| 'changeStyle': () => { } | |
| }, 'changeStyle', { | |
| 'Mesh': SixDOF.Style[SixDOF.Style.MESH], | |
| 'Wireframe': SixDOF.Style[SixDOF.Style.WIRE], | |
| 'Pointcloud': SixDOF.Style[SixDOF.Style.POINTS] | |
| }) | |
| .name('Rendering Style') | |
| .onChange(val => { | |
| scene.remove(sixDofViewer); | |
| sixDofViewer = new SixDOF.Viewer(colorTexture, depthTexture, { | |
| 'style': SixDOF.Style[val] | |
| }); | |
| scene.add(sixDofViewer); | |
| }); | |
| shaderParams.open(); | |
| } | |
| const controls = new THREE.OrbitControls(cameraDolly, renderer.domElement); | |
| controls.enableZoom = true | |
| controls.enableDamping = true; | |
| camera.rotation.x = Math.PI / 2; | |
| controls.autoRotate = true; | |
| controls.addEventListener('start', function () { | |
| controls.autoRotate = false; | |
| }); | |
| renderer.setAnimationLoop((time) => { | |
| controls.update(); | |
| renderer.render(scene, camera); | |
| }); | |
| window.addEventListener('resize', ev => { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| </script> | |
| </body> | |
| </html> |