textures, animations

BenedekLaszlo_IH1RZJ.html

@@ -69,6 +69,13 @@
 
         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 createObject(data, name) {
@@ -139,6 +146,7 @@
           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) {
@@ -166,7 +174,7 @@
 
     const loop = true;
 
-    let canvas, renderer, scene, camera, controls;
+    let canvas, renderer, scene, camera, controls, clock;
 
     init().then(loop && animate());
 
@@ -184,6 +192,8 @@
       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}`))
@@ -207,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();
     }
 

scene.json

@@ -145,6 +145,17 @@
       "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"
       } 
     }
   },
@@ -163,7 +174,8 @@
         10,
         10
       ],
-      "castShadow": true
+      "castShadow": true,
+      "animation": "element.rotation.y += delta"
     },
     "batman": {
       "children": {
@@ -173,6 +185,7 @@
           "material": "black",
           "children": {
             "r_thigh": {
+              "animation": "element.rotation.x = Math.sin(time*10)",
               "castShadow": true,
               "geometry": "thigh",
               "material": "black",
@@ -222,6 +235,7 @@
               }
             },
             "l_thigh": {
+              "animation": "element.rotation.x = -Math.sin(time*10)",
               "castShadow": true,
               "geometry": "thigh",
               "material": "black",
@@ -274,6 +288,7 @@
               "type": "empty",
               "children": {
                 "r_shoulder": {
+                  "animation": "element.rotation.x = -Math.sin(time*10)",
                   "castShadow": true,
                   "geometry": "arm_joint",
                   "material": "black",
@@ -372,6 +387,7 @@
                   }
                 },
                 "l_shoulder": {
+                  "animation": "element.rotation.x = Math.sin(time*10)",
                   "castShadow": true,
                   "geometry": "arm_joint",
                   "material": "black",
@@ -577,6 +593,7 @@
       }
     },
     "ground": {
+      "animation": "element.material.map.offset.y -= delta",
       "geometry": "ground",
       "material": "ground",
       "rotation": [
@@ -603,6 +620,23 @@
         }
       }
     },
+    "moon": {
+      "geometry": "ground",
+      "material": "moon",
+      "scale": [
+        0.7,
+        0.7, 
+        0.7
+      ],
+      "position": [
+        300,
+        300, 
+        -300
+      ],
+      "rotation": [
+        45, -45, 0
+      ]
+    },
     "lights": {
       "children": {
         "front_light": {