search

peterqliu / threebox

A three.js plugin for Mapbox GL JS, with support for basic animation and advanced 3D rendering.
MIT License
526 stars 320 forks source link

threebox & react #57

Closed aidinism closed 5 years ago

aidinism commented 5 years ago

does it work with react.js?

trying to use it inside a react app with mapboxgl (works fine with normal THREE.js) but gives me this error:

threebox.js:2596 Uncaught TypeError: Cannot read property 'matrixWorld' of undefined at p.unproject (threebox.js:2596) at r.eval (Map.js:216) at r.dt.fire (mapbox-gl.js:28) at HTMLDivElement.eval (mapbox-gl.js:32)

code:

map.on("load", function() {
      map.addLayer({
        id: 'custom_layer',
        type: 'custom',
        onAdd: function(map, mbxContext){
            window.threebox = new Threebox(map, mbxContext);
            threebox.setupDefaultLights();
            var geometry = new THREE.BoxGeometry(20, 20, 20);
            var redMaterial = new THREE.MeshPhongMaterial( {
                color: 0xff0000, 
                side: THREE.DoubleSide
            });
            let cube = new THREE.Mesh(geometry, redMaterial);
            threebox.addAtCoordinate(cube, origin);
        },

        render: function(gl, matrix){
            threebox.update(true);
        }
    });