for a three.js project I have I have run into a few problems loading vertices from an STL and adequately converting them to world coordinates. It seems the matrix isn't being applied properly and, I think, it might be related to the loading mechanism itself.
loader.load( './assets/models/trajan_print.stl', function ( geometry ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.name = "target";
mesh.position.set( 0, - 300, - 400 );
mesh.rotation.set( - Math.PI / 2, 0, Math.PI );
mesh.scale.set( 5, 5, 5 );
//mesh.castShadow = true;
//mesh.receiveShadow = true;
mesh.visible = false;
SCENE.add( mesh );
model.setTargets(mesh);
} );
the important function to note is the last one. model.setTargets(mesh). I'm interested in the vertices of the object in world coordinates and that's what that function does... kinda of:
setTargets(mesh){
this.matrixWorld = mesh.matrixWorld; //THIS WORKS, PRINTING IT REVEALS VALUES TRANSLATION/SCALE/ROTATION THAT MATCH THE MODEL'S
var buffer = mesh.geometry.attributes.position.array;
for(var i = 0; i < buffer.length /3; i = i + 3){
var point = new THREE.Vector3(buffer[i], buffer[i+1],buffer[i+2]);
point.applyMatrix4(this.matrixWorld);//DOES NOT WORK
this.unassignedVertices.push(point);
}
}
Now if I do the exact same operation outside of this function it will work as intended. This one is only called if this.unassignedVertices so it was my way around the fact that I needed to wait for the asynchronous load to happen.
insertParticle(part) {
var point = this.unassignedVertices.pop();
point.applyMatrix4(this.matrixWorld); //THIS WORKS BUT HERE BUT WHY?
part.setTargetPoint(point);
this.octree.add(part);
this.particles.add(part);
}
Problem number two, relates back to setTargets(mesh) I seem to only be loading around only half of the vertices from mesh.geometry.attributes.position.array. Now this can actually be caused by other parts in the code and I think that is something that falls outside the scope of a SO question so my question is if anything on that function could be responsible for it? Am I loading it improperly, am I converting it wrong, am I skipping points?
As for further context : the model loads and displays just fine if I remove the visible = false tag.
Ok so if anyone runs into this problem. The array will have duplicate positions as not all of them refer to vertices (probably). Simple case of if(position.x == ... cleans it right up to what's expected.
Related
I'm trying to create several duplicates of a mesh randomly distributed around my THREE.Js scene. I've used the clone() method in a for loop to do so. The array shows a list of the clones I created in the console, but when I try to call the individual elements of the array, I get undefined returned to me in the console. This is the code I tried:
let ball = new THREE.Mesh();
loader.load( './ball.gltf', function ( gltf ) {
gltf.scene.traverse(function(model) { //for gltf shadows!
if (model.isMesh) {
model.castShadow = true;
model.material = sphereMaterial;
}
});
ball = gltf.scene
scene.add( ball );
for (let i = 1; i <= 9; i++) {
let newBall = ball.clone()
scene.add(newBall)
newBall.position.set(Math.floor(Math.random() * 20) * 2 - 10, Math.floor(Math.random() * 20) * 3 - 10, Math.floor(Math.random() * 20) * 2 - 10)
pos_arr.push(newBall)
}
}, undefined, function ( error ) {
console.error( error );
} );
This is what I get when I call console.log(pos_arr) :
Then, if I were to call, say console.log(pos_arr[2]), I would get undefined.
By any chance, does anyone know what's going wrong here?
The usual root cause of this issue is that you access pos_arr too early. Meaning before the onLoad() callback of GLTFLoader has been executed.
There are various ways to fix this issue and the solution mainly depends on how you have structured your app. One approach that can always be used is to pass an instance of LoadingManager to all of your loaders and use its onLoad() callback to finish your scene setup or start object access.
I'm having trouble with removing duplicate vertices from a SphereGeomerty. I want to get rid of the seam on side of the geometry, because it don't align well if I update the vertex positions.
Problem is that I can't create a new geometry with a filtered vertex position list, I get an
[.Offscreen-For-WebGL-000001B883B499D0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0
error.
More strange, if I put back the original vertex list to the bufferGeometry nothing is rendered, but the error is gone:
let positions = sphere.attributes.position.array;
filteredGeometry.addAttribute( 'position', new BufferAttribute( positions, 3 ) );
I'm filtering vertices like this:
function removeDuplicateVertices(vertices) {
var positionLookup = [];
var final = [];
for( let i = 0; i < vertices.length-3; i += 3 ) {
var index = vertices[i] + vertices[i + 1] + vertices[i + 2];
if( positionLookup.indexOf( index ) == -1 ) {
positionLookup.push( index );
final.push(vertices[i])
final.push(vertices[i+1])
final.push(vertices[i+2])
}
}
return final;
}
The SphereBufferGeometry uses an index-attribute. So the vertices-array doesn't store triangles directly but just the points. The triangles are constructed from the additional index-attribute which contains three indices into the position-attribute for each triangle. If you modify the position-attribute you have to update the index-attribute accordingly.
Or you can use geometry.toNonIndexed() to convert the "position + index" format to the "just position" format.
Also have a look at the Geometry.mergeVertices() function, which does exactly what you are doing, only for regular (not Buffer-) Geometries.
This is also called when building a regular SphereGeometry, maybe that already helps?
I am trying to make a series of cubes that can be clicked to highlight them. This will enable me to change their color or add a texture or manipulate them in some way. I have looked through the source code of all the interactive examples at https://threejs.org/examples/ and it appears that each example uses a slightly different way of creating and selecting objects in the scene. I am not used to using javascript though, so maybe I'm missing something simple.
I create an Object3D class named blocks to store all of the cubes
blocks = new THREE.Object3D()
I am using a for loop to create a 9 x 9 array of cubes starting at (0,0,0) coordinates with a slight gap between them, and add() them to blocks and add() blocks to the scene. example: (cube size 2,2,2)
function stack(mx,my,mz){
for (var i = 0; i < 9; i++){
line(mx,my,mz);
mz += 3;
}
}
function line(mx,my,mz){
for (var i = 0;i<9;i++){
var block = new THREE.Mesh( Geometry, Material);
block.position.x = mx;
block.position.y = my;
block.position.z = mz;
blocks.add(block);
mx+=3;
}
}
stack(mx,my,mz)
scene.add(blocks)
When I run this code, I can see them rendered. I use raycaster to .intersectObjects() which requires an array of objects. This is where I run into the problem of selecting just one object.
function onDocumentMouseDown(event) {
var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
**var intersects = raycaster.intersectObjects(blocks.children, true);**
if (intersects.length > 0) {
intersects[0].object.material.transparent = true;
other code stuff blah blah blah
{
This will make all children clickable but they have the same .id as the first object created. so if I try to .getObjectById() in order to change something, it doesn't work.
I have tried to generate each element and add them to the scene iteratively instead of creating an object array to hold them and it still has a similar effect. I've tried storing them in a regular array and then using true parameter to recursively search the .intersectObject() array but it selects all of the objects when I click on it.
var intersects = raycaster.intersectObjects(blocks, true);
I have considered creating 81 unique variables to hold each element and statically typing an array of 81 variables (desperate option) but I can't find a secure way to dynamically create variable names in the for loop to hold the objects. This way was posted on stackoverflow as a solution to creating different named variables but it doesn't seem to create variables at all.
for (var i=0, i<9, i++){
var window["cube" + i] = new THREE.Mesh( Geometry, Material)
{
Main Question: How can I iteratively create multiple Mesh's (enough that statically typing each variable would be ill-advised) in a controllable way that I can select them and manipulate them individually and not as a group?
I think the reason why you met this problem is you reference same Material to build your Mesh, you did intersect a single object in blocks.children, but when you change some properties of the material others mesh who use the material would change too.
function line(mx,my,mz){
for (var i = 0;i<9;i++){
material = new THREE.MeshLambertMaterial({color: 0xffffff});
var block = new THREE.Mesh( Geometry, material);
block.position.x = mx;
block.position.y = my;
block.position.z = mz;
blocks.add(block);
mx+=3;
}
}
it works for me.
EDIT : I have rephrased my question to help users with the same problem.
I have a three.js scene on which I have added some spheres.
I want to move the camera towards a specific direction until all the objects (which are randomly positioned inside the scene) are "fitting exactly" the user's screen.
I have found the answer to my problem!
1. I move the camera (zooming to the desired direction) inside a loop, and in every repeat I create a new frustum using the camera's matrix
2. I check if any of my spheres intersects with a plane of the frustum. If it does, that means that part of one of my objects is outside the frustum so I break the loop and move the camera to its last position.
The above might also works for any object (not only spheres) because every object has a boundingSphere that can be calculated (it might not be very precise the result though).
It also works when zooming out, you 'd just have to move the camera from the object until none of the has a negative distance from all the planes (negative distance means object is "outside" the plane of the frustum).
Code (only for zooming out - r72) :
var finished = false;
var camLookingAt = /* calc. */ ;
while( finished === false ){
var toDirection= camera.position.clone().sub(camLookingAt.clone());
toDirection.setLength(vec.length() - 1); // reduce length for zooming out
camera.position.set(toDirection.x, toDirection.y, toDirection.z);
camera.updateMatrix(); // make sure camera's local matrix is updated
camera.updateMatrixWorld(); // make sure camera's world matrix is updated
var frustum = new THREE.Frustum();
frustum.setFromMatrix( new THREE.Matrix4().multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ) );
for (var j = frustum.planes.length - 1; j >= 0; j--) {
var p = frustum.planes[j];
for (var i = myMeshSpheres.length - 1; i >= 0; i--) {
var sphere = new THREE.Sphere(myMeshSpheres[0].position.clone(), myMeshSpheres[0].radius);
if( p.distanceToSphere(sphere) < 1 ){ // if is negative means part of sphere is outside plane/frustum
finished = true;
}
}
}
As suggested in this answer, I've created a linearly interpolated curve like this:
THREE.Linear3 = THREE.Curve.create(
function ( points, label /* array of Vector3 */) {
this.points = (points == undefined) ? [] : points;
this.label = label;
},
function ( t ) {
var v = new THREE.Vector3();
var c = [];
var points = this.points, point, intPoint, weight;
point = ( points.length - 1 ) * t;
intPoint = Math.floor( point );
weight = point - intPoint;
c[ 1 ] = intPoint;
c[ 2 ] = intPoint > points.length - 2 ? points.length - 1 : intPoint + 1;
var pt1 = points[ c[1] ],
pt2 = points[ c[2] ];
v.copy( pt1 ).lerp( pt2, weight );
return v;
}
);
However, when I'm trying to display a trajectory at different lengths (in an animated kinda-way) I get the following behavior i.e. instead of the curve going through the points, it kinda cuts through the space, note that in the example below each trajectory is supposed to go through the coordinates of each of the spheres (animated gif below):
I am not sure I understand the getPoint function or what is it supposed to return. Any Help is greatly appreciated.
JSFiddle
This is a minimal example but you can see how the right corner has a jerky motion as the tube expands.
http://jsfiddle.net/ElDeveloper/3uyf3sq3/1/
Cleaning some code
That helped me investigate the issue.
You are leaking geometries, you need to dispose the geometry after removing the mesh from the scene
scene.remove(c_mesh)
c_tube && c_tube.dispose();
Use WebGLRenderer. The CanvasRenderer leaks removed objects, and you're creating new objects on each frame. (If you're stuck with CanvasRenderer for some reason, sorry for you)
(For the fiddle) slow the motion, requestAnimationFrame isn't required for a test, setTimeout(animate, 500); allows the user to see what's happening.
What's the point of a 0-segment tube ?
if (index >= points.length - 1){
index = 1; //start with 2 points
}
Works as expected
The TubeGeometry does a tube of N (second argument in constructor, 16 in fiddle) segments. (I'll come back to that later, but I don't think you always want 16 segments)
The default behaviour of Curve.getPoinAt (the method used by TubeGeometry and probably lots of other geometries) is to return equidistant points. You can expect: distance(getPointAt(0),getPointAt(0.1)) == distance(getPointAt(0.1),getPointAt(0.2)) to be true.
Because of these points, no matter how many points you put in your path, the TubeGeometry will build a 16-segments tube with all segment of the same length, going from the first to the last point of your path. There is little chance that one of the 15 intermediate points will be exactly at the position of an edge. That should explain what you see.
Trying to fix the stuff
First get rid of that equidistant way-to-be of the TubeGeometry+Path. Overloading getUtoTmapping should be enough (I found that reading the source):
THREE.Linear3.prototype.getUtoTmapping = function(u) {
return u;
};
I changed your getPoint. It probably does the same thing, but I was more comfortable with my code the investigate
function ( t ) {
var points = this.points;
var index = ( points.length - 1 ) * t;
var floorIndex = Math.floor(index);
if(floorIndex == points.length-1)
return points[floorIndex];
var floorPoint = points[floorIndex];
var ceilPoint = points[floorIndex+1];
return floorPoint.clone().lerp(ceilPoint, index - floorIndex);
}
Give the correct number of segments to the TubeGeometry constructor:
var pathPoints = points.slice(0, index);
c_path = new THREE.Linear3(pathPoints, 'Test');
c_tube = new THREE.TubeGeometry(c_path, pathPoints.length-1, 10, 16, false, true);
At this point, you should have roughly what you were expecting
You should see the tube always going through the edges. You should also see that the TubeGeometry isn't meant to have angles. You could improve this angle issue either by looking at how TubeGeometry and Curve handles tangents, or (if you don't care about slowness) by increasing the number of segments to a very large number:
c_tube = new THREE.TubeGeometry(c_path, 200/*pathPoints.length-1*/, 10, 16, false, true);
That's all for the answer. You can find the last version of my experiments here: http://jsfiddle.net/dqn73m98/5/. You can also ask the three.js developers if such a feature exists, or request an implementation in a github issue (if someone as time to do it), here