Comment puis-je traduire les sommets dans un objet THREE.PointCloud?

J'essaie de:

• Dessine un objet THREE.PointCloud avec env. 150k points où les points sont envoyés à partir d'une application Web.
• Échelle les points de l'objet THREE.PointCloud pour obtenir un résultat similaire à celui-ci (rendu via MayaVi ):

Le problème est que:

• Les données transmises à l'objet THREE.PointCloud semblent être inexactes
• Lorsqu'ils sont rendus dans three.js , les points sont disposés en huit cubes, pour des raisons inconnues (je n'applique aucune mise à l'échelle ou des transformations sur les points)

Exemple de réponse du serveur (j'ai inclus des exemples de données au bas de cette publication):

• Comment dessiner une ligne en rectangle 3D en fonction de x, y et z?
• La maille devient très angulaire après la soustraction avec ThreeCSG
• Comment xkcd fait-il xk3d?
• Rendre une scène comme texture Three.js
• Convertissez le point 3D sur la sphère sur la coordonnée UV

 {'geometry': [[-156, 65, 89], [268, 84, 337], [-205, 68, 170], [-87, 69, 52], ... [289, 81, 143], [141, 78, 280], [403, 75, 351]], 'metadata': {'max': {'x': 421, 'y': 105, 'z': 458}, 'min': {'x': -335, 'y': 63, 'z': 39}}} 

Le code three.js utilisé pour créer le nuage de points:

  var container; var scene, camera, renderer, controls; var geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 5000); camera.position.z = 2750; //Add a buffer geometry for particle system var geometry = new THREE.BufferGeometry(); var particles = {{ len(topology['geometry']) }}; var geometry = new THREE.BufferGeometry(); var positions = new Float32Array(particles * 3); var colors = new Float32Array(particles * 3); var color = new THREE.Color(); var i = 0; {% for point in topology['geometry'] %} var x = {{ point[0] }}; var y = {{ point[1] }}; var z = {{ point[2] }}; //Store the position of the point positions[i] = x; positions[i + 1] = y; positions[i + 2] = z; //Assign a colour to the point color.setRGB(0.42, 0.42, 0.42); colors[i] = color.r; colors[i + 1] = color.g; colors[i + 2] = color.b; i+=1; {% end %} geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.computeBoundingSphere(); var material = new THREE.PointCloudMaterial({ size: 15, vertexColors: THREE.VertexColors }); particleSystem = new THREE.PointCloud(geometry, material); scene.add(particleSystem); //Lights light = new THREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light); //Set up renderer renderer = new THREE.WebGLRenderer({ antialias:false }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); //Attach renderer to #container DOM element container = document.getElementById('container'); container.appendChild(renderer.domElement); //Add window listener for resize events window.addEventListener('resize', onWindowResize, false); //Call render loop animate(); } function onWindowResize(){ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); render(); } function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } function render(){ renderer.render(scene, camera); } 

La scène finit par ressembler à ceci:

Aucune suggestion? J'ai utilisé le code d'exemple suivant, mais j'ai de la difficulté à mettre en œuvre correctement la mise à l'échelle des points de mon ensemble de données: http://threejs.org/examples/#webgl_buffergeometry_particles

Lien vers un échantillon de données avec lequel je travaille (2 Mo, 180 k lignes): https://gist.githubusercontent.com/TylerJFisher/659e3e233f8aa458feee/raw/889c0dd0093fd0476094af48488aab62c8666271/topology.asc

• ThreeJS camera.lookAt () n'a aucun effet, y at-il quelque chose que je fais mal?
• Projet Three.js sur iphone – événement (sélectionnez et faites glisser l'objet)
• Three.js – Change Material on Runtime
• Remplissez trois.js scène avec une grille
• Three.js – Comment changer dynamiquement l'opacité de l'objet?

 var data = [ "-156 65 89", "268 84 337", "-205 68 170", "-87 69 52", ... ]; 

  var geometry = new THREE.Geometry(); var colors = []; for ( var x = 0; x < data.length; x++){ var pointCoord = data[ x ].split(" "); if ( pointCoord.length != 3 ) continue; var currentColor = new THREE.Color( 0.5, 1, 0.5 ); colors.push( currentColor ); geometry.vertices.push( new THREE.Vector3( pointCoord[2], pointCoord[1], pointCoord[0] ) ); }; // console.log( geometry.vertices.length ); geometry.colors = colors; var material = new THREE.PointCloudMaterial( { size: 1, vertexColors: THREE.VertexColors } ); particleSystem = new THREE.PointCloud( geometry, material ); scene.add( particleSystem ); 

  new THREE.Vector3( pointCoord[2], pointCoord[1], pointCoord[0] ) 

  new THREE.Vector3( pointCoord[0], pointCoord[1], pointCoord[2] )