Moving particles on the face imported * .obj in three
I am uploading via dat.gui a 3D * .obj (like a cube) with 8 vertices and 6 faces (vertex indices). While I can successfully bring my points to the vertices, I cannot evenly distribute them across the model's faces.
This is my process:
(1) OBJECT LOADING FILE
The * .obj example is pretty simple:
v 5.526871 -3.827843 1.523720
v 5.526871 -1.827843 1.523720
v 5.526871 -3.827843 -0.476280
v 5.526871 -1.827843 -0.476280
v 7.526871 -3.827843 1.523720
v 7.526871 -1.827843 1.523720
v 7.526871 -3.827843 -0.476280
v 7.526871 -1.827843 -0.476280
s off
f 2 4 3 1
f 4 8 7 3
f 8 6 5 7
f 6 2 1 5
f 1 3 7 5
f 6 8 4 2
(2) THIRD VERTICALS AND FACES
I use RegEx patterns to trim vertices and faces and then push them onto my geometry.
var faces_pattern1 = /f( +[\d]+)( [\d]+)( [\d]+)( [\d]+)?/g; // f vertex vertex vertex ...
if ( (result = faces_pattern1.exec(line) ) !== null ) {
faces_pattern1.exec(line);
if ( result[ 4 ] === undefined ) {
faces1.push( [
parseInt( result[ 1 ] ) - 1,
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 3 ] ) - 1
] );
} else {
faces1.push( [
parseInt( result[ 1 ] ) - 1,
parseInt( result[ 2 ] ) - 1,
parseInt( result[ 3 ] ) - 1,
parseInt( result[ 4 ] ) - 1
] );
}
}
// push faces to geometry
for (var i = 0; i < faces1.length; i++) {
this.renderer.geometry.faces.push( new THREE.Face3( faces1[i][0], faces1[i][1], faces1[i][2], faces1[i][3] ) );
}
(3) MOVEMENT OF PARTICLES ON VERTICALS
I have several particles that I position at the vertices. This works great.
var lg = allParticle.length;
for( var i = 0; i < lg; i++ ){
var p = allParticle[i];
p.diffX = ( vertices[h][0] * scale - p.x );
p.diffY = ( -vertices[h][1] * scale - p.y );
p.diffZ = ( -vertices[h][2] * scale - p.z );
h += 1;
if( h > nbVertices - 1 ) h = 0;
}
(4) DISTRIBUTED PARTICLES ON FACES
Now I have a radio button where I want to distribute the same particles evenly on the sides of the cube. I am trying to do this using GeometryUtils.randomPointsInGeometry
var randomPointPositions = THREE.GeometryUtils.randomPointsInGeometry( this.renderer.geometry, lg );
this.renderer.geometry.computeBoundingBox();
for( var i = 0; i < randomPointPositions.length; i++ ){
var p = allParticle[i];
p.diffX = randomPointPositions[i].x * scale ;
p.diffY = randomPointPositions[i].y * scale;
p.diffZ = randomPointPositions[i].z * scale ;
}
This distributes points only along the x-axis and not evenly over the face area. Any hints?
- These are the faces (THREE.Face3) I get:
{a: 1, b: 3, c: 2, normal: T…E.Vector3, vertexNormals: Array[0]…}
{a: 3, b: 7, c: 6, normal: T…E.Vector3, vertexNormals: Array[0]…}
{a: 7, b: 5, c: 4, normal: T…E.Vector3, vertexNormals: Array[0]…}
{a: 5, b: 1, c: 0, normal: T…E.Vector3, vertexNormals: Array[0]…}
{a: 0, b: 2, c: 6, normal: T…E.Vector3, vertexNormals: Array[0]…}
{a: 5, b: 7, c: 3, normal: T…E.Vector3, vertexNormals: Array[0]…}
Their design point is always zero.
Similar question: THREE.js - position particles evenly on the faces of objects, not vertically
source to share
ok - it took me a while but I figured it out.
I tried OBJLoader method as suggested by G. Profenza.
Basically load an object, get its mesh, use GeometryUtils.randomPointsinBufferGeometry and then move the particles to vector3 which you get:
OBJLoader: function() {
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
console.log ("ERROR", xhr);
};
var loader = new THREE.OBJLoader( manager );
var allParticle = this.scene.getParticles();
var lg = allParticle.length;
var scale = this.renderer.scale;
loader.load( '/data/cube_02.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
console.log (" === CHILD === ");
console.log (child.geometry);
var randomPointPositions = THREE.GeometryUtils.randomPointsInBufferGeometry( child.geometry, lg );
console.log (randomPointPositions[0].x, randomPointPositions[0].y, randomPointPositions[0].z );
for( var i = 0; i < randomPointPositions.length; i++ ){
var p = allParticle[i];
p.diffX = randomPointPositions[i].x * scale -p.x ;
p.diffY = randomPointPositions[i].y * scale -p.y;
p.diffZ = randomPointPositions[i].z * scale -p.z;
}
}
} );
//object.position.y = - 95;
//this.renderer.sceneGL.add(object);
}, onProgress, onError );
}
source to share