diff --git a/BenedekLaszlo_IH1RZJ.html b/BenedekLaszlo_IH1RZJ.html index bd323e9..1979197 100644 --- a/BenedekLaszlo_IH1RZJ.html +++ b/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(); } diff --git a/scene.json b/scene.json index b9cb0c1..f573cc0 100644 --- a/scene.json +++ b/scene.json @@ -145,7 +145,18 @@ "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" + } } }, "objects": { @@ -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": { diff --git a/textures/moon.jpg b/textures/moon.jpg new file mode 100644 index 0000000..9316840 Binary files /dev/null and b/textures/moon.jpg differ diff --git a/textures/mud.jpg b/textures/mud.jpg new file mode 100644 index 0000000..4fc09e4 Binary files /dev/null and b/textures/mud.jpg differ