//-============================================================= //- Created by Taste //-============================================================= // its messy i know 😂, its my first time with threejs //-------------------------------------------------------------- // What to edit // FOV: fov angle :default 60 // mapSize: size of map :default 100 // maxMove: max MOV distance :default 20 // rockChance: chance to get rock :default 8 // terrainValue: terrain gen :default 1024 //--------------------------------- // NOTE: // rockChange > value 1-10, 1 low change to get rock // , 10 always get rock // terrainValue > any number, lower value = less terrain detail // terrain are generated in runtime // so it'll unique each run //- sadly minimap/radar doesnt show much detail // you can increase detail variable, but it affect the actual terrain :/ // the terrain will populated with mountains // //-============================================================= // and i need help on ambient occlusion map // it seems i cant get it to work // around line:680 //-============================================================= alert("i'm sorry phone users (-/\\-) i didnt think it'll be difficult to see, but i'm wrong"); var rover; var FOV = 60, mapSize = 100, detail = 2, maxMove = 99, rockChance = 8, terainValue = 1024; window.onload = ev => { rover = new Rover(0, 0, 0); changeInput(); cmdoption(); document.getElementsByName("exec").forEach(v => { v.onclick = execute; v.onkeyup = ev => { if (ev.keyCode == 13) { execute(); } }; }); seed(Math.random()); initR(); }; //======================================================================== //= ETC //======================================================================== //based on https://en.wikipedia.org/wiki/Martian_regolith_simulant#JSC_Mars-1_and_JSC_Mars-1A //https://www.lpi.usra.edu/meetings/LPSC98/pdf/1690.pdf //i'm not capable of doing this kind of thing //so what i will do is i'll randomize the composition based on this sample var CHEM_COMP = { SiO2: [43, 43, 44, 34.5, 43.5], Al2O3: [7.3, 7, 7.5, 18.5, 23.3], TiO2: [0.66, 0.56, 1.1, 3.0, 3.8], Fe2O3: [18.5, 17.8, 16.5, 12.4, 15.6], MnO: [0, 0, 0, 0.2, 0.3], CaO: [5.9, 5.7, 5.6, 4.9, 6.2], MgO: [6, 6, 7.0, 2.7, 3.4], K2O: [0.15, 0.15, 0.3, 0.5, 0.6], Na2O: [0, 0, 2.1, 1.9, 2.4], P2O5: [0, 0, 0, 0.7, 0.9], SO3: [6.6, 8.1, 4.9, 0, 0], Cl: [0.7, 0.5, 0.5, 0, 0] }; function prntact(action, domObj = false) { let log = document.createElement("div"); if (!domObj) { let div = document.createElement('div'); div.innerHTML = `${new Date().toISOString()} -
${action}`; log.appendChild(div.firstChild); } else { log.appendChild(action); } log.appendChild(document.createElement('hr')); let logp = document.getElementById('log'); while (logp.childElementCount > 5) logp.removeChild(logp.firstChild); logp.appendChild(log); } function randomize(isInt = false, min = 0, max = 100) { if (isInt) { return Math.floor(Math.random() * Math.floor(max)) + min; } else { return Math.random(); } } function subN(str) { return str.replace(/(\d+)/g, '$1'); } //======================================================================== //= CLASSES //======================================================================== class DustRock { constructor(random) { this.SiO2 = ((random) ? CHEM_COMP.SiO2[randomize(true, 0, 5)] : 0); this.Al2O3 = ((random) ? CHEM_COMP.Al2O3[randomize(true, 0, 5)] : 0); this.TiO2 = ((random) ? CHEM_COMP.TiO2[randomize(true, 0, 5)] : 0); this.Fe2O3 = ((random) ? CHEM_COMP.Fe2O3[randomize(true, 0, 5)] : 0); this.MnO = ((random) ? CHEM_COMP.MnO[randomize(true, 0, 5)] : 0); this.CaO = ((random) ? CHEM_COMP.CaO[randomize(true, 0, 5)] : 0); this.MgO = ((random) ? CHEM_COMP.MgO[randomize(true, 0, 5)] : 0); this.K2O = ((random) ? CHEM_COMP.K2O[randomize(true, 0, 5)] : 0); this.Na2O = ((random) ? CHEM_COMP.Na2O[randomize(true, 0, 5)] : 0); this.P2O5 = ((random) ? CHEM_COMP.P2O5[randomize(true, 0, 5)] : 0); this.SO3 = ((random) ? CHEM_COMP.SO3[randomize(true, 0, 5)] : 0); this.Cl = ((random) ? CHEM_COMP.Cl[randomize(true, 0, 5)] : 0); this.anl = false; this.name = 'RCK' + new Date().getTime().toString(16); } } class LimitedContainer { constructor(count, autodispose, type = 'queue') { let _arr = []; this.push = (item) => { if (_arr.length >= count) { if (autodispose) { while (_arr.length >= count) _arr[((type === 'queue') ? 'shift' : 'pop')](); } else { throw new Error("Container Full"); } } _arr.push(item); }; this.get = () => { return _arr; }; this.getLast = () => { return _arr[_arr.length - 1]; }; this.getFirst = () => { return _arr[0]; }; this.pop = () => { let disposed = false; if (_arr.length > 0) { if (type === 'queue') { disposed = _arr[0]; _arr.shift(); } else { disposed = _arr[_arr.length - 1]; _arr.pop(); } } return disposed; }; this.isEmpty = () => { return _arr.length == 0; }; this.update = (obj, idx) => { _arr[idx] = obj; } } } class Rover { constructor(x, y, rot) { let _x = x; let _y = y; let _rot = rot; let _rock = new LimitedContainer(5, false, 'stack'); let _logs = new LimitedContainer(15, true); let _pics = new LimitedContainer(10, true); this.seed = new Date().getTime(); this.getX = () => { return parseInt(_x); }; this.setX = (x) => { _x = x; }; this.getY = () => { return parseInt(_y); }; this.setY = (y) => { _y = y; }; this.getRot = () => { return parseInt(_rot); }; this.setRot = (rot) => { _rot = rot; }; this.getRock = () => { return _rock; }; this.getLogs = () => { return _logs; }; this.getPics = () => { return _pics; }; } mov(direction, amount) { this.getLogs().push(`MOV ${direction} ${amount}`); prntact(`MOVE ${(direction == 'F')?'FORWARD':'BACKWARD'} BY ${amount}`); this.seed = new Date().getTime(); excbtn(true); let move = 0.0; let m = setInterval(() => { if (move >= (amount / 2) || (Math.abs(camera.position.x) + 0.05) >= 48 || (Math.abs(camera.position.z) + 0.05) >= 48) { clearInterval(m); excbtn(false); } camera.translateZ((direction == 'F') ? -0.01 : 0.01); move += 0.01; }, 10); } trn(direction = 'L') { this.seed = new Date().getTime(); this.getLogs().push(`TRN ${direction}`); prntact(`TURN 15 DEGREES ${direction=='L'?"LEFT":"RIGHT"}`); excbtn(true); let turn = 0.0; let m = setInterval(() => { camera.rotateY(THREE.Math.degToRad((direction == 'R') ? -0.5 : 0.5)); cone.rotateY(THREE.Math.degToRad((direction == 'R') ? -0.5 : 0.5)); turn += 0.5; if (turn >= (15)) { clearInterval(m); excbtn(false) } }, 1); } rck() { try { if (this.seed % 10 < rockChance) { try { this.getRock().push(new DustRock(true)); prntact("PICK UP ONE ROCK"); this.seed = 9; this.updateRock(); } catch (error) { console.error(error); prntact("CONTAINER FULL"); } } else { prntact("NO ROCK FOUND"); } this.getLogs().push(`RCK`); } catch (e) { console.error(e); } } rls() { let released = this.getRock().pop(); console.log(released); if (released) { this.getLogs().push(`RLS`); prntact("RELEASE ONE ROCK FROM CONTAINER"); this.updateRock(); } else { prntact("CONTAINER EMPTY"); } } anl() { if (!this.getRock().isEmpty()) { prntact("ANALYZING ROCK . . ."); this.getLogs().push(`ANL`); let p = document.getElementById("progv"); p.value = 0; document.getElementById("prog").style.display = 'block'; document.getElementById("progtxt").innerHTML = 'Analyzing . . .'; excbtn(true); let report = document.createElement('table'); let tr = document.createElement('tr'); let th = document.createElement('th'); th.innerHTML = "REPORT:"; tr.appendChild(th); report.appendChild(tr); setTimeout(() => { let tr = document.createElement('tr'); let th1 = document.createElement('th'); let th2 = document.createElement('th'); th1.innerHTML = 'Element'; th2.innerHTML = 'Wt%'; tr.appendChild(th1); tr.appendChild(th2); report.appendChild(tr); let r = rover.getRock().getLast(); r.anl = true; rover.getRock().update(r, rover.getRock().get().length - 1); this.updateRock(); for (let key in r) { if (key == 'anl' || key == 'name') continue; let tr = document.createElement('tr'); let td1 = document.createElement('td'); let td2 = document.createElement('td'); td1.innerHTML = subN(key); td2.innerHTML = r[key]; tr.appendChild(td1); tr.appendChild(td2); report.appendChild(tr); } }, 0); let anim = setInterval(() => { p.value += 1; if (p.value >= 100) { prntact(report, true); document.getElementById("progtxt").innerHTML = 'Done!'; excbtn(false) setTimeout(() => { document.getElementById("prog").style.display = 'none'; document.getElementById("progtxt").innerHTML = ''; }, 2000); clearInterval(anim); } }, 50); } else { prntact("CONTAINER EMPTY"); } } pic() { this.getLogs().push(`PIC`); prntact('SAVING IMAGE . . .'); ss = true; let loop = setInterval(() => { if (ss == false) { this.getPics().push(rss); let g = document.getElementById('gallery'); g.innerHTML = ''; this.getPics().get().forEach(val => { let img = new Image(); img.src = val; img.classList.add('pic'); g.appendChild(img); g.appendChild(document.createElement('hr')); }); ss = true; clearInterval(loop); } }, 5); } log() { let report = document.createElement('table'); let tr = document.createElement('tr'); let td = document.createElement('td'); td.innerHTML = "COMMAND LOGS
------------"; tr.appendChild(td); report.appendChild(tr); this.getLogs().get().forEach(val => { let tr = document.createElement('tr'); let td = document.createElement('td'); td.innerHTML = val; tr.appendChild(td); report.appendChild(tr); }); prntact(report, true); this.getLogs().push(`LOG`); } updateRock() { let r = document.getElementById('rocks'); r.innerHTML = ''; this.getRock().get().forEach(val => { console.log(val.name); let rock = document.createElement('span'); rock.innerHTML = val.name; if (val.anl) rock.classList.add('striket'); r.appendChild(rock); r.appendChild(document.createElement('hr')); }); } } //======================================================================== //= LISTENER ONLY //======================================================================== function execute() { let cmd, fullcmd, dir, range, e = true; if (document.getElementById("inkey").checked) { fullcmd = document.getElementById("keyinput").value; cmd = fullcmd.split(/\s+/)[0].toLowerCase(); if (cmd == 'mov' || cmd == 'trn') { if (fullcmd.split(/\s+/)[1]) { if (cmd == 'mov') { dir = fullcmd.split(/\s+/)[1].toUpperCase(); if (dir == 'F' || dir == 'B') { if (fullcmd.split(/\s+/)[2]) { if (fullcmd.split(/\s+/)[2].match(/^\d+$/)) { range = parseInt(fullcmd.split(/\s+/)[2]); } else { prntact(`unknown range in [${cmd}]`.toUpperCase()); e = false; } } else { prntact(`missing argument [range]`.toUpperCase()); e = false; } } else { prntact(`invalid move direction`.toUpperCase()); e = false; } } else { dir = fullcmd.split(/\s+/)[1].toUpperCase(); if (!(dir == 'L' || dir == 'R')) { prntact(`invalid turn direction`.toUpperCase()); e = false; } } } else { prntact(`missing argument [direction]`.toUpperCase()); e = false; } } } else { cmd = document.getElementById("cmdv").value; if (cmd == 'mov' || cmd == 'trn') { dir = (document.getElementById('adparam1').checked ? (cmd == "mov") ? 'F' : 'L' : (cmd == "mov") ? 'B' : 'R'); if (cmd == 'mov') { range = document.getElementById('param').value; if (!range.match(/^\d+$/)) { prntact(`unknown range in [${cmd}].toUpperCase()`); e = false; } } } } if (!e) return; if (rover[cmd]) { switch (cmd) { case 'mov': range = parseInt(range); if (range <= maxMove) rover.mov(dir, range); else prntact(`dont move too far`.toUpperCase()); break; case 'trn': rover.trn(dir); break; default: rover[cmd](); } } else { prntact("Unknown Syntax.".toUpperCase()); } } //======================================================================== //= NOT SO SIGNIFICANT LISTENER ONLY //======================================================================== function changeInput() { let visible = ((document.getElementById("inkey").checked) ? "key" : "cmd"); let notvisible = (visible == 'key') ? 'cmd' : 'key'; document.getElementById(notvisible).style.display = "none"; document.getElementById(visible).style.display = ""; } function cmdoption() { switch (document.getElementById("cmdv").value) { case 'mov': document.getElementById("addparam").style.display = ""; document.getElementById("param").style.display = ""; document.getElementById("adparam1t").innerHTML = "F"; document.getElementById("adparam2t").innerHTML = "B"; break; case 'trn': document.getElementById("addparam").style.display = ""; document.getElementById("param").style.display = "none"; document.getElementById("adparam1t").innerHTML = "L"; document.getElementById("adparam2t").innerHTML = "R"; break; default: document.getElementById("addparam").style.display = "none"; document.getElementById("param").style.display = "none"; } } function numonly() { if (!document.getElementById("param").value.match(/^\d{1,2}$/)) { let sep = document.getElementById("param").value.substr(1).split(/[^0-9]+/); document.getElementById("param").value = parseInt("0" + sep.join("")); } } function excbtn(state) { document.getElementsByName("exec")[0].disabled = state; document.getElementsByName("exec")[1].disabled = state; } //======================================================================== //= MAP GENERATION //= perlin2 & related function taken from //= https://github.com/josephg/noisejs/blob/master/perlin.js by josephg //= *with slight modification //======================================================================== class Grad { constructor(x, y, z) { this.x = x; this.y = y; this.z = z; } dot2(x, y) { return this.x * x + this.y * y; } dot3(x, y, z) { return this.x * x + this.y * y + this.z * z; } } var grad3 = [new Grad(1, 1, 0), new Grad(-1, 1, 0), new Grad(1, -1, 0), new Grad(-1, -1, 0), new Grad(1, 0, 1), new Grad(-1, 0, 1), new Grad(1, 0, -1), new Grad(-1, 0, -1), new Grad(0, 1, 1), new Grad(0, -1, 1), new Grad(0, 1, -1), new Grad(0, -1, -1) ]; var p = [123, 74, 247, 160, 205, 113, 119, 208, 116, 14, 45, 52, 64, 117, 109, 166, 162, 49, 4, 48, 133, 60, 109, 8, 117, 48, 192, 147, 137, 181, 161, 136, 20, 49, 1, 190, 123, 5, 240, 120, 245, 63, 9, 174, 40, 189, 220, 161, 180, 160, 232, 128, 244, 241, 197, 63, 144, 77, 10, 98, 30, 126, 200, 31, 68, 239, 241, 190, 27, 33, 127, 181, 46, 135, 217, 74, 66, 54, 50, 135, 56, 227, 84, 76, 229, 30, 173, 34, 250, 36, 221, 176, 51, 121, 71, 32, 37, 200, 197, 183, 187, 168, 83, 213, 216, 248, 223, 253, 153, 62, 61, 239, 86, 66, 14, 16, 143, 143, 222, 173, 228, 16, 114, 40, 240, 17, 235, 49, 62, 125, 96, 3, 55, 119, 54, 10, 129, 131, 179, 95, 19, 119, 180, 180, 186, 79, 171, 10, 64, 69, 70, 60, 190, 104, 14, 118, 202, 192, 48, 158, 97, 48, 107, 46, 43, 228, 55, 197, 25, 55, 107, 91, 53, 122, 225, 22, 156, 109, 253, 49, 87, 170, 153, 139, 170, 5, 104, 22, 155, 60, 86, 109, 171, 123, 211, 109, 148, 230, 201, 35, 245, 91, 172, 73, 10, 137, 177, 147, 182, 119, 93, 29, 196, 5, 143, 45, 196, 64, 112, 48, 98, 26, 8, 63, 196, 246, 233, 163, 112, 255, 5, 13, 138, 208, 64, 75, 102, 84, 208, 54, 146, 161, 2, 182, 153, 85, 120, 225, 177, 176, 157, 1, 70, 220, 2, 32 ]; var perm = new Array(512); var gradP = new Array(512); function seed(seed) { if (seed > 0 && seed < 1) { // Scale the seed out seed *= 65536; } seed = Math.floor(seed); if (seed < 256) { seed |= seed << 8; } for (var i = 0; i < 256; i++) { var v; if (i & 1) { v = p[i] ^ (seed & 255); } else { v = p[i] ^ ((seed >> 8) & 255); } perm[i] = perm[i + 256] = v; gradP[i] = gradP[i + 256] = grad3[v % 12]; } } function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); } function lerp(a, b, t) { return (1 - t) * a + t * b; } // 2D Perlin Noise function perlin2(x, y) { // Find unit grid cell containing point var X = Math.floor(x), Y = Math.floor(y); // Get relative xy coordinates of point within that cell x = x - X; y = y - Y; // Wrap the integer cells at 255 (smaller integer period can be introduced here) X = X & 255; Y = Y & 255; // Calculate noise contributions from each of the four corners var n00 = gradP[X + perm[Y]].dot2(x, y); var n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1); var n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y); var n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1); // Compute the fade curve value for x var u = fade(x); // Interpolate the four results return lerp( lerp(n00, n10, u), lerp(n01, n11, u), fade(y)); }; function displaceMap() { var canvas = document.createElement('canvas'); canvas.width = canvas.height = terainValue; var ctx = canvas.getContext('2d'); var image = ctx.createImageData(canvas.width, canvas.height); var data = image.data; var canvas2 = document.createElement('canvas'); canvas2.width = canvas2.height = terainValue; var ctx2 = canvas2.getContext('2d'); var image2 = ctx2.createImageData(canvas2.width, canvas2.height); var data2 = image2.data; for (var x = 0; x < canvas.width; x++) { for (var y = 0; y < canvas.height; y++) { var value = Math.abs(perlin2(x / 100, y / 100)); value *= 256; var cell = (x + y * canvas.width) * 4; data[cell] += Math.max(0, (25 - value) * 8); data[cell] = data[cell + 1] = data[cell + 2] = value; data[cell + 3] = 255; let v2 = value + 150; if (v2 > 255) v2 = 150 + (255 % v2); data2[cell] += Math.max(0, (25 - v2) * 8); data2[cell] = data2[cell + 1] = data2[cell + 2] = v2; data2[cell + 3] = 255; } } heightMap = image.data; ctx.fillColor = 'black'; ctx.fillRect(0, 0, 100, 100); ctx.putImageData(image, 0, 0); ctx2.fillColor = 'white'; ctx2.fillRect(0, 0, 100, 100); ctx2.putImageData(image2, 0, 0); ao = canvas2.toDataURL('image/jpeg', 1.0); return canvas.toDataURL('image/jpeg', 1.0); } let ao, heightMap; // for occlusion map; but i cant get i to work.. oh well //======================================================================== //= FOR RENDERING //======================================================================== var scene, camera, renderer, world, spLight, cone; function initR() { prntact("booting . . ."); scene = new THREE.Scene(); scene.background = 0x800000; scene.fog = new THREE.Fog(0x400000, 2.5, 20); let width = 300; let height = 300; renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("canvas"), antialiasing: true }); camera = new THREE.PerspectiveCamera(FOV, width / height, 0.1, 100); cameraT = new THREE.PerspectiveCamera(FOV, width / height, 0.1, 100); scene.add(camera); scene.add(cameraT); renderer.setSize(width, height); var amb = new THREE.AmbientLight(0xffEEEE, 0.6); scene.add(amb); spLight = new THREE.SpotLight(0xDDAAAA, 4, 1); scene.add(spLight); let txtrLoader = new THREE.TextureLoader(); let disp = txtrLoader.load(displaceMap()); let clr = txtrLoader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShD4wgRrTi6lqZjv3d95x0xSCzBS2K9NgE1MaAgykCatx2aw5F'); clr.wrapS = THREE.RepeatWrapping; clr.wrapT = THREE.RepeatWrapping; clr.repeat.set(Math.ceil(mapSize / 2), Math.ceil(mapSize / 2)); let material = new THREE.MeshPhongMaterial({ side: THREE.DoubleSide }); material.bumpMap = clr; material.bumpScale = .005; material.displacementMap = disp; material.displacementScale = mapSize / 15; material.map = clr; material.aoMap = txtrLoader.load(ao); material.aoMapIntensity = 1; prntact("setting up camera . . ."); let worldGeomerty = new THREE.PlaneGeometry(mapSize, mapSize, mapSize * detail, mapSize * detail); world = new THREE.Mesh(worldGeomerty, material); let coneg = new THREE.BoxGeometry(0.5, 0.2, 0.7); let conem = new THREE.MeshBasicMaterial({ color: 0xffff00 }); cone = new THREE.Mesh(coneg, conem); scene.add(cone); camera.position.x = 0; camera.position.y = 0; camera.position.z = 0; camera.lookAt(0, 0, 0); world.rotation.x = THREE.Math.degToRad(-90); world.position.y = -3.5; scene.add(world); world.castShadow = true; world.recieveShadow = true; animate(); } function animate() { requestAnimationFrame(animate); spLight.position.x = camera.position.x; spLight.position.z = camera.position.z; spLight.position.y = 2; cameraT.position.x = camera.position.x; cameraT.position.z = camera.position.z; cameraT.position.y = 8; cone.position.x = camera.position.x; cone.position.z = camera.position.z; cone.position.y = camera.position.y; cameraT.lookAt(camera.position); spLight.lookAt(camera.position); renderer.setViewport(0, 0, 300, 300); renderer.setScissor(0, 0, 300, 300); renderer.render(scene, camera); if (ss) { rss = (renderer.domElement.toDataURL()); ss = false; } renderer.setViewport(0, 0, 100, 100); renderer.setScissor(0, 0, 100, 100); renderer.setScissorTest(true); renderer.render(scene, cameraT); } var ss = false; var rss = '';

it Taste like MARS ROVER