Compare commits

..

5 Commits

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

BIN
BenedekLaszlo_IH1RZJ.blend Normal file

Binary file not shown.

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

File diff suppressed because it is too large Load Diff

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
textures/mud.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB