You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
246 lines
9.5 KiB
246 lines
9.5 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="cache-control" |
|
content="max-age=0" /> |
|
<meta http-equiv="cache-control" |
|
content="no-store" /> |
|
<meta http-equiv="expires" |
|
content="-1" /> |
|
<meta http-equiv="expires" |
|
content="Tue, 01 Jan 1980 1:00:00 GMT" /> |
|
<meta http-equiv="pragma" |
|
content="no-cache" /> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
<!--meta http-equiv="refresh" content="300" />--> <!--Refresh each 5s--> |
|
<meta charset="utf-8" /> |
|
|
|
<style> |
|
body { |
|
margin: 0; |
|
overflow: hidden; |
|
} |
|
</style> |
|
|
|
<script src="three.min.js"></script> |
|
<script src="PCDLoader.js"></script> |
|
<script src="TrackballControls.js"></script> |
|
<script src="OrbitControls.js"></script> |
|
<script src="jquery_3_2_1.min.js"></script> |
|
|
|
<script> |
|
window.onerror = function (message, url, linenumber) { |
|
|
|
console.log('JavaScript error: ' + message + ' on line ' + linenumber + ' for ' + url); |
|
|
|
if (url.search("three.min.js") >= 1) { |
|
loadScript("three.min.js", function () { |
|
}); |
|
} |
|
else if (url.search("PCDLoader.js") >= 1) { |
|
loadScript("PCDLoader.js", function () { |
|
}); |
|
} |
|
else if (url.search("TrackballControls.js") >= 1) { |
|
loadScript("TrackballControls.js", function () { |
|
}); |
|
} |
|
else if (url.search("OrbitControls.js") >= 1) { |
|
loadScript("OrbitControls.js", function () { |
|
}); |
|
} |
|
else if (url.search("jquery_3_2_1.min.js") >= 1) { |
|
loadScript("jquery_3_2_1.min.js", function () { |
|
}); |
|
} |
|
else { |
|
//location.reload(); |
|
var replaceUrl = 'http://' + window.location.hostname + ':' + GetUrlPort() + '/Aida/pcl/pcl.html'; |
|
//alert(replaceUrl); |
|
window.location.replace(replaceUrl); |
|
} |
|
} |
|
function GetUrlPort() { |
|
var url_href = window.location.href; |
|
var arr_url = url_href.split(":")[2].split("/")[0]; |
|
|
|
return arr_url; |
|
} |
|
if (window.history.replaceState) { |
|
window.history.replaceState(null, null, window.location.href); |
|
} |
|
</script> |
|
|
|
|
|
</head> |
|
<body> |
|
<script> |
|
var g_pcd_load = null; |
|
|
|
var g_h = -1; |
|
var g_m = -1; |
|
var g_s = -1; |
|
var g_ms = -1; |
|
|
|
// Create a scene |
|
var scene = new THREE.Scene(); |
|
|
|
// Create a camera |
|
var camera = new THREE.PerspectiveCamera(125, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
camera.position.set(0, 40, -80); |
|
|
|
camera.lookAt(new THREE.Vector3(0, 0, 0)); |
|
camera.up.set(-1, 0, 0); |
|
|
|
// Create a renderer |
|
var renderer = new THREE.WebGLRenderer(); |
|
renderer.setPixelRatio(window.devicePixelRatio); |
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
document.body.appendChild(renderer.domElement); |
|
|
|
// Create a PCDLoader |
|
var loader = new THREE.PCDLoader(); |
|
|
|
// Load PCD data from URL |
|
var pointcloud = null; |
|
var pointcloudOffset = new THREE.Vector3(0, 0, -200); //新增偏移量變數 |
|
|
|
|
|
var check_if_PCD_running = 0; |
|
function run_PCD() { |
|
clearInterval(g_pcd_load); |
|
// Load PCD initially and schedule periodic updates |
|
g_pcd_load = setInterval(loadPCD, 2000); |
|
} |
|
|
|
function loadPCD() { |
|
if (check_if_PCD_running == 0) { |
|
check_if_PCD_running = 1; |
|
|
|
var NowDate = new Date(); |
|
var h = NowDate.getHours(); |
|
var m = NowDate.getMinutes(); |
|
var s = NowDate.getSeconds(); |
|
var ms = NowDate.getMilliseconds(); |
|
|
|
if (g_h == -1 || g_m == -1 || g_s == -1 || g_ms == -1) { |
|
g_h = h; |
|
g_m = m; |
|
g_s = s; |
|
g_ms = ms; |
|
} |
|
|
|
$.ajax({ |
|
url: "/gettof3dpcd?" + 'pcl_' + h + '_' + m + '_' + s + '_' + ms, |
|
type: "GET", |
|
async: true, |
|
beforeSend: function (xmlHttp) { |
|
xmlHttp.setRequestHeader("If-Modified-Since", "0"); |
|
xmlHttp.setRequestHeader("Cache-Control", "no-cache"); |
|
//xmlHttp.setRequestHeader("Authorization", "Basic " + btoa("username:password")); |
|
}, |
|
success: function (retdata) { |
|
if (retdata.startsWith("File")) { // 判斷是否為文字說明 |
|
console.warn(retdata); |
|
} else { |
|
//var jsonbuf = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); |
|
var text = retdata; |
|
var encoder = new TextEncoder(); |
|
var data = encoder.encode(text); |
|
var newPointCloud = loader.parse(data.buffer, ''); |
|
|
|
if (pointcloud !== null) { |
|
scene.remove(pointcloud); |
|
} |
|
// Set point color to red |
|
newPointCloud.material.color.set(0xf0f8ff); |
|
pointcloud = newPointCloud; |
|
pointcloud.position.copy(pointcloudOffset); //將點雲偏移 |
|
scene.add(pointcloud); |
|
|
|
|
|
// Create an AxesHelper |
|
var axesHelper = new THREE.AxesHelper(100); |
|
axesHelper.position.set(0, 0, 0); |
|
scene.add(axesHelper); |
|
|
|
render(); |
|
} |
|
check_if_PCD_running = 0; |
|
}, |
|
error: function (retdata) { |
|
console.warn(retdata); |
|
check_if_PCD_running = 0; |
|
} |
|
}); |
|
} |
|
} |
|
|
|
function loadScript(url, callback) { |
|
var script = document.createElement("Script"); |
|
script.type = "text/javascript"; |
|
|
|
//IE 验证脚本是否下载完成 |
|
if (script.readyState) { |
|
script.onreadystatechange = function () { |
|
//readyState属性有5种取值 |
|
//uninitialized：初始状态 |
|
//loading：开始下载 |
|
//interactive：数据完成下载但尚不可用 |
|
//complete：数据已经准备就绪 |
|
//实际使用时，readyState的值并不像我们预想的那样有规律，实践发现使用readyState |
|
//最靠谱的方式是同时检查以下2个状态，只要其中1个触发，就认为脚本下载完成。 |
|
if (script.readyState == "loaded" || script.readyState == "complete") { |
|
//移除事件处理器，确保事件不会处理2次 |
|
script.onreadystatechange = null; |
|
callback(); |
|
} |
|
}; |
|
} |
|
|
|
//其他浏览器 |
|
else { |
|
script.onload = function () { |
|
callback(); |
|
}; |
|
} |
|
|
|
script.src = url; |
|
//把新建的<Script>添加到<head>里比添加到<body>里更保险。 |
|
document.getElementsByTagName("head")[0].appendChild(script); |
|
} |
|
|
|
// Create a TrackballControls |
|
var controls = new THREE.TrackballControls(camera, renderer.domElement); |
|
// Create an OrbitControls |
|
var controls = new THREE.OrbitControls(camera, renderer.domElement); |
|
controls.target.set(0, 0, 0); // 設定旋轉軸心為原點 |
|
|
|
controls.enableDamping = true; |
|
controls.screenSpacePanning = true; |
|
controls.dampingFactor = 0.1; |
|
controls.enableZoom = true; |
|
controls.minDistance = 0; |
|
controls.maxDistance = 1000; |
|
|
|
// Render the scene |
|
function render() { |
|
requestAnimationFrame(render); |
|
controls.update(); |
|
renderer.render(scene, camera); |
|
} |
|
|
|
render(); |
|
|
|
// Resize the renderer on window resize |
|
window.addEventListener("resize", function () { |
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
camera.updateProjectionMatrix(); |
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
}); |
|
|
|
run_PCD(); |
|
</script> |
|
</body> |
|
</html>
|
|
|