How to change vertices and re-render?
Closed this issue · 1 comments
nblintao commented
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; } }); } });
aemkei commented
You can't see add vertices to a particle system in Three.js.
See: mrdoob/three.js#1690