Added three.js

config_webrx.py

@@ -117,9 +117,9 @@ To use a HackRF, compile the HackRF host tools from its "stdout" branch:
 #format_conversion="csdr convert_s16_f | csdr gain_ff 30"
 
 # >> /dev/urandom test signal source
-#samp_rate = 2400000
+samp_rate = 2400000
-#start_rtl_command="cat /dev/urandom | (pv -qL `python -c 'print int({samp_rate} * 2.2)'` 2>&1)".format(rf_gain=rf_gain, center_freq=center_freq, samp_rate=samp_rate)
+start_rtl_command="cat /dev/urandom | (pv -qL `python -c 'print int({samp_rate} * 2.2)'` 2>&1)".format(rf_gain=rf_gain, center_freq=center_freq, samp_rate=samp_rate)
-#format_conversion="csdr convert_u8_f"
+format_conversion="csdr convert_u8_f"
 
 # >> Pre-recorded raw I/Q file as signal source
 # You will have to correctly specify: samp_rate, center_freq, format_conversion in order to correctly play an I/Q file.

htdocs/index.wrx

@@ -35,6 +35,7 @@
 			var waterfall_max_level_default=%[WATERFALL_MAX_LEVEL];
 		</script>
 		<script src="sdr.js"></script>
+		<script src="three.js"></script>
 		<script src="openwebrx.js"></script>
 		<link rel="stylesheet" type="text/css" href="openwebrx.css" />
 		<meta charset="utf-8">
@@ -72,8 +73,8 @@
 			<div id="openwebrx-scale-container">
 				<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
 			</div>
+			<div id="openwebrx-three-container"> </div>
 			<div id="webrx-canvas-container">
-
 				<div id="openwebrx-phantom-canvas"></div>
 				<!-- add canvas here by javascript -->
 			</div>

htdocs/openwebrx.css

@@ -396,6 +396,12 @@ input[type=range]:focus::-ms-fill-upper
 	image-rendering: -webkit-optimize-contrast;
 }
 
+#openwebrx-three-container
+{
+	overflow: scroll;
+	display: none;
+}
+
 #openwebrx-phantom-canvas
 {
 	position: absolute;

htdocs/openwebrx.js

@@ -1085,7 +1085,29 @@ function zoom_calc()
 function resize_waterfall_container(check_init)
 {
 	if(check_init&&!waterfall_setup_done) return;
-	canvas_container.style.height=(window.innerHeight-e("webrx-top-container").clientHeight-e("openwebrx-scale-container").clientHeight).toString()+"px";
+	three_container.style.height=canvas_container.style.height=(window.innerHeight-e("webrx-top-container").clientHeight-e("openwebrx-scale-container").clientHeight).toString()+"px";
+}
+
+function three_start()
+{
+	var scene = new THREE.Scene();
+	var camera = new THREE.PerspectiveCamera( 75, three_container.clientWidth/three_container.clientHeight, 0.1, 1000 );
+	var renderer = new THREE.WebGLRenderer();
+	renderer.setSize( three_container.clientWidth, three_container.clientHeight );
+	three_container.appendChild(renderer.domElement);
+	var geometry = new THREE.BoxGeometry( 1, 1, 1 );
+	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+	var cube = new THREE.Mesh( geometry, material );
+	scene.add( cube );
+	camera.position.z = 5;
+	var render = function () {
+		console.log(render);
+		window.requestAnimationFrame( render );
+		cube.rotation.x += 0.1;
+		cube.rotation.y += 0.1;
+		renderer.render(scene, camera);
+	};
+	render();
 }
 
 
@@ -1706,6 +1728,7 @@ function add_canvas()
 function init_canvas_container()
 {
 	canvas_container=e("webrx-canvas-container");
+	three_container=e("openwebrx-three-container");
 	canvas_container.addEventListener("mouseout",canvas_container_mouseout, false);
 	//window.addEventListener("mouseout",window_mouseout,false);
 	//document.body.addEventListener("mouseup",body_mouseup,false);
@@ -1897,6 +1920,7 @@ function openwebrx_resize()
 	resize_canvases();
 	resize_waterfall_container(true);
 	resize_scale();
+	resize_three();
 	check_top_bar_congestion();
 }