init
This commit is contained in:
commit
21b17db295
155
index.html
Normal file
155
index.html
Normal 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
408
scene.json
Normal 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
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user