dowerx/szamitogepes-grafika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
BENEDEK László 2024-09-24 20:02:01 +02:00
commit 21b17db295
2 changed files with 563 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
index.html Normal file
View File

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benedek László - IH1RZJ - első beadandó</title>
<script async src="./dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./js-r167/build/three.module.min.js",
"TrackballControls": "./js-r167/examples/jsm/controls/TrackballControls.js"
}
}
</script>
<style>
body,
html canvas {
margin: 0;
border: 0;
padding: 0;
}
canvas {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module">
import * as THREE from "three";
import { TrackballControls } from "TrackballControls";
let fov = 75;
let near = 0.01;
let far = 1000;
let rotateSpeed = 5.0;
let panSpeed = 1.0;
let canvas, renderer, scene, camera, controls;
init();
animate();
function init() {
canvas = document.querySelector("#canvas");
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);
camera.position.z = 15;
controls = new TrackballControls(camera, canvas);
controls.rotateSpeed = rotateSpeed;
controls.panSpeed = panSpeed;
scene.add(new THREE.AxesHelper(5));
loadScene();
window.addEventListener("resize", handleWindowResize, false);
}
function loadScene() {
fetch("scene.json")
.then((response) => response.json())
.catch(reason => console.log(`fetch failed: ${reason}`))
.then((json) => SceneLoader.FromJson(json, scene));
}
function handleWindowResize() {
console.log(`resize: ${window.innerWidth}x${window.innerHeight}`)
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
class SceneLoader {
static FromJson(data, scene, camera) {
let geometryTypes = {
"CircleGeometry": THREE.CircleGeometry,
"PlaneGeometry": THREE.PlaneGeometry,
"BoxGeometry": THREE.BoxGeometry,
"SphereGeometry": THREE.SphereGeometry,
"ConeGeometry": THREE.ConeGeometry,
"CylinderGeometry": THREE.CylinderGeometry,
"TorusGeometry": THREE.TorusGeometry,
};
let materialTypes = {
"MeshBasicMaterial": THREE.MeshBasicMaterial
};
let geometries = {};
let materials = {};
let meshes = {};
for (let [key, value] of Object.entries(data.geometries)) {
geometries[key] = new geometryTypes[value.type](...value.options);
}
for (let [key, value] of Object.entries(data.materials)) {
materials[key] = new materialTypes[value.type](value.options);
}
function createMesh(data) {
let mesh;
if (data.type === "empty") {
mesh = new THREE.Object3D();
} else {
mesh = new THREE.Mesh(geometries[data.geometry], materials[data.material]);
}
mesh.position.set(...data.position);
mesh.rotation.set(...Array.from(data.rotation, x => THREE.MathUtils.degToRad(x)));
mesh.scale.set(...data.scale);
if (data.children) {
for (let [key, value] of Object.entries(data.children)) {
mesh.add(createMesh(value));
}
}
return mesh;
}
for (let [key, value] of Object.entries(data.meshes)) {
scene.add(meshes[key] = createMesh(value));
}
}
};
</script>
</body>
</html>

408
scene.json Normal file
View File

@ -0,0 +1,408 @@
{
"geometries": {
"feet": {
"type": "BoxGeometry",
"options": [
7.25,
3.15,
7.85
]
},
"leg": {
"type": "BoxGeometry",
"options": [
7.25,
8.3,
5.6
]
},
"thigh": {
"type": "CylinderGeometry",
"options": [
3,
3,
7.25
]
},
"hip": {
"type": "BoxGeometry",
"options": [
14.25,
2,
7.85
]
},
"body": {
"type": "CylinderGeometry",
"options": [
8.48528137424,
10.0762716319,
12.3,
4,
1
]
},
"neck": {
"type": "CylinderGeometry",
"options": [
2.4,
2.4,
11.5
]
},
"head_border": {
"type": "TorusGeometry",
"options": [
4,
1
]
},
"head_cap": {
"type": "CircleGeometry",
"options": [
4
]
},
"head": {
"type": "CylinderGeometry",
"options": [
5,
5,
7
]
}
},
"materials": {
"purple": {
"type": "MeshBasicMaterial",
"options": {
"color": "rgb(255, 0, 255)",
"wireframe": true
}
}
},
"meshes": {
"hip": {
"geometry": "hip",
"material": "purple",
"position": [
0,
0,
0
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
1
],
"children": {
"r_thigh": {
"geometry": "thigh",
"material": "purple",
"position": [
-3.57,
-3,
0
],
"rotation": [
0,
0,
90
],
"scale": [
1,
0.9,
1
],
"children": {
"r_leg": {
"geometry": "leg",
"material": "purple",
"position": [
-4.15,
0,
-0.2
],
"rotation": [
0,
0,
-90
],
"scale": [
1,
1,
1
],
"children": {
"r_feet": {
"geometry": "feet",
"material": "purple",
"position": [
0,
-5.75,
1.125
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
1
]
}
}
}
}
},
"l_thigh": {
"geometry": "thigh",
"material": "purple",
"position": [
3.57,
-3,
0
],
"rotation": [
0,
0,
90
],
"scale": [
1,
0.9,
1
],
"children": {
"l_leg": {
"geometry": "leg",
"material": "purple",
"position": [
-4.15,
0,
-0.2
],
"rotation": [
0,
0,
-90
],
"scale": [
1,
1,
1
],
"children": {
"l_feet": {
"geometry": "feet",
"material": "purple",
"position": [
0,
-5.75,
1.125
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
1
]
}
}
}
}
},
"spine": {
"type": "empty",
"position": [
0,
0,
0
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
1
],
"children": {
"neck": {
"geometry": "neck",
"material": "purple",
"position": [
0,
19.05,
0
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
1
],
"children": {
"head": {
"geometry": "head",
"material": "purple",
"position": [
0,
0,
0
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
1
]
},
"chin": {
"geometry": "head_border",
"material": "purple",
"position": [
0,
-3.5,
0
],
"rotation": [
90,
0,
0
],
"scale": [
1,
1,
1
],
"children": {
"head_cap_bottom": {
"geometry": "head_cap",
"material": "purple",
"position": [
0,
0,
1
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
1
]
}
}
},
"scalp": {
"geometry": "head_border",
"material": "purple",
"position": [
0,
3.5,
0
],
"rotation": [
90,
0,
0
],
"scale": [
1,
1,
1
],
"children": {
"head_cap_top": {
"geometry": "head_cap",
"material": "purple",
"position": [
0,
0,
-1
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
1
]
}
}
}
}
},
"body_helper": {
"type": "empty",
"position": [
0,
0,
0
],
"rotation": [
0,
0,
0
],
"scale": [
1,
1,
0.55087719298
],
"children": {
"body": {
"geometry": "body",
"material": "purple",
"position": [
0,
7.15,
0
],
"rotation": [
0,
45,
0
],
"scale": [
1,
1,
1
]
}
}
}
}
}
}
}
}
}