I've been struggling to replicate an existing city in a 3D environment using THREE.js. I have coordinates for approximately 1000 buildings, each with a varying number of corners making it impossible to use standard cubeGeometry. I attempted to create a custom geometry, but it has not yielded the desired results so far. The buildingCoords contain all necessary spatial data related to each building's floor and roof heights relative to the scene center. The issue arises when rendering these buildings - the extrusion settings seem to be providing incorrect height values and creating distorted shapes. Despite experimenting with different parameters, I haven't been able to achieve the precise, cornered buildings I am aiming for without any abnormalities or deformities.
For demonstration purposes, here is an example involving one building:
var buildings = [];
var buildingCoords = [new THREE.Vector3(-330.8653652173956,-312.7242347826201,0),new THREE.Vector3(-329.8339913043564,-310.8272434783638,0),new THREE.Vector3(-324.56661739130294,-313.6665913044507,0),new THREE.Vector3(-325.6655217391161,-315.69250434781463,0),new THREE.Vector3(-330.8653652173956,-312.7242347826201,0),new THREE.Vector3(-330.8653652173956,-312.7242347826201,6.75304347826087),new THREE.Vector3(-329.8339913043564,-310.8272434783638,6.75304347826087),new THREE.Vector3(-324.56661739130294,-313.6665913044507,6.75304347826087),new THREE.Vector3(-325.6655217391161,-315.69250434781463,6.75304347826087),new THREE.Vector3(-330.8653652173956,-312.7242347826201,6.75304347826087)];
buildingShape = new THREE.Shape(buildingCoords);
var extrusionSettings = {amount: 10, bevelEnabled: true, bevelSegments: 3, steps: 4, bevelThickness: 8, material: 0, extrudeMaterial: 1};
var buildingGeometry = new THREE.ExtrudeGeometry(buildingShape, extrusionSettings);
var buildingMaterial = new THREE.MeshPhongMaterial({color: 0xcccccc});
var building = new THREE.Mesh(buildingGeometry,buildingMaterial );
buildings.push(building);
scene.add(building);