lights, shadows

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

View File

@ -10,7 +10,8 @@
{
"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,13 +57,12 @@
};
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);
}
@ -66,39 +71,70 @@
materials[key] = new materialTypes[value.type](value.options);
}
function createMesh(data) {
let mesh;
function createObject(data, name) {
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 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;
// 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,18 +142,21 @@
};
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;
const loop = true;
let canvas, renderer, scene, camera, controls;
init().then(animate());
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);
@ -134,6 +173,8 @@
.then((json) => SceneLoader.FromJson(json));
window.addEventListener("resize", handleWindowResize, false);
render();
}
function handleWindowResize() {

File diff suppressed because it is too large Load Diff