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

lights, shadows

Browse Source
This commit is contained in:
BENEDEK László 2024-10-08 15:24:48 +02:00
parent 5772f94a12
commit fdf2adf3c9
2 changed files with 541 additions and 526 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
BenedekLaszlo_IH1RZJ.html
View File

@ -10,7 +10,8 @@
{ {
"imports": { "imports": {
"three": "./js-r167/build/three.module.min.js", "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> </script>
@ -35,11 +36,16 @@
<script type="module"> <script type="module">
import * as THREE from "three"; import * as THREE from "three";
import { TrackballControls } from "TrackballControls"; import { TrackballControls } from "TrackballControls";
import { OBJLoader } from "OBJLoader";
class SceneLoader { class SceneLoader {
static FromJson(data) { static FromJson(data) {
let _scene = new THREE.Scene(); let _scene = new THREE.Scene();
let geometries = {};
let materials = {};
let objects = {};
const geometryTypes = { const geometryTypes = {
"CircleGeometry": THREE.CircleGeometry, "CircleGeometry": THREE.CircleGeometry,
"PlaneGeometry": THREE.PlaneGeometry, "PlaneGeometry": THREE.PlaneGeometry,
@ -51,13 +57,12 @@
}; };
const materialTypes = { 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)) { for (let [key, value] of Object.entries(data.geometries)) {
geometries[key] = new geometryTypes[value.type](...value.options); geometries[key] = new geometryTypes[value.type](...value.options);
} }
@ -66,39 +71,70 @@
materials[key] = new materialTypes[value.type](value.options); materials[key] = new materialTypes[value.type](value.options);
} }
function createMesh(data) { function createObject(data, name) {
let mesh; const objectConstructors = {
"empty": data => new THREE.Object3D(),
"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 = 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 type = data.type ? data.type : "Mesh";
let object = (objects[name] = objectConstructors[type](data));
switch (type) { if (data.position) object.position.set(...data.position);
case "empty": if (data.rotation) object.rotation.set(...Array.from(data.rotation, x => THREE.MathUtils.degToRad(x)));
mesh = new THREE.Object3D(); if (data.scale) object.scale.set(...data.scale);
break; if (data.castShadow) object.castShadow = data.castShadow;
case "Mesh": if (data.receiveShadow) object.receiveShadow = data.receiveShadow;
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);
// add children to parent
if (data.children) { if (data.children) {
for (let [key, value] of Object.entries(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)) { for (let [key, value] of Object.entries(data.objects)) {
_scene.add(meshes[key] = createMesh(value)); _scene.add(createObject(value, key));
} }
return _scene; return _scene;
@ -106,18 +142,21 @@
}; };
const fov = 75; const fov = 75;
const near = 0.01; const near = 0.1;
const far = 1000; const far = 10000;
const rotateSpeed = 5.0; const rotateSpeed = 5.0;
const panSpeed = 1.0; const panSpeed = 1.0;
const loop = true;
let canvas, renderer, scene, camera, controls; let canvas, renderer, scene, camera, controls;
init().then(animate()); init().then(loop && animate());
async function init() { async function init() {
canvas = document.querySelector("#canvas"); canvas = document.querySelector("#canvas");
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, alpha: true }); renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, alpha: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xadadad); renderer.setClearColor(0xadadad);
@ -134,6 +173,8 @@
.then((json) => SceneLoader.FromJson(json)); .then((json) => SceneLoader.FromJson(json));
window.addEventListener("resize", handleWindowResize, false); window.addEventListener("resize", handleWindowResize, false);
render();
} }
function handleWindowResize() { function handleWindowResize() {

304
scene.json
View File

@ -1,5 +1,12 @@
{ {
"geometries": { "geometries": {
"ground": {
"type": "PlaneGeometry",
"options": [
200,
200
]
},
"feet": { "feet": {
"type": "BoxGeometry", "type": "BoxGeometry",
"options": [ "options": [
@ -105,10 +112,10 @@
} }
}, },
"black": { "black": {
"type": "MeshBasicMaterial", "type": "MeshStandardMaterial",
"options": { "options": {
"color": "rgb(0, 0, 0)", "color": "rgb(0, 0, 0)",
"wireframe": false "roughness": 0.1
} }
}, },
"white_frame": { "white_frame": {
@ -119,24 +126,30 @@
} }
}, },
"skin": { "skin": {
"type": "MeshBasicMaterial", "type": "MeshStandardMaterial",
"options": { "options": {
"color": "rgb(246, 215, 179)", "color": "rgb(246, 215, 179)",
"wireframe": false "roughness": 0.6
}
},
"ground": {
"type": "MeshStandardMaterial",
"options": {
"color": "rgb(94, 85, 56)",
"roughness": 0.8
} }
} }
}, },
"meshes": { "objects": {
"batman": {
"children": {
"hip": { "hip": {
"castShadow": true,
"geometry": "hip", "geometry": "hip",
"material": "black", "material": "black",
"children": { "children": {
"hip_wireframe": {
"type": "LineSegments",
"geometry": "hip",
"material": "white_frame"
},
"r_thigh": { "r_thigh": {
"castShadow": true,
"geometry": "thigh", "geometry": "thigh",
"material": "black", "material": "black",
"position": [ "position": [
@ -155,12 +168,8 @@
1 1
], ],
"children": { "children": {
"r_thigh_wireframe": {
"type": "LineSegments",
"geometry": "thigh",
"material": "white_frame"
},
"r_leg": { "r_leg": {
"castShadow": true,
"geometry": "leg", "geometry": "leg",
"material": "black", "material": "black",
"position": [ "position": [
@ -174,32 +183,22 @@
-90 -90
], ],
"children": { "children": {
"r_leg_wireframe": {
"type": "LineSegments",
"geometry": "leg",
"material": "white_frame"
},
"r_feet": { "r_feet": {
"castShadow": true,
"geometry": "feet", "geometry": "feet",
"material": "black", "material": "black",
"position": [ "position": [
0, 0,
-5.75, -5.75,
1.125 1.125
], ]
"children": {
"r_feet_wireframe": {
"type": "LineSegments",
"geometry": "feet",
"material": "white_frame"
}
}
} }
} }
} }
} }
}, },
"l_thigh": { "l_thigh": {
"castShadow": true,
"geometry": "thigh", "geometry": "thigh",
"material": "black", "material": "black",
"position": [ "position": [
@ -218,12 +217,8 @@
1 1
], ],
"children": { "children": {
"l_thigh_wireframe": {
"type": "LineSegments",
"geometry": "thigh",
"material": "white_frame"
},
"l_leg": { "l_leg": {
"castShadow": true,
"geometry": "leg", "geometry": "leg",
"material": "black", "material": "black",
"position": [ "position": [
@ -237,26 +232,15 @@
-90 -90
], ],
"children": { "children": {
"l_leg_wireframe": {
"type": "LineSegments",
"geometry": "leg",
"material": "white_frame"
},
"l_feet": { "l_feet": {
"castShadow": true,
"geometry": "feet", "geometry": "feet",
"material": "black", "material": "black",
"position": [ "position": [
0, 0,
-5.75, -5.75,
1.125 1.125
], ]
"children": {
"l_feet_wireframe": {
"type": "LineSegments",
"geometry": "feet",
"material": "white_frame"
}
}
} }
} }
} }
@ -266,6 +250,7 @@
"type": "empty", "type": "empty",
"children": { "children": {
"r_shoulder": { "r_shoulder": {
"castShadow": true,
"geometry": "arm_joint", "geometry": "arm_joint",
"material": "black", "material": "black",
"position": [ "position": [
@ -279,12 +264,8 @@
-20 -20
], ],
"children": { "children": {
"r_shoulder_wireframe": {
"type": "LineSegments",
"geometry": "arm_joint",
"material": "white_frame"
},
"r_upper_arm": { "r_upper_arm": {
"castShadow": true,
"geometry": "arm", "geometry": "arm",
"material": "black", "material": "black",
"position": [ "position": [
@ -293,12 +274,8 @@
0 0
], ],
"children": { "children": {
"r_upper_arm_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
},
"r_elbow": { "r_elbow": {
"castShadow": true,
"geometry": "arm_joint", "geometry": "arm_joint",
"material": "black", "material": "black",
"position": [ "position": [
@ -312,12 +289,8 @@
0 0
], ],
"children": { "children": {
"r_elbow_wireframe": {
"type": "LineSegments",
"geometry": "arm_joint",
"material": "white_frame"
},
"r_lower_arm": { "r_lower_arm": {
"castShadow": true,
"geometry": "arm", "geometry": "arm",
"material": "black", "material": "black",
"position": [ "position": [
@ -326,11 +299,6 @@
0 0
], ],
"children": { "children": {
"r_lower_arm_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
},
"r_wrist_helper": { "r_wrist_helper": {
"type": "empty", "type": "empty",
"position": [ "position": [
@ -340,6 +308,7 @@
], ],
"children": { "children": {
"r_hand": { "r_hand": {
"castShadow": true,
"geometry": "hand", "geometry": "hand",
"material": "black", "material": "black",
"position": [ "position": [
@ -356,30 +325,17 @@
1, 1,
1, 1,
9 9
], ]
"children": {
"r_hand_wireframe": {
"type": "LineSegments",
"geometry": "hand",
"material": "white_frame"
}
}
}, },
"r_wrist": { "r_wrist": {
"castShadow": true,
"geometry": "arm", "geometry": "arm",
"material": "black", "material": "black",
"scale": [ "scale": [
0.5, 0.5,
0.25, 0.25,
0.5 0.5
], ]
"children": {
"r_wrist_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
}
}
} }
} }
} }
@ -392,6 +348,7 @@
} }
}, },
"l_shoulder": { "l_shoulder": {
"castShadow": true,
"geometry": "arm_joint", "geometry": "arm_joint",
"material": "black", "material": "black",
"position": [ "position": [
@ -405,12 +362,8 @@
20 20
], ],
"children": { "children": {
"l_shoudler_wireframe": {
"type": "LineSegments",
"geometry": "arm_joint",
"material": "white_frame"
},
"l_upper_arm": { "l_upper_arm": {
"castShadow": true,
"geometry": "arm", "geometry": "arm",
"material": "black", "material": "black",
"position": [ "position": [
@ -419,12 +372,8 @@
0 0
], ],
"children": { "children": {
"l_upper_arm_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
},
"l_elbow": { "l_elbow": {
"castShadow": true,
"geometry": "arm_joint", "geometry": "arm_joint",
"material": "black", "material": "black",
"position": [ "position": [
@ -438,12 +387,8 @@
0 0
], ],
"children": { "children": {
"l_elbow_wireframe": {
"type": "LineSegments",
"geometry": "arm_joint",
"material": "white_frame"
},
"l_lower_arm": { "l_lower_arm": {
"castShadow": true,
"geometry": "arm", "geometry": "arm",
"material": "black", "material": "black",
"position": [ "position": [
@ -452,11 +397,6 @@
0 0
], ],
"children": { "children": {
"l_lower_arm_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
},
"r_wrist_helper": { "r_wrist_helper": {
"type": "empty", "type": "empty",
"position": [ "position": [
@ -466,6 +406,7 @@
], ],
"children": { "children": {
"l_hand": { "l_hand": {
"castShadow": true,
"geometry": "hand", "geometry": "hand",
"material": "black", "material": "black",
"position": [ "position": [
@ -482,30 +423,17 @@
1, 1,
1, 1,
9 9
], ]
"children": {
"l_hand_wireframe": {
"type": "LineSegments",
"geometry": "hand",
"material": "white_frame"
}
}
}, },
"l_wrist": { "l_wrist": {
"castShadow": true,
"geometry": "arm", "geometry": "arm",
"material": "black", "material": "black",
"scale": [ "scale": [
0.5, 0.5,
0.25, 0.25,
0.5 0.5
], ]
"children": {
"l_wrist_wireframe": {
"type": "LineSegments",
"geometry": "arm",
"material": "white_frame"
}
}
} }
} }
} }
@ -518,6 +446,7 @@
} }
}, },
"neck": { "neck": {
"castShadow": true,
"geometry": "neck", "geometry": "neck",
"material": "skin", "material": "skin",
"position": [ "position": [
@ -526,23 +455,13 @@
0 0
], ],
"children": { "children": {
"neck_wireframe": {
"type": "LineSegments",
"geometry": "neck",
"material": "white_frame"
},
"head": { "head": {
"castShadow": true,
"geometry": "head", "geometry": "head",
"material": "skin", "material": "skin"
"children": {
"head_wireframe": {
"type": "LineSegments",
"geometry": "head",
"material": "white_frame"
}
}
}, },
"chin": { "chin": {
"castShadow": true,
"geometry": "head_border", "geometry": "head_border",
"material": "skin", "material": "skin",
"position": [ "position": [
@ -556,30 +475,20 @@
0 0
], ],
"children": { "children": {
"chin_wireframe": {
"type": "LineSegments",
"geometry": "head_border",
"material": "white_frame"
},
"head_cap_bottom": { "head_cap_bottom": {
"castShadow": true,
"geometry": "head_cap", "geometry": "head_cap",
"material": "skin", "material": "skin",
"position": [ "position": [
0, 0,
0, 0,
1 1
], ]
"children": {
"head_cap_bottom_wireframe": {
"type": "LineSegments",
"geometry": "head_cap",
"material": "white_frame"
}
}
} }
} }
}, },
"scalp": { "scalp": {
"castShadow": true,
"geometry": "head_border", "geometry": "head_border",
"material": "skin", "material": "skin",
"position": [ "position": [
@ -593,26 +502,15 @@
0 0
], ],
"children": { "children": {
"scalp_wireframe": {
"type": "LineSegments",
"geometry": "head_border",
"material": "white_frame"
},
"head_cap_top": { "head_cap_top": {
"castShadow": true,
"geometry": "head_cap", "geometry": "head_cap",
"material": "skin", "material": "skin",
"position": [ "position": [
0, 0,
0, 0,
-1 -1
], ]
"children": {
"head_cap_top_wireframe": {
"type": "LineSegments",
"geometry": "head_cap",
"material": "white_frame"
}
}
} }
} }
} }
@ -627,6 +525,7 @@
], ],
"children": { "children": {
"body": { "body": {
"castShadow": true,
"geometry": "body", "geometry": "body",
"material": "black", "material": "black",
"position": [ "position": [
@ -638,18 +537,93 @@
0, 0,
45, 45,
0 0
]
}
}
}
}
}
}
}
}
},
"ground": {
"geometry": "ground",
"material": "ground",
"rotation": [
-90,
0,
0
], ],
"position": [
0,
-14,
0
],
"receiveShadow": true
},
"targets": {
"children": { "children": {
"body_wireframe": { "backlight_tagret": {
"type": "LineSegments", "type": "AxesHelper",
"geometry": "body", "position": [
"material": "white_frame" 0,
} 10,
} 10
} ]
}
} }
} }
},
"lights": {
"children": {
"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
},
"top_light": {
"type": "PointLight",
"position": [
20,
50,
-30
],
"castShadow": true,
"color": "orange",
"intensity": 10000
},
"top_light_helper": {
"type": "PointLightHelper",
"target": "top_light"
} }
} }
} }