devilfish-dbms
Version:
a database that based on key-value map and is successful in deal with saved in disk and high-performance in select that act as a memory-based database
102 lines (92 loc) • 3.68 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Devilfish DBMS Visualization</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
<script>
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 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.target.set(0, 0, 0); // 让摄像机始终围绕球心旋转
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.8;
// 环境光
const light = new THREE.AmbientLight(0xffffff, 1);
scene.add(light);
// 球体辅助线
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(1, 64, 64),
new THREE.MeshBasicMaterial({ color: 0x8888ff, wireframe: true, opacity: 0.1, transparent: true })
);
scene.add(sphere);
// 加载点数据
fetch('points.json')
.then(response => response.json())
.then(points => {
// 计算最大模长
let maxR = 0;
points.forEach(point => {
const r = Math.sqrt(point.x * point.x + point.y * point.y);
if (r > maxR) maxR = r;
});
// 设定球半径，适当放大一点
const sphereRadius = Math.max(1, Math.sqrt(maxR)) * 1.1;
// 球体辅助线
const sphere = new THREE.Mesh(
new THREE.SphereGeometry(sphereRadius, 64, 64),
new THREE.MeshBasicMaterial({ color: 0x8888ff, wireframe: true, opacity: 0.1, transparent: true })
);
scene.add(sphere);
// 点投影
const geometry = new THREE.BufferGeometry();
const positions = [];
points.forEach(point => {
const { X, Y, Z } = stereographicProjection(point.x, point.y);
// 放大到球面
positions.push(X * sphereRadius, Y * sphereRadius, Z * sphereRadius);
});
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
const material = new THREE.PointsMaterial({ color: 0xff0000, size: 0.2 });
const pointsObject = new THREE.Points(geometry, material);
scene.add(pointsObject);
// 相机放在球外
camera.position.set(0, 0, sphereRadius * 3);
camera.lookAt(0, 0, 0);
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
})
.catch(error => console.error('Error loading points:', error)); // 立体投影函数
function stereographicProjection(x, y) {
const r2 = x * x + y * y;
const denom = 1 + r2;
return {
X: (2 * x) / denom,
Y: (2 * y) / denom,
Z: (r2 - 1) / denom
};
}
</script>
</body>
</html>