-
Notifications
You must be signed in to change notification settings - Fork 1
/
visualise.html
65 lines (55 loc) · 2.2 KB
/
visualise.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
<!DOCTYPE html>
<html>
<head>
<title>3D Cube with Scatter Plot</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://unpkg.com/[email protected]/examples/jsm/"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(32, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // Optional, but this gives a smoother control feeling
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.1;
const cubeSize = 1; // Dimension of the cube (2 units wide)
const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
const pointsMaterial = new THREE.PointsMaterial({
color: 0xff0000,
size: 0.05,
sizeAttenuation: true
});
const pointsGeometry = new THREE.BufferGeometry();
const positions = [];
for (let i = 0; i < 100; i++) { // 100 random points
positions.push((Math.random() * cubeSize) - cubeSize / 2); // x-coordinate
positions.push((Math.random() * cubeSize) - cubeSize / 2); // y-coordinate
positions.push((Math.random() * cubeSize) - cubeSize / 2); // z-coordinate
}
pointsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
const points = new THREE.Points(pointsGeometry, pointsMaterial);
cube.add(points);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.001;
cube.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
window.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
</script>
</body>
</html>