Skip to content

Commit

Permalink
super viewer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lampese
Lampese committed Jul 28, 2023
1 parent 9277156 commit b0b1a45
Show file tree
Hide file tree
Showing 4 changed files with 186 additions and 153 deletions.
20 changes: 3 additions & 17 deletions src/hyper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,19 @@ class VectorN {
return this.values.length;
}

map(fn: (n: number, i?: number) => number) {
map(fn: (n: number, i?: number) => number): VectorN {
return new VectorN(...this.values.map(fn));
}

add(vector: VectorN): VectorN {
return this.map((value, index) => value + vector.values[index]);
}

magnitude() {
magnitude(): number {
return Math.sqrt(this.values.reduce((sum, v) => (sum += v * v), 0));
}

asVector3() {
asVector3(): Vec3 {
return new Vec3(this.values[0], this.values[1], this.values[2]);
}
}
Expand All @@ -45,18 +45,4 @@ function symmetry(rank: number, space: GeneralSpace): GeneralSpace {
}
}

function test_ball(radius: number) {
const result = [];
for (let x = 0; x <= radius; ++x) {
for (let y = 0; y <= radius; ++y) {
for (let z = 0; z <= radius; ++z) {
if (x * x + y * y + z * z <= radius * radius) {
result.push(new VectorN(x, y, z));
}
}
}
}
return symmetry(3, result).map((p) => p.asVector3);
}

export { VectorN, symmetry };
2 changes: 1 addition & 1 deletion src/ifs.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Vec3, Space, vec3 } from './vector.js';
import { Space, vec3 } from './vector.js';

class IFS {
fractal: number[][] = [];
Expand Down
262 changes: 174 additions & 88 deletions webviewer/public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,157 @@
<html>
<head>
<meta charset="utf-8" />
<title>VoxelGeometry Viewer</title>
<style>
body {
margin: 0;
}
</style>
</head>

<body>
<script
async
src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">

<head>
<meta charset="utf-8" />
<title>VoxelGeometry Viewer</title>
<style>
body {
margin: 0;
}

#status-indicator {
position: absolute;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
background-color: green;
}

#input-box {
position: fixed;
bottom: 10px;
right: 10px;
width: 300px;
padding: 5px;
}

#submit-button {
position: fixed;
bottom: 10px;
right: 320px;
}

#message-history {
position: fixed;
bottom: 50px;
right: 10px;
overflow-y: scroll;
height: 200px;
width: 200px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>

<body>
<input type="range" id="size-slider" min="0.1" max="2" step="0.1" value="1"
style="position: fixed; top: 10px; right: 10px" />
<div id="status-indicator"></div>
<input type="text" id="input-box" placeholder="输入信息" />
<button id="submit-button" onclick="sendMessage()">发送</button>
<div id="message-history"></div>
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "/node_modules/three/build/three.module.js",
"three/addons/": "/node_modules/three/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const createScene = () => {
let scene = new THREE.Scene();
scene.background = new THREE.Color(0xbfd1e5);
return scene;
};

let scene = createScene();
const geometry = new THREE.BoxGeometry(1, 1, 1);

const createCamera = () => {
return new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
};

const camera = createCamera();

const createRenderer = () => {
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
return renderer;
};

const renderer = createRenderer();

const createMaterial = () => {
const texture = new THREE.TextureLoader().load('./texture.png');
const material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
});
material.transparent = true;
texture.magFilter = THREE.NearestFilter;
return material;
};

const material = createMaterial();
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const createBlock = (x, y, z) => {
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
};
const inputBox = document.getElementById('input-box');
const messageHistory = document.getElementById('message-history');

const clear = () => {
scene = createScene();
inputBox.addEventListener('keyup', function (event) {
if (event.key === 'Enter') {
sendMessage();
}
});

const createScene = () => {
let scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
return scene;
};

let scene = createScene();
const geometry = new THREE.BoxGeometry(1, 1, 1);

const createCamera = () => {
return new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
};

let camera = createCamera();

const createRenderer = () => {
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
return renderer;
};

let renderer = createRenderer();

const createMaterial = () => {
const texture = new THREE.TextureLoader().load('./texture.png');
const material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
});
material.transparent = true;
texture.magFilter = THREE.NearestFilter;
return material;
};

let material = createMaterial();

const createBlock = (x, y, z) => {
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
console.log(size)
cube.scale.set(size, size, size)
};

const clear = () => {
scene = createScene();
};

camera.position.z = 5;

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(1, 1, 1);
controls.update();

(function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
})();

let ws;

const connectWebSocket = () => {
ws = new WebSocket('ws://127.0.0.1:2333');

ws.onopen = function () {
document.getElementById('status-indicator').style.backgroundColor = 'green';
};

camera.position.z = 5;

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(1, 1, 1);
controls.update();

(function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
})();

const ws = new WebSocket('ws://127.0.0.1:2333');

ws.onmessage = function (msg) {
const op = JSON.parse(msg.data);
if (op['op'] == 'clear') {
Expand All @@ -105,6 +162,35 @@
}
}
};
</script>
</body>
</html>

ws.onclose = function () {
document.getElementById('status-indicator').style.backgroundColor = 'red';
setTimeout(connectWebSocket, 2000);
};
};

const sendMessage = () => {
const message = inputBox.value;
ws.send(message);
inputBox.value = '';
messageHistory.innerHTML += `<p>${message}</p>`;
messageHistory.scrollTop = messageHistory.scrollHeight;
};

let size = 1;
const sizeSlider = document.getElementById('size-slider');
sizeSlider.addEventListener('input', function () {
const newSize = parseFloat(sizeSlider.value);
size = newSize;
scene.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.scale.set(newSize, newSize, newSize);
}
});
});

connectWebSocket();
</script>
</body>

</html>
Loading

0 comments on commit b0b1a45

Please sign in to comment.