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.
80 lines
2.5 KiB
80 lines
2.5 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>PCD Loader</title> |
|
<script src="https://cdn.jsdelivr.net/npm/three@0.125.0/build/three.min.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/three@0.125.0/examples/js/loaders/PCDLoader.js"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/three@0.125.0/examples/js/controls/TrackballControls.js"></script> |
|
<style> |
|
body { |
|
margin: 0; |
|
overflow: hidden; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<script> |
|
// Create a scene |
|
var scene = new THREE.Scene(); |
|
|
|
// Create a camera |
|
var camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
camera.position.z = 450; |
|
|
|
// 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 |
|
|
|
const url = "http://192.168.50.200:8592/gettof3dpcdb"; |
|
const xhr = new XMLHttpRequest(); |
|
xhr.open("GET", url); |
|
xhr.responseType = "text"; |
|
xhr.onload = function () { |
|
if (xhr.status === 200) { |
|
const text = xhr.responseText; |
|
console.log(text); |
|
const pointcloud = loader.parse(text); |
|
const encoder = new TextEncoder(); |
|
const data = encoder.encode(text); |
|
const pointcloud = loader.parse(data.buffer, ''); |
|
scene.add(pointcloud); |
|
render(); |
|
} else { |
|
console.log("Failed to load PCD data (" + xhr.status + ")"); |
|
} |
|
}; |
|
xhr.send(); |
|
|
|
// Create a TrackballControls |
|
var controls = new THREE.TrackballControls(camera, renderer.domElement); |
|
|
|
// Render the scene |
|
var render = function () { |
|
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); |
|
|
|
window.addEventListener('touchmove', function(e) { |
|
e.preventDefault(); |
|
}, { passive: true }); |
|
|
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
|
|