mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 17:51:24 +01:00
3D Scene system upgrade. (#956)
* 3d view system upgrade. * version fix * Versioning fixed. * Subdivision Added * Subdivision added. Removed toggle wireframe as an option. Reverted to previous rendering method. * Update obj export because new threejs version. * Clean up of unrequired code. * Multiple fixes to 3D view upgrade PR. * Remove unused code.(for3DRender)
This commit is contained in:
Efruz Yıldırır
GitHub
parent
c398bc64d6
commit
3d8aa7c3ca
9 changed files with 348 additions and 1042 deletions
141
modules/ui/3d.js
141
modules/ui/3d.js
|
|
@ -12,7 +12,11 @@ window.ThreeD = (function () {
|
|||
waterColor: "#466eab",
|
||||
extendedWater: 0,
|
||||
labels3d: 0,
|
||||
resolution: 2
|
||||
wireframe: 0,
|
||||
resolution: 2,
|
||||
resolutionScale: 2048,
|
||||
sunColor: "#cccccc",
|
||||
subdivide: 0
|
||||
};
|
||||
|
||||
// set variables
|
||||
|
|
@ -92,7 +96,11 @@ window.ThreeD = (function () {
|
|||
|
||||
const setScale = function (scale) {
|
||||
options.scale = scale;
|
||||
geometry.vertices.forEach((v, i) => (v.z = getMeshHeight(i)));
|
||||
let vertices = geometry.getAttribute('position');
|
||||
for(let i = 0; i < vertices.count; i++){
|
||||
vertices.setZ(i,getMeshHeight(i));
|
||||
}
|
||||
geometry.setAttribute('position',vertices);
|
||||
geometry.verticesNeedUpdate = true;
|
||||
geometry.computeVertexNormals();
|
||||
geometry.verticesNeedUpdate = false;
|
||||
|
|
@ -100,6 +108,17 @@ window.ThreeD = (function () {
|
|||
redraw();
|
||||
};
|
||||
|
||||
const setSunColor = function(color){
|
||||
options.sunColor = color;
|
||||
spotLight.color = new THREE.Color(color);
|
||||
render();
|
||||
}
|
||||
|
||||
const setResolutionScale = function (scale) {
|
||||
options.resolutionScale = scale;
|
||||
redraw();
|
||||
};
|
||||
|
||||
const setLightness = function (intensity) {
|
||||
options.lightness = intensity;
|
||||
ambientLight.intensity = intensity;
|
||||
|
|
@ -148,6 +167,16 @@ window.ThreeD = (function () {
|
|||
}
|
||||
};
|
||||
|
||||
const toggle3dSubdivision = function(){
|
||||
options.subdivide = !options.subdivide;
|
||||
redraw();
|
||||
}
|
||||
|
||||
const toggleWireframe = function () {
|
||||
options.wireframe = !options.wireframe;
|
||||
redraw();
|
||||
};
|
||||
|
||||
const setColors = function (sky, water) {
|
||||
options.skyColor = sky;
|
||||
scene.background = scene.fog.color = new THREE.Color(sky);
|
||||
|
|
@ -189,16 +218,20 @@ window.ThreeD = (function () {
|
|||
// light
|
||||
ambientLight = new THREE.AmbientLight(0xcccccc, options.lightness);
|
||||
scene.add(ambientLight);
|
||||
spotLight = new THREE.SpotLight(0xcccccc, 0.8, 2000, 0.8, 0, 0);
|
||||
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));
|
||||
|
||||
// Rendered
|
||||
// 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;
|
||||
if (options.extendedWater) extendWater(graphWidth, graphHeight);
|
||||
createMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY);
|
||||
|
||||
|
|
@ -223,7 +256,7 @@ window.ThreeD = (function () {
|
|||
|
||||
function textureToSprite(texture, width, height) {
|
||||
const map = new THREE.TextureLoader().load(texture);
|
||||
map.anisotropy = Renderer.getMaxAnisotropy();
|
||||
map.anisotropy = Renderer.capabilities.getMaxAnisotropy();
|
||||
const material = new THREE.SpriteMaterial({map});
|
||||
|
||||
const sprite = new THREE.Sprite(material);
|
||||
|
|
@ -296,7 +329,9 @@ window.ThreeD = (function () {
|
|||
};
|
||||
|
||||
const city_icon_material = new THREE.MeshPhongMaterial({color: cityOptions.iconColor});
|
||||
city_icon_material.wireframe = options.wireframe;
|
||||
const town_icon_material = new THREE.MeshPhongMaterial({color: townOptions.iconColor});
|
||||
town_icon_material.wireframe = options.wireframe;
|
||||
const city_icon_geometry = new THREE.CylinderGeometry(cityOptions.iconSize * 2, cityOptions.iconSize * 2, cityOptions.iconSize, 16, 1);
|
||||
const town_icon_geometry = new THREE.CylinderGeometry(townOptions.iconSize * 2, townOptions.iconSize * 2, townOptions.iconSize, 16, 1);
|
||||
const line_material = new THREE.LineBasicMaterial({color: cityOptions.iconColor});
|
||||
|
|
@ -387,32 +422,81 @@ window.ThreeD = (function () {
|
|||
lines = [];
|
||||
}
|
||||
|
||||
async function createMeshTextureUrl(){
|
||||
return new Promise(async (resolve, reject)=>{
|
||||
const mapOptions = {
|
||||
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;
|
||||
canvas.height = options.resolutionScale;
|
||||
const img = new Image();
|
||||
img.src = url;
|
||||
|
||||
img.onload = function(){
|
||||
ctx.drawImage(img,0,0,canvas.width,canvas.height);
|
||||
canvas.toBlob((blob)=>{
|
||||
const blobObj = window.URL.createObjectURL(blob)
|
||||
window.setTimeout(()=>{
|
||||
canvas.remove();
|
||||
window.URL.revokeObjectURL(blobObj);
|
||||
}, 100);
|
||||
resolve(blobObj);
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// create a mesh from pixel data
|
||||
async function createMesh(width, height, segmentsX, segmentsY) {
|
||||
const mapOptions = {
|
||||
noLabels: options.labels3d,
|
||||
noWater: options.extendedWater,
|
||||
fullMap: true
|
||||
};
|
||||
const url = await getMapURL("mesh", mapOptions);
|
||||
window.setTimeout(() => window.URL.revokeObjectURL(url), 5000);
|
||||
|
||||
if (texture) texture.dispose();
|
||||
texture = new THREE.TextureLoader().load(url, render);
|
||||
if(!options.wireframe){
|
||||
//Try loading skin texture.
|
||||
texture = new THREE.TextureLoader().load(await createMeshTextureUrl(), render);
|
||||
texture.needsUpdate = true;
|
||||
texture.anisotropy = Renderer.capabilities.getMaxAnisotropy();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (material) material.dispose();
|
||||
material = new THREE.MeshLambertMaterial();
|
||||
material.map = texture;
|
||||
material.transparent = true;
|
||||
if(options.wireframe){
|
||||
material = new THREE.MeshLambertMaterial();
|
||||
material.wireframe = true;
|
||||
}else{
|
||||
material = new THREE.MeshLambertMaterial();
|
||||
material.map = texture;
|
||||
material.transparent = true;
|
||||
}
|
||||
|
||||
|
||||
if (geometry) geometry.dispose();
|
||||
geometry = new THREE.PlaneGeometry(width, height, segmentsX - 1, segmentsY - 1);
|
||||
geometry.vertices.forEach((v, i) => (v.z = getMeshHeight(i)));
|
||||
let vertices = geometry.getAttribute('position');
|
||||
for(let i = 0; i < vertices.count; i++){
|
||||
vertices.setZ(i,getMeshHeight(i));
|
||||
}
|
||||
geometry.setAttribute('position',vertices);
|
||||
geometry.computeVertexNormals();
|
||||
|
||||
if (mesh) scene.remove(mesh);
|
||||
mesh = new THREE.Mesh(geometry, material);
|
||||
if(options.subdivide){
|
||||
await loadLoopSubdivision();
|
||||
const subdivideParams = {
|
||||
split: true,
|
||||
uvSmooth: false,
|
||||
preserveEdges: true,
|
||||
flatOnly: false,
|
||||
maxTriangles: Infinity
|
||||
};
|
||||
const smoothGeometry = loopSubdivision.modify(geometry,1,subdivideParams);
|
||||
mesh = new THREE.Mesh(smoothGeometry, material);
|
||||
}else{
|
||||
mesh = new THREE.Mesh(geometry, material);
|
||||
}
|
||||
mesh.rotation.x = -Math.PI / 2;
|
||||
mesh.castShadow = true;
|
||||
mesh.receiveShadow = true;
|
||||
|
|
@ -449,7 +533,7 @@ window.ThreeD = (function () {
|
|||
noWater: options.extendedWater,
|
||||
fullMap: true
|
||||
};
|
||||
const url = await getMapURL("mesh", mapOptions);
|
||||
const url = await createMeshTextureUrl();
|
||||
window.setTimeout(() => window.URL.revokeObjectURL(url), 4000);
|
||||
texture = new THREE.TextureLoader().load(url, render);
|
||||
material.map = texture;
|
||||
|
|
@ -579,6 +663,17 @@ window.ThreeD = (function () {
|
|||
});
|
||||
}
|
||||
|
||||
function loadLoopSubdivision(){
|
||||
if (window.loopSubdivision) return Promise.resolve(true);
|
||||
|
||||
return new Promise(resolve => {
|
||||
const script = document.createElement("script");
|
||||
script.src = "libs/loopsubdivison.min.js";
|
||||
document.head.append(script);
|
||||
script.onload = () => resolve(true);
|
||||
script.onerror = () => resolve(false);
|
||||
});
|
||||
}
|
||||
function OrbitControls(camera, domElement) {
|
||||
if (THREE.OrbitControls) return new THREE.OrbitControls(camera, domElement);
|
||||
|
||||
|
|
@ -596,7 +691,7 @@ window.ThreeD = (function () {
|
|||
|
||||
return new Promise(resolve => {
|
||||
const script = document.createElement("script");
|
||||
script.src = "libs/objexporter.min.js";
|
||||
script.src = "libs/objexporter.min.js?v=1.89.35";
|
||||
document.head.append(script);
|
||||
script.onload = () => resolve(new THREE.OBJExporter());
|
||||
script.onerror = () => resolve(false);
|
||||
|
|
@ -609,11 +704,15 @@ window.ThreeD = (function () {
|
|||
update,
|
||||
stop,
|
||||
options,
|
||||
setSunColor,
|
||||
setScale,
|
||||
setResolutionScale,
|
||||
setLightness,
|
||||
setSun,
|
||||
setRotation,
|
||||
toggleLabels,
|
||||
toggle3dSubdivision,
|
||||
toggleWireframe,
|
||||
toggleSky,
|
||||
setResolution,
|
||||
setColors,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue