ubilabs/google-maps-api-threejs-layer

How to change vertices and re-render?

Closed this issue · 1 comments

In my program. I need to add/remove a vertex when click (or other operation). But I find out that the graph doesn't change when I push vertex into geometry. What can I do?
Thank you!

    Views.MapView = Marionette.ItemView.extend({
        tagName: 'div',
        className: 'container',
        id: 'map-view-container',

        initialize: function(options) {
            this.listenTo(this.collection, 'backgrid:selected', function(model, selected) {
                

                // var coord = new BMap.Point(model.get('lng'), model.get('lat'));
                var location = new google.maps.LatLng(model.get('lat'), model.get('lng'));

                if (selected) {
                    // var location = new google.maps.LatLng(27.99,120.60);
                    var vertex = this.layer.fromLatLngToVertex(location);
                    this.layer.particles.geometry.vertices.push(vertex);
                    this.layer.render();
                    this.map.panTo(location);

                } else {
                }
            })
        },

        render: function() {},

        onShow: function() {
            var container = document.getElementById(this.el.id);

            this.map = new google.maps.Map(container, {
              zoom: 15,
              mapTypeControl: false,
              center: new google.maps.LatLng(28.001817, 120.702133),
              mapTypeId: google.maps.MapTypeId.HYBRID,
              // styles: styles
            });

            map = this.map;

            this.layer = new ThreejsLayer({ map: map },function(layer){
                geometry = new THREE.Geometry();

                texture = new THREE.Texture(generateSprite());
                texture.needsUpdate = true;

                material = new THREE.ParticleBasicMaterial({
                    size: 200,
                    map: texture,
                    opacity: 0.3,
                    blending: THREE.AdditiveBlending,
                    depthTest: false,
                    transparent: true
                });

                this.particles = new THREE.ParticleSystem( geometry, material );
                particles = this.particles;
                layer.add( particles );

                var location = new google.maps.LatLng(28.001817, 120.712133);
                var vertex = this.fromLatLngToVertex(location);
                layer.particles.geometry.vertices.push(vertex);

                var location = new google.maps.LatLng(27.99,120.60);
                var vertex = this.fromLatLngToVertex(location);
                layer.particles.geometry.vertices.push(vertex);

                function generateSprite() {
                    var canvas = document.createElement('canvas'),
                      context = canvas.getContext('2d'),
                      gradient;

                    canvas.width = 20;
                    canvas.height = 20;

                    gradient = context.createRadialGradient(
                      canvas.width / 2, canvas.height / 2, 0,
                      canvas.width / 2, canvas.height / 2, canvas.width / 2
                    );

                    gradient.addColorStop(1.0, 'rgba(255,255,0,0)');
                    gradient.addColorStop(0.0, 'rgba(255,255,0,1)');

                    context.fillStyle = gradient;
                    context.fillRect(0, 0, canvas.width, canvas.height);

                    return canvas;
                }

            });


        }
    });

You can't see add vertices to a particle system in Three.js.
See: mrdoob/three.js#1690