-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (118 loc) · 4.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Point Cloud with Orbit Controls</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "./three.module.js"
}
}
</script>
<!-- Your script should be of type module -->
<script type="module">
// import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
// import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import * as THREE from './three.module.js';
import { OrbitControls } from './OrbitControls.js';
// Create the scene
const scene = new THREE.Scene();
// Create the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Add OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Enable damping (inertia)
controls.dampingFactor = 0.25; // Damping factor
controls.screenSpacePanning = false; // Prevent panning in screen space
// Create a geometry to hold the points
const geometry = new THREE.BufferGeometry();
// Create an array of vertices
const vertices = [];
const colors = [];
const numPoints = 1000;
for (let i = 0; i < numPoints; i++) {
const x = (Math.random() - 0.5) * 10;
const y = (Math.random() - 0.5) * 10;
const z = (Math.random() - 0.5) * 10;
vertices.push(x, y, z);
colors.push(Math.random(), Math.random(), Math.random());
}
let pointCloud = null;
function updatePointCloud(vertices, colors)
{
if (pointCloud !== null)
{
scene.remove(pointCloud);
}
// Add the vertices to the geometry
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
// Create a material for the points
const material = new THREE.PointsMaterial({ size: 0.1, vertexColors: true });
// Create the point cloud
pointCloud = new THREE.Points(geometry, material);
// Add the point cloud to the scene
scene.add(pointCloud);
}
updatePointCloud(vertices, colors);
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Update controls
controls.update();
// Render the scene
renderer.render(scene, camera);
}
animate();
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// window.addEventListener("message", (event) => {
// if (event.data.action !== "update-point-cloud") {
// return;
// }
// const {vertices, colors} = event.data;
// updatePointCloud(vertices, colors);
// });
let old_text = null
setInterval(async () => {
const text = await navigator.clipboard.readText().catch(() => null);
if (text == null || text == old_text)
{
return;
}
old_text = text;
const i0 = text.indexOf("=== Display Point Cloud ===")
const i1 = text.indexOf("=== End ===")
if (i0 === -1 || i1 === -1 || i0 >= i1) {
return;
}
const vertices = [];
const colors = [];
for (const line of text.slice(i0, i1).trim().split("\n").slice(1))
{
const [x, y, z, r, g, b] = line.trim().split(" ");
vertices.push(1*x, 1*y, 1*z);
colors.push(r / 255, g / 255, b / 255);
}
updatePointCloud(vertices, colors);
}, 200)
</script>
</body>
</html>