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

Compare commits

base: dowerx:bullshit
Branches Tags
dowerx:master
dowerx:bullshit
..
compare: dowerx:master
Branches Tags
dowerx:master
dowerx:bullshit

5 Commits
bullshit ... master

Author SHA1 Message Date
BENEDEK László
4d5ef5fa63 textures, animations 2024-11-14 16:28:13 +01:00
BENEDEK László
010cf6534b blender 2024-11-14 15:17:00 +01:00
BENEDEK László
14a988baa5 minor fixes 2024-10-08 23:46:59 +02:00
BENEDEK László
d90c41565e batlight 2024-10-08 15:56:06 +02:00
BENEDEK László
fdf2adf3c9 lights, shadows 2024-10-08 15:24:48 +02:00
7 changed files with 4542 additions and 586 deletions
Show Stats Expand all files Collapse all files

BIN
BenedekLaszlo_IH1RZJ.blend Normal file
View File

Binary file not shown.

151
BenedekLaszlo_IH1RZJ.html
View File

@ -4,13 +4,14 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benedek László - IH1RZJ - első beadandó: Lego Batman</title>
<title>Benedek László - IH1RZJ - masodik beadandó: Lego Batman</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"
"TrackballControls": "./js-r167/examples/jsm/controls/TrackballControls.js",
"OBJLoader": "./js-r167/examples/jsm/loaders/OBJLoader.js"
}
}
</script>
@ -35,11 +36,16 @@
<script type="module">
import * as THREE from "three";
import { TrackballControls } from "TrackballControls";
import { OBJLoader } from "OBJLoader";
class SceneLoader {
static FromJson(data) {
let _scene = new THREE.Scene();
let geometries = {};
let materials = {};
let objects = {};
const geometryTypes = {
"CircleGeometry": THREE.CircleGeometry,
"PlaneGeometry": THREE.PlaneGeometry,
@ -51,54 +57,109 @@
};
const materialTypes = {
"MeshBasicMaterial": THREE.MeshBasicMaterial
"MeshBasicMaterial": THREE.MeshBasicMaterial,
"MeshLambertMaterial": THREE.MeshLambertMaterial,
"MeshPhongMaterial": THREE.MeshPhongMaterial,
"MeshStandardMaterial": THREE.MeshStandardMaterial
};
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);
if (value.texture) {
materials[key].map = new THREE.TextureLoader().load(value.texture.path);
if (value.texture.repeat == true) {
materials[key].map.wrapS = THREE.RepeatWrapping;
materials[key].map.wrapT = THREE.RepeatWrapping;
}
}
}
function createMesh(data) {
let mesh;
function createObject(data, name) {
const objectConstructors = {
"empty": data => new THREE.Object3D(),
"OBJ": data => {
let empty = new THREE.Object3D();
let loader = new OBJLoader();
loader.load(
data.url,
result => {
result.traverse(element => {
if (element instanceof THREE.Mesh) {
element.material = materials[data.material];
if (data.castShadow) element.castShadow = data.castShadow;
if (data.receiveShadow) element.receiveShadow = data.receiveShadow;
empty.add(element);
}
})
});
return empty;
},
"Mesh": data => new THREE.Mesh(geometries[data.geometry], materials[data.material]),
"LineSegments": data => new THREE.LineSegments(geometries[data.geometry], materials[data.material]),
"AmbientLight": data => new THREE.AmbientLight(data.color ? data.color : 0xffffff, data.intensity ? data.intensity : 1),
"PointLight": data => {
let object = new THREE.PointLight(data.color ? data.color : 0xffffff, data.intensity ? data.intensity : 1);
object.distance = data.distance ? data.distance : 100;
return object;
},
"SpotLight": data => {
let object = new THREE.SpotLight(data.color ? data.color : 0xffffff, data.intensity ? data.intensity : 1);
object.angle = THREE.MathUtils.degToRad(data.angle ? data.angle : 45);
if (data.position) object.position.set(...data.position);
object.target = objects[data.target];
object.distance = data.distance ? data.distance : 100;
return object;
},
"DirectionalLight": data => {
let object = new THREE.DirectionalLight(data.color ? data.color : 0xffffff, data.intensity ? data.intensity : 1);
if (data.position) object.position.set(...data.position);
object.target = objects[data.target];
object.distance = data.distance ? data.distance : 100;
object.shadow.camera.left = -50;
object.shadow.camera.right = 50;
object.shadow.camera.bottom = -50;
object.shadow.camera.top = 50;
return object;
},
"HemisphereLight": data => new THREE.HemisphereLight(data.color ? data.color : 0xffffff, data.groundColor ? data.groundColor : 0x00ff00, data.intensity ? data.intensity : 1),
"PointLightHelper": data => new THREE.PointLightHelper(objects[data.target], data.sphereSize ? data.sphereSize : 5),
"SpotLightHelper": data => new THREE.SpotLightHelper(objects[data.target]),
"DirectionalLightHelper": data => new THREE.DirectionalLightHelper(objects[data.target], data.planeSize ? data.planeSize : 10),
"HemisphereLightHelper": data => new THREE.HemisphereLightHelper(objects[data.target], data.sphereSize ? data.sphereSize : 5),
"AxesHelper": data => new THREE.AxesHelper(data.helperSize ? data.helperSize : 10),
"ArrowHelper": data => new THREE.ArrowHelper(...(data.direction ? data.direction : [1, 0, 0]), ...(data.origin ? data.origin : [0, 0, 0]), data.length ? data.length : 10, data.color ? data.color : 0xff00ff),
"ShadowCameraHelper": data => new THREE.CameraHelper(objects[data.target].shadow.camera),
};
// create object
let type = data.type ? data.type : "Mesh";
let object = (objects[name] = objectConstructors[type](data));
switch (type) {
case "empty":
mesh = new THREE.Object3D();
break;
case "Mesh":
mesh = new THREE.Mesh(geometries[data.geometry], materials[data.material]);
break;
case "LineSegments":
mesh = new THREE.LineSegments(geometries[data.geometry], materials[data.material]);
break;
default:
throw "unknown mesh type";
}
if (data.position) mesh.position.set(...data.position);
if (data.rotation) mesh.rotation.set(...Array.from(data.rotation, x => THREE.MathUtils.degToRad(x)));
if (data.scale) mesh.scale.set(...data.scale);
if (data.position) object.position.set(...data.position);
if (data.rotation) object.rotation.set(...Array.from(data.rotation, x => THREE.MathUtils.degToRad(x)));
if (data.scale) object.scale.set(...data.scale);
if (data.castShadow) object.castShadow = data.castShadow;
if (data.receiveShadow) object.receiveShadow = data.receiveShadow;
if (data.animation) object.animation = data.animation;
// add children to parent
if (data.children) {
for (let [key, value] of Object.entries(data.children)) {
mesh.add(createMesh(value));
object.add(createObject(value, key));
}
}
return mesh;
return object;
}
for (let [key, value] of Object.entries(data.meshes)) {
_scene.add(meshes[key] = createMesh(value));
for (let [key, value] of Object.entries(data.objects)) {
_scene.add(createObject(value, key));
}
return _scene;
@ -106,20 +167,23 @@
};
const fov = 75;
const near = 0.01;
const far = 1000;
const near = 0.1;
const far = 10000;
const rotateSpeed = 5.0;
const panSpeed = 1.0;
let canvas, renderer, scene, camera, controls;
const loop = true;
init().then(animate());
let canvas, renderer, scene, camera, controls, clock;
init().then(loop && animate());
async function init() {
canvas = document.querySelector("#canvas");
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, alpha: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xadadad);
renderer.setClearColor("black");
camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);
camera.position.set(0, 10, 50);
@ -128,12 +192,16 @@
controls.rotateSpeed = rotateSpeed;
controls.panSpeed = panSpeed;
clock = new THREE.Clock();
scene = await fetch("scene.json")
.then((response) => response.json())
.catch(reason => console.log(`fetch failed: ${reason}`))
.then((json) => SceneLoader.FromJson(json));
window.addEventListener("resize", handleWindowResize, false);
render();
}
function handleWindowResize() {
@ -149,6 +217,19 @@
function animate() {
requestAnimationFrame(animate);
controls.update();
let delta = clock.getDelta();
let time = clock.getElapsedTime();
scene.traverse((element)=>{
if (element.animation) {
(() => {
eval(element.animation);
})
.call({ element: element, delta: delta, time: time });
}
})
render();
}

57
BenedekLaszlo_IH1RZJ.txt Normal file
View File

@ -0,0 +1,57 @@
# Blender modellezési lépések
1. Default Cube kitörlése
2. Referenciaképek importálása
3. Láb modellje
- új cube mesh
- referenciához igazítom (move, scale)
- loopcut, extrude -> láb fuggőleges része
- új cylinder mesh -> láb teteje
- cylinder aljának törlése
- cylinder és a láb többi részének összekötése új face-ek létrehozásával
- origin áthelyezése
- modell duplikálása és tükrözése -> másik láb
4. Test modellje
- új cube mesh, de csak a test egyik oldalához
- referenciához igazítás
- mirror modifier
- felső lap scale
- élek lekerekítése
5. Kar modellje
- új uv sphere mesh
- aljának törlése
- alsó körív extrude, könyöknél újabb extrude és forgatás
- könyöknél lekerekítés
- henger végének lezárása új face-el
- duplikálás és tükrözés
6. Kéz modellje
- új cylinder mesh
- scale, rotate, move
- új cylinder a maroknak
- inset
- duplikálás és tükrözés
7. Fej modellje
- új cylinder mesh
- extrude és scale a referencia követésével
- lekerekítés
8. Sisak modellje
- új sphere mesh
- félbevágom és tükrözöm modifierrel
- scale
- proportional editing referencia alapján
- extrude az orrnál
- knife tool -> szem kivágása
- szem inset és extrude
- száj kivágása knide toollal
- subdivision surface
9. Köpeny modellje
- új plain mesh
- knife tool -> referencia körbevágása
- remesh, solidify, subdivision modifier
- pinning vertex group a nyak körül
- collision a testre
- cloth simulation
10. Fények hozzáadása
11. Materialok beállítása
12. Kamera beállítása
13. Póz beállítása

3801
batman.obj Normal file
View File

File diff suppressed because it is too large Load Diff

497
scene.json
View File

@ -1,5 +1,12 @@
{
"geometries": {
"ground": {
"type": "PlaneGeometry",
"options": [
200,
200
]
},
"feet": {
"type": "BoxGeometry",
"options": [
@ -97,46 +104,89 @@
}
},
"materials": {
"purple_frame": {
"type": "MeshBasicMaterial",
"options": {
"color": "rgb(255, 0, 255)",
"wireframe": true
}
},
"black": {
"type": "MeshBasicMaterial",
"type": "MeshStandardMaterial",
"options": {
"color": "rgb(0, 0, 0)",
"wireframe": false
"roughness": 0.1
}
},
"white_frame": {
"type": "MeshBasicMaterial",
"yellow": {
"type": "MeshStandardMaterial",
"options": {
"color": "rgb(255, 255, 255)",
"wireframe": true
"color": "rgb(253, 255, 0)",
"roughness": 0.1,
"metalness": 1
}
},
"blue": {
"type": "MeshStandardMaterial",
"options": {
"color": "rgb(80, 92, 124)",
"roughness": 0.1
}
},
"dark_blue": {
"type": "MeshStandardMaterial",
"options": {
"color": "rgb(40, 46, 60)",
"roughness": 0.1
}
},
"skin": {
"type": "MeshBasicMaterial",
"type": "MeshStandardMaterial",
"options": {
"color": "rgb(246, 215, 179)",
"wireframe": false
"roughness": 0.6
}
},
"ground": {
"type": "MeshStandardMaterial",
"options": {
"color": "rgb(94, 85, 56)",
"roughness": 0.8
},
"texture": {
"path": "textures/mud.jpg",
"repeat": true
}
},
"moon": {
"type": "MeshBasicMaterial",
"options": { },
"texture": {
"path": "textures/moon.jpg"
}
}
},
"meshes": {
"objects": {
"batman_logo": {
"type": "OBJ",
"url": "batman.obj",
"material": "yellow",
"position": [
0,
50,
50
],
"scale": [
10,
10,
10
],
"castShadow": true,
"animation": "element.rotation.y += delta"
},
"batman": {
"children": {
"hip": {
"castShadow": true,
"geometry": "hip",
"material": "black",
"children": {
"hip_wireframe": {
"type": "LineSegments",
"geometry": "hip",
"material": "white_frame"
},
"r_thigh": {
"animation": "element.rotation.x = Math.sin(time*10)",
"castShadow": true,
"geometry": "thigh",
"material": "black",
"position": [
@ -155,12 +205,8 @@
1
],
"children": {
"r_thigh_wireframe": {
"type": "LineSegments",
"geometry": "thigh",
"material": "white_frame"
},
"r_leg": {
"castShadow": true,
"geometry": "leg",
"material": "black",
"position": [
@ -174,37 +220,23 @@
-90
],
"children": {
"r_leg_wireframe": {
"type": "LineSegments",
"geometry": "leg",
"material": "white_frame"
},
"r_feet": {
"castShadow": true,
"geometry": "feet",
"material": "black",
"position": [
0,
-5.75,
1.125
],
"scale": [
1.00001,
1,
1
],
"children": {
"r_feet_wireframe": {
"type": "LineSegments",
"geometry": "feet",
"material": "white_frame"
}
}
]
}
}
}
}
},
"l_thigh": {
"animation": "element.rotation.x = -Math.sin(time*10)",
"castShadow": true,
"geometry": "thigh",
"material": "black",
"position": [
@ -223,12 +255,8 @@
1
],
"children": {
"l_thigh_wireframe": {
"type": "LineSegments",
"geometry": "thigh",
"material": "white_frame"
},
"l_leg": {
"castShadow": true,
"geometry": "leg",
"material": "black",
"position": [
@ -242,31 +270,15 @@
-90
],
"children": {
"l_leg_wireframe": {
"type": "LineSegments",
"geometry": "leg",
"material": "white_frame"
},
"l_feet": {
"castShadow": true,
"geometry": "feet",
"material": "black",
"position": [
0,
-5.75,
1.125
],
"scale": [
1.00001,
1,
1
],
"children": {
"l_feet_wireframe": {
"type": "LineSegments",
"geometry": "feet",
"material": "white_frame"
}
}
]
}
}
}
@ -276,6 +288,8 @@
"type": "empty",
"children": {
"r_shoulder": {
"animation": "element.rotation.x = -Math.sin(time*10)",
"castShadow": true,
"geometry": "arm_joint",
"material": "black",
"position": [
@ -289,12 +303,8 @@
-20
],
"children": {
"r_shoulder_wireframe": {
"type": "LineSegments",
"geometry": "arm_joint",
"material": "white_frame"
},
"r_upper_arm": {
"castShadow": true,
"geometry": "arm",
"material": "black",
"position": [
@ -302,18 +312,9 @@
-2.75,
0
],
"scale": [
1.00001,
1,
1
],
"children": {
"r_upper_arm_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
},
"r_elbow": {
"castShadow": true,
"geometry": "arm_joint",
"material": "black",
"position": [
@ -327,12 +328,8 @@
0
],
"children": {
"r_elbow_wireframe": {
"type": "LineSegments",
"geometry": "arm_joint",
"material": "white_frame"
},
"r_lower_arm": {
"castShadow": true,
"geometry": "arm",
"material": "black",
"position": [
@ -340,17 +337,7 @@
-2.75,
0
],
"scale": [
1.00001,
1,
1
],
"children": {
"r_lower_arm_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
},
"r_wrist_helper": {
"type": "empty",
"position": [
@ -358,13 +345,9 @@
-3,
0
],
"scale": [
1.00001,
1,
1
],
"children": {
"r_hand": {
"castShadow": true,
"geometry": "hand",
"material": "black",
"position": [
@ -381,35 +364,17 @@
1,
1,
9
],
"children": {
"r_hand_wireframe": {
"type": "LineSegments",
"geometry": "hand",
"material": "white_frame"
}
}
]
},
"r_wrist": {
"castShadow": true,
"geometry": "arm",
"material": "black",
"position": [
0.00001,
0,
0
],
"scale": [
0.5,
0.25,
0.5
],
"children": {
"r_wrist_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
}
}
]
}
}
}
@ -422,6 +387,8 @@
}
},
"l_shoulder": {
"animation": "element.rotation.x = Math.sin(time*10)",
"castShadow": true,
"geometry": "arm_joint",
"material": "black",
"position": [
@ -435,12 +402,8 @@
20
],
"children": {
"l_shoudler_wireframe": {
"type": "LineSegments",
"geometry": "arm_joint",
"material": "white_frame"
},
"l_upper_arm": {
"castShadow": true,
"geometry": "arm",
"material": "black",
"position": [
@ -448,18 +411,9 @@
-2.75,
0
],
"scale": [
1.00001,
1,
1
],
"children": {
"l_upper_arm_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
},
"l_elbow": {
"castShadow": true,
"geometry": "arm_joint",
"material": "black",
"position": [
@ -473,12 +427,8 @@
0
],
"children": {
"l_elbow_wireframe": {
"type": "LineSegments",
"geometry": "arm_joint",
"material": "white_frame"
},
"l_lower_arm": {
"castShadow": true,
"geometry": "arm",
"material": "black",
"position": [
@ -486,17 +436,7 @@
-2.75,
0
],
"scale": [
1.00001,
1,
1
],
"children": {
"l_lower_arm_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
},
"r_wrist_helper": {
"type": "empty",
"position": [
@ -504,13 +444,9 @@
-3,
0
],
"scale": [
1.00001,
1,
1
],
"children": {
"l_hand": {
"castShadow": true,
"geometry": "hand",
"material": "black",
"position": [
@ -527,35 +463,17 @@
1,
1,
9
],
"children": {
"l_hand_wireframe": {
"type": "LineSegments",
"geometry": "hand",
"material": "white_frame"
}
}
]
},
"l_wrist": {
"castShadow": true,
"geometry": "arm",
"material": "black",
"position": [
0.00001,
0,
0
],
"scale": [
0.5,
0.25,
0.5
],
"children": {
"l_wrist_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
}
}
]
}
}
}
@ -568,6 +486,7 @@
}
},
"neck": {
"castShadow": true,
"geometry": "neck",
"material": "skin",
"position": [
@ -575,29 +494,14 @@
19.05,
0
],
"scale": [
1.00001,
1,
1
],
"children": {
"neck_wireframe": {
"type": "LineSegments",
"geometry": "neck",
"material": "white_frame"
},
"head": {
"castShadow": true,
"geometry": "head",
"material": "skin",
"children": {
"head_wireframe": {
"type": "LineSegments",
"geometry": "head",
"material": "white_frame"
}
}
"material": "skin"
},
"chin": {
"castShadow": true,
"geometry": "head_border",
"material": "skin",
"position": [
@ -611,35 +515,20 @@
0
],
"children": {
"chin_wireframe": {
"type": "LineSegments",
"geometry": "head_border",
"material": "white_frame"
},
"head_cap_bottom": {
"castShadow": true,
"geometry": "head_cap",
"material": "skin",
"position": [
0,
0,
1
],
"scale": [
1.00001,
1,
1
],
"children": {
"head_cap_bottom_wireframe": {
"type": "LineSegments",
"geometry": "head_cap",
"material": "white_frame"
}
}
]
}
}
},
"scalp": {
"castShadow": true,
"geometry": "head_border",
"material": "skin",
"position": [
@ -653,12 +542,8 @@
0
],
"children": {
"scalp_wireframe": {
"type": "LineSegments",
"geometry": "head_border",
"material": "white_frame"
},
"head_cap_top": {
"castShadow": true,
"geometry": "head_cap",
"material": "skin",
"position": [
@ -666,18 +551,11 @@
0,
-1
],
"scale": [
1.00001,
1,
1
],
"children": {
"head_cap_top_wireframe": {
"type": "LineSegments",
"geometry": "head_cap",
"material": "white_frame"
}
}
"rotation": [
0,
180,
0
]
}
}
}
@ -692,6 +570,7 @@
],
"children": {
"body": {
"castShadow": true,
"geometry": "body",
"material": "black",
"position": [
@ -703,18 +582,156 @@
0,
45,
0
]
}
}
}
}
}
}
}
}
},
"ground": {
"animation": "element.material.map.offset.y -= delta",
"geometry": "ground",
"material": "ground",
"rotation": [
-90,
0,
0
],
"position": [
0,
-14,
0
],
"receiveShadow": true
},
"targets": {
"children": {
"body_wireframe": {
"type": "LineSegments",
"geometry": "body",
"material": "white_frame"
}
}
}
}
"backlight_tagret": {
"type": "AxesHelper",
"position": [
0,
10,
10
]
}
}
},
"moon": {
"geometry": "ground",
"material": "moon",
"scale": [
0.7,
0.7,
0.7
],
"position": [
300,
300,
-300
],
"rotation": [
45, -45, 0
]
},
"lights": {
"children": {
"front_light": {
"type": "SpotLight",
"position": [
0,
-13,
30
],
"intensity": 10000,
"target": "chin",
"color": "rgb(150, 0, 0)"
},
"front_light_helper": {
"type": "SpotLightHelper",
"target": "front_light"
},
"right_backlight": {
"type": "DirectionalLight",
"target": "backlight_tagret",
"position": [
50,
30,
-5
],
"color": "rgb(252, 132, 3)",
"castShadow": true
},
"right_backlight_helper": {
"type": "DirectionalLightHelper",
"target": "right_backlight"
},
"left_backlight": {
"type": "DirectionalLight",
"target": "backlight_tagret",
"position": [
-50,
30,
-5
],
"color": "rgb(3, 15, 252)",
"castShadow": true
},
"left_backlight_helper": {
"type": "DirectionalLightHelper",
"target": "left_backlight"
},
"ambient": {
"type": "AmbientLight",
"intensity": 0.3
},
"right_pointlight": {
"type": "PointLight",
"position": [
20,
10,
-30
],
"color": "orange",
"intensity": 10000
},
"right_pointlight_helper": {
"type": "PointLightHelper",
"target": "right_pointlight"
},
"left_pointlight": {
"type": "PointLight",
"position": [
-20,
10,
-30
],
"color": "darkblue",
"intensity": 10000
},
"left_pointlight_helper": {
"type": "PointLightHelper",
"target": "left_pointlight"
},
"batlight": {
"type": "SpotLight",
"position": [
0,
80,
50
],
"angle": 20,
"intensity": 5000000,
"color": "rgb(195, 163, 33)",
"castShadow": true,
"target": "batman_logo"
},
"batlight_helper": {
"type": "SpotLightHelper",
"target": "batlight"
}
}
}

BIN
textures/moon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
textures/mud.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB