ldm3d

Runtime error

App Files Files Community

ldm3d / static /three6dof.html

jt5d

Duplicate from Intel/ldm3d

4091b31 over 2 years ago

raw

history blame contribute delete

6.87 kB

	<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/three@0.147.0/build/three.min.js"></script>
	<script src="https://unpkg.com/three@0.147.0/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>
	'use strict';
	// 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>