RangeError: Maximum call stack size exceeded #248

OmegAshEnr01n · 2021-12-13T09:00:37Z

Hi,

So Im having the issue of rendering a simple object on the screen and I came across this error in the console.

On further inspection the following stack trace led me to this function. Check the line 14 for where I have higlighted the issue.

    function processOBJ(e, t, r={}) {
        const n = {
            vertices: [],
            normals: [],
            colors: [],
            texCoords: [],
            heights: [],
            pickingColors: []
        }
          , o = []
          , a = Qolor.parse(r.color).toArray()
          , i = r.position;
        OBJ.parse(e, t, r.flipYZ).forEach((e,t)=>{
            n.vertices.push(...e.vertices), <- ISSUE HERE
            n.normals.push(...e.normals),
            n.texCoords.push(...e.texCoords);
            const i = r.id || e.id
              , s = {}
              , l = (i / 2 % 2 ? -1 : 1) * (i % 2 ? .03 : .06)
              , f = a || e.color || DEFAULT_COLOR
              , c = e.vertices.length / 3
              , u = getPickingColor(t);
            for (let t = 0; t < c; t++)
                n.colors.push(f[0] + l, f[1] + l, f[2] + l),
                n.heights.push(e.height),
                n.pickingColors.push(...u);
            s.height = e.height,
            s.color = e.color,
            s.bounds = getOBJBounds(e.vertices),
            o.push({
                id: i,
                properties: s,
                vertexCount: c
            })
        }
        ),
        postResult(o, i, n)
    }

I am just trying to render a simple chair on the map. Here is the link to the blend file -> https://free3d.com/3d-model/modern-chair-772910.html.

Here is the code I am using now for serving the obj and mtl files.

    var express = require('express')
    var cors = require('cors')
    var app = express()
    
    app.use(cors())
    
    app.use(express.static('public'))
    
    
    app.listen(8080, function () {
      console.log('CORS-enabled web server listening on port 80')
    })

And here is the code that I am using to render the map. I created a file called index.html in the dist/OSMBuildings/ directory.

    <!DOCTYPE html>
    <html>
    <head>
      <title>OSM Buildings</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <style>
        html, body {
          margin: 0;
          padding: 0;
          width: 100%;
          height: 100%;
        }
    
        #map {
          width: 100%;
          height: 100%;
        }
    
        .control {
          position: absolute;
          left: 0;
          z-index: 1000;
        }
    
        .control.tilt {
          top: 0;
        }
    
        .control.rotation {
          top: 45px;
        }
    
        .control.zoom {
          top: 90px;
        }
    
        .control.zoom button{
          font-weight: normal;
        }
    
        .control button {
          width: 30px;
          height: 30px;
          margin: 15px 0 0 15px;
          border: 1px solid #999999;
          background: #ffffff;
          opacity: 0.6;
          border-radius: 5px;
          box-shadow: 0 0 5px #666666;
          font-weight: bold;
          text-align: center;
        }
    
        .control button:hover {
          opacity: 1;
          cursor: pointer;
        }
      </style>
      <link rel="stylesheet" href="OSMBuildings.css">
      <script src="OSMBuildings.js"></script>
    </head>
    
    <body>
    <div id="map"></div>
    
    <div class="control tilt">
      <button class="dec">&#8601;</button>
      <button class="inc">&#8599;</button>
    </div>
    
    <div class="control rotation">
      <button class="inc">&#8630;</button>
      <button class="dec">&#8631;</button>
    </div>
    
    <div class="control zoom">
      <button class="dec">-</button>
      <button class="inc">+</button>
    </div>
    
    <script>
      const osmb = new OSMBuildings({
        container: 'map',
        zoom: 16,
        minZoom: 16,
        maxZoom: 19,
        position: { latitude: 52.52000, longitude: 13.41000 },
        state: true, // stores map position/rotation in url
        attribution: '© 3D <a href="https://osmbuildings.org/copyright/">OSM Buildings</a>'
      });
    
      osmb.addMapTiles(
        'https://api.mapbox.com/styles/v1/osmbuildings/cjt9gq35s09051fo7urho3m0f/tiles/256/{z}/{x}/{y}@2x?access_token=<fill yours here>',
        {
          attribution: '© Data <a href="https://openstreetmap.org/copyright/">OpenStreetMap</a> · © Map <a href="https://mapbox.com/">Mapbox</a>'
        }
      );
    
      osmb.addGeoJSONTiles('https://{s}.data.osmbuildings.org/0.2/anonymous/tile/{z}/{x}/{y}.json');
    
      osmb.addOBJ('http://localhost:8080/chair.obj', { latitude:52.52000, longitude:13.41000 }, { id:'Fernsehturm', scale:2, color:'#ff0000', altitude:0, rotation:51 });
    
    
      //***************************************************************************
    
      // on pointer up
      osmb.on('pointerup', e => {
        // if none, remove any previous selection and return
        if (!e.features) {
          osmb.highlight(feature => {});
          return;
        }
    
        // store id's from seleted items...
        const featureIDList = e.features.map(feature => feature.id);
    
        // ...then is is faster: set highlight color for matching features
        osmb.highlight(feature => {
          if (featureIDList.indexOf(feature.id) > -1) {
            return '#ffffff';
          }
        });
      });
    
      //***************************************************************************
    
      const controlButtons = document.querySelectorAll('.control button');
    
      controlButtons.forEach(button => {
        button.addEventListener('click', e => {
          const parentClassList = button.parentNode.classList;
          const direction = button.classList.contains('inc') ? 1 : -1;
          let increment, property;
    
          if (parentClassList.contains('tilt')) {
            property = 'Tilt';
            increment = direction*10;
          }
          if (parentClassList.contains('rotation')) {
            property = 'Rotation';
            increment = direction*10;
          }
          if (parentClassList.contains('zoom')) {
            property = 'Zoom';
            increment = direction*1;
          }
          if (property) {
            osmb['set'+ property](osmb['get'+ property]()+increment);
          }
        });
      });
    </script>
    </body>
    </html>

The text was updated successfully, but these errors were encountered:

Doppelklick · 2023-04-24T12:31:17Z

same problem :-(

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RangeError: Maximum call stack size exceeded #248

RangeError: Maximum call stack size exceeded #248

OmegAshEnr01n commented Dec 13, 2021 •

edited

Doppelklick commented Apr 24, 2023

RangeError: Maximum call stack size exceeded #248

RangeError: Maximum call stack size exceeded #248

Comments

OmegAshEnr01n commented Dec 13, 2021 • edited

Doppelklick commented Apr 24, 2023

OmegAshEnr01n commented Dec 13, 2021 •

edited