From 9ad08c80c630cdc5ed7486d64cf932ec5fb80f15 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sat, 11 Nov 2023 22:40:48 +0400 Subject: [PATCH] feat: improve 3d view --- index.html | 32 ++++++++++++----------------- modules/ui/3d.js | 47 +++++++++++++++++-------------------------- modules/ui/options.js | 7 ++----- versioning.js | 2 +- 4 files changed, 34 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index 02018cf7..150f4b52 100644 --- a/index.html +++ b/index.html @@ -5730,11 +5730,13 @@ -
-
Sun position:
- - - +
+ +
+ + + +
@@ -5752,18 +5754,9 @@ style="margin: 0.6em 0 0.3em -0.2em" > - -
- -
- Sun Color: +
@@ -7989,7 +7983,7 @@ - + @@ -8025,7 +8019,7 @@ - + diff --git a/modules/ui/3d.js b/modules/ui/3d.js index a4d6b079..2c021116 100644 --- a/modules/ui/3d.js +++ b/modules/ui/3d.js @@ -3,19 +3,19 @@ window.ThreeD = (function () { const options = { scale: 50, - lightness: 0.7, + lightness: 0.6, shadow: 0.5, - sun: {x: 100, y: 600, z: 1000}, + sun: {x: 100, y: 800, z: 1000}, rotateMesh: 0, rotateGlobe: 0.5, skyColor: "#9ecef5", waterColor: "#466eab", + sunColor: "#cccccc", extendedWater: 0, labels3d: 0, wireframe: 0, resolution: 2, resolutionScale: 2048, - sunColor: "#cccccc", subdivide: 0 }; @@ -202,16 +202,16 @@ window.ThreeD = (function () { }; const saveOBJ = async function () { - downloadFile(await getOBJ(), getFileName() + ".obj", "text/plain;charset=UTF-8"); + const objexporter = await OBJExporter(); + const obj = await objexporter.parse(mesh); + + downloadFile(obj, getFileName() + ".obj", "text/plain;charset=UTF-8"); }; // start 3d view and heightmap edit preview async function newMesh(canvas) { const loaded = await loadTHREE(); - if (!loaded) { - tip("Cannot load 3d library", false, "error", 4000); - return false; - } + if (!loaded) return tip("Cannot load 3d library", false, "error", 4000); scene = new THREE.Scene(); @@ -221,17 +221,16 @@ window.ThreeD = (function () { spotLight = new THREE.SpotLight(options.sunColor, 0.8, 2000, 0.8, 0, 0); spotLight.position.set(options.sun.x, options.sun.y, options.sun.z); spotLight.castShadow = true; - //maybe add a option for this. But changing the option will require to reinstance the spotLight. spotLight.shadow.mapSize.width = 2048; spotLight.shadow.mapSize.height = 2048; scene.add(spotLight); - //scene.add(new THREE.SpotLightHelper(spotLight)); + // scene.add(new THREE.SpotLightHelper(spotLight)); // Renderer Renderer = new THREE.WebGLRenderer({canvas, antialias: true, preserveDrawingBuffer: true}); Renderer.setSize(canvas.width, canvas.height); Renderer.shadowMap.enabled = true; - // Renderer.shadowMap.type = THREE.PCFSoftShadowMap; + Renderer.shadowMap.type = THREE.PCFSoftShadowMap; if (options.extendedWater) extendWater(graphWidth, graphHeight); createMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY); @@ -241,8 +240,11 @@ window.ThreeD = (function () { // controls controls = await OrbitControls(camera, canvas); - controls.enableKeys = false; - controls.minDistance = 10; + controls.listenToKeyEvents(window); + controls.zoomSpeed = 0.25; + + controls.panSpeed = 0.5; + controls.minDistance = 100; controls.maxDistance = 1000; controls.maxPolarAngle = Math.PI / 2; controls.autoRotate = Boolean(options.rotateMesh); @@ -250,7 +252,6 @@ window.ThreeD = (function () { if (controls.autoRotate) animate(); controls.addEventListener("change", render); - return true; } @@ -440,12 +441,11 @@ window.ThreeD = (function () { async function createMeshTextureUrl() { return new Promise(async (resolve, reject) => { - const mapOptions = { + const url = await getMapURL("mesh", { noLabels: options.labels3d, noWater: options.extendedWater, fullMap: true - }; - const url = await getMapURL("mesh", mapOptions); + }); const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = options.resolutionScale; @@ -541,11 +541,6 @@ window.ThreeD = (function () { async function update3dTexture() { if (texture) texture.dispose(); - const mapOptions = { - noLabels: options.labels3d, - noWater: options.extendedWater, - fullMap: true - }; const url = await createMeshTextureUrl(); window.setTimeout(() => window.URL.revokeObjectURL(url), 4000); texture = new THREE.TextureLoader().load(url, render); @@ -580,7 +575,7 @@ window.ThreeD = (function () { // controls controls = await OrbitControls(camera, Renderer.domElement); - controls.enableKeys = false; + controls.zoomSpeed = 0.25; controls.minDistance = 1.8; controls.maxDistance = 10; controls.autoRotate = Boolean(options.rotateGlobe); @@ -631,12 +626,6 @@ window.ThreeD = (function () { img2.src = await getMapURL("mesh", {globe: true, fullMap: true}); } - async function getOBJ() { - const objexporter = await OBJExporter(); - const data = await objexporter.parse(mesh); - return data; - } - function addGlobe3dMesh() { geometry = new THREE.SphereBufferGeometry(1, 64, 64); mesh = new THREE.Mesh(geometry, material); diff --git a/modules/ui/options.js b/modules/ui/options.js index 5ba03102..863241f7 100644 --- a/modules/ui/options.js +++ b/modules/ui/options.js @@ -1002,7 +1002,7 @@ async function enter3dView(type) { canvas.style.display = "block"; canvas.onmouseenter = () => { const help = - "Left mouse to change angle, middle mouse / mousewheel to zoom, right mouse to pan. O to toggle options"; + "Left mouse to change angle, middle mouse. Mousewheel to zoom. Right mouse or hold Shift to pan. O to toggle options"; +canvas.dataset.hovered > 2 ? tip("") : tip(help); canvas.dataset.hovered = (+canvas.dataset.hovered | 0) + 1; }; @@ -1055,7 +1055,6 @@ function toggle3dOptions() { document.getElementById("options3dLightnessNumber").addEventListener("change", changeLightness); document.getElementById("options3dSunX").addEventListener("change", changeSunPosition); document.getElementById("options3dSunY").addEventListener("change", changeSunPosition); - document.getElementById("options3dSunZ").addEventListener("change", changeSunPosition); document.getElementById("options3dMeshSkinResolution").addEventListener("change", changeResolutionScale); document.getElementById("options3dMeshRotationRange").addEventListener("input", changeRotation); document.getElementById("options3dMeshRotationNumber").addEventListener("change", changeRotation); @@ -1079,7 +1078,6 @@ function toggle3dOptions() { options3dLightnessRange.value = options3dLightnessNumber.value = ThreeD.options.lightness * 100; options3dSunX.value = ThreeD.options.sun.x; options3dSunY.value = ThreeD.options.sun.y; - options3dSunZ.value = ThreeD.options.sun.z; options3dMeshRotationRange.value = options3dMeshRotationNumber.value = ThreeD.options.rotateMesh; options3dMeshSkinResolution.value = ThreeD.options.resolutionScale; options3dGlobeRotationRange.value = options3dGlobeRotationNumber.value = ThreeD.options.rotateGlobe; @@ -1115,8 +1113,7 @@ function toggle3dOptions() { function changeSunPosition() { const x = +options3dSunX.value; const y = +options3dSunY.value; - const z = +options3dSunZ.value; - ThreeD.setSun(x, y, z); + ThreeD.setSun(x, y); } function changeRotation() { diff --git a/versioning.js b/versioning.js index 72b5560f..57ad9593 100644 --- a/versioning.js +++ b/versioning.js @@ -1,7 +1,7 @@ "use strict"; // version and caching control -const version = "1.93.10"; // generator version, update each time +const version = "1.93.11"; // generator version, update each time { document.title += " v" + version;