lights, shadows

BenedekLaszlo_IH1RZJ.html

@@ -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) {
+        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 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) {
             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;
@@ -106,18 +142,21 @@
     };
 
     const fov = 75;
-    const near = 0.01;
+    const near = 0.1;
-    const far = 1000;
+    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() {