I have a system of tubes. More precisely, I create a tubes from this code
tube_color - obviously, color of tube,
spline_points - huge number of THREE.Vector3 objects,
segments, radiusSegments are just numbers
var material = new THREE.MeshLambertMaterial( { color: tube_color, shading: THREE.SmoothShading } );
var spline = new THREE.SplineCurve3(spline_points);
var tube = new THREE.TubeGeometry(spline, segments, 10, radiusSegments, false, false);
var tubeMesh = new THREE.Mesh(tube, material);
scene.add(tubeMesh);
This code creates one particular mesh object in space. For each mesh I can have an array of Vector3's by using myMesh.geometry.vertices.
The problem is: I have the point in 3d space. Around this point I create Cube, which does intersect with tubes. For example, this cube can be created like this
var cube = new THREE.CubeGeometry(xSize,ySize,zSize, 5, 5, 5);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
opacity: 1,
wireframe: true,
transparent: false
});
var selectionMesh = new THREE.Mesh(cube, material);
scene.add(selectionMesh);
Is it possible at least to find objects(meshes) that have intersection with by cubic area? I know that in scene object I have all meshes, and I can iterate over them, get vertices, iterate over them with a condition if there is at least one its point is in cubic area. But I believe... I hope there is a method/algorithm/magic much more simple then this...
As #WestLangley recommended the solution of this problem was to build octree.
octree=new THREE.Octree({
undeferred:false,
depthMax:Infinity,
objectsThreshold:8,
overlapPct:0.15
} );
and search it
var meshesSearch=octree.search( rayCaster.ray.origin, radiusSphere, true, rayCaster.ray.direction );
However, to have specific intersection we need to provide the recursive flag
raycaster.intersectOctreeObjects( objects, true )
I ended up with more complicated processing of my specific case however this was enough to solve the problem at that moment.
Related
I'm making a project to make simple 3d models with dots and lines (curved or not). For a first version I used SVG elements for simple render, smooth curves and mouse events.
Now I'm trying to use Three.js renderer instead of SVG. I got to create 3d tubes to replace the curved lines, but I don't know how to create 3d surfaces based on multiple xyz coordinates.
Here is an example of a model made of 4 points and 4 lines (3 straights and 1 curved):
We could imagine that the curve is extruded to more points, to something like this:
Then I would like to create a surface (or plane), just like the blue shape:
I got inspired of this topic: convert bezier into a plane road in three.js
var material = new THREE.MeshBasicMaterial({ color: 0xc0c0c0 });
var path = new THREE.CatmullRomCurve3([
new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z),
new THREE.Vector3(dots[1].x, dots[1].y, -dots[1].z),
new THREE.Vector3(dots[2].x, dots[2].y, -dots[2].z),
new THREE.Vector3(dots[3].x, dots[3].y, -dots[3].z),
new THREE.Vector3(dots[0].x, dots[0].y, -dots[0].z)
]);
var pts = [],
a ;
for (var i = 0 ; i < 3 ; i++) {
a = i / 3 * Math.PI;
pts.push(new THREE.Vector2(Math.cos(a) * 1, Math.sin(a) * 1));
}
var shape = new THREE.Shape(pts);
var geometry = new THREE.ExtrudeGeometry(shape, {
steps : 10,
bevelEnabled : false,
extrudePath : path
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
But this sample code only creates another tube-like shape.
Instead of using four (Bezier) curves to create a surface, use Bezier SURFACES or NURBS — they are mathematically designed for it. Here is a demo with source code.
I am creating a line and added to the scene and shows well.
but when I try to create a mesh (using the same coordinates that I formed the line) I get errors that no duplicate points.
"Warning, unable to triangulate polygon!
Duplicate point 653.4789181355854: 204.0166729191409
Either or not infinite solutions!
Its finite solutions.
Either or not infinite solutions!
Too bad, not solutions. "
The strange thing about all this is that the coordinates are more than 4000 points, and I'm sure none of them is repeated. (I even checked in excel, and are only repeated the coordinates of start and end which I understand to be the same) .
what can I do?. no way that from the points of the line can create the mesh without me these errors appear ?. or what other steps should I follow?
for(var x in features.features){
materialLinea[x] = new THREE.LineBasicMaterial( { color: "#FFFFFF"} );
array_extrude[x]=new Array();
material[x] = new THREE.MeshBasicMaterial({
color: "#FF0000"
});
geometria[x] = new THREE.Geometry();
for(var s in features.features[x].geometry.coordinates[0]){
geometria[x].vertices.push(new THREE.Vector3(features.features[x].geometry.coordinates[0][s][0],features.features[x].geometry.coordinates[0][s][1],0))
array_extrude[x].push(new THREE.Vector3(features.features[x].geometry.coordinates[0][s][0],features.features[x].geometry.coordinates[0][s][1],0));
}
line[x] = new THREE.Line( geometria[x], materialLinea[x])
scene.add(line[x])
object3d[x] = new THREE.Shape( array_extrude[x] );
var extrusionSettings = {bevelEnabled: false,amount:10, };
figuraExtrude[x] = new THREE.ExtrudeGeometry( object3d[x], extrusionSettings );
municipios[x] = new THREE.Mesh( figuraExtrude[x], material[x] );
scene.add(municipios[x]);
}
You can merge vertices on your geometries
Geometry.mergeVertices()
Disclaimer: I am new to three.js and the world of 3D in general. I also didn't want to clutter the question with unnecessary code, so if there is some that would benefit, please let me know.
I have a model with 3 spotlights, two from the sides that render shadow, and one from the front (same position as the camera) that shines light on the object.
When I was messing about with the side spotlights, both had shadowCameraVisible set to true for debugging purposes, and all was well.
As soon as I set shadowCameraVisible to false on both of them, the shadows no longer render correctly.
The object in quesion contains two MeshLambertMaterials defined with side as THREE.DoubleSide, and the broken shadow resembles the object as it would be displayed if side was set to THREE.FrontSide.
Can anyone think of any reason why the shadow would be broken in this way? And why does the value of shadowCameraVisible change things?
Update:
I have now read that the material.side parameter is ignored for shadows and therefore this is what might be causing it. But this does still not explain why material.side appears to be not ignored when shadowCameraVisible=true!
Update 2:
Here's some code which might be relevant.
The 3D model has two faces which are defined as follows:
var material1 = new THREE.MeshLambertMaterial({
color: 0xff0000,
side: THREE.DoubleSide,
shading: THREE.FlatShading,
colors: THREE.FaceColors,
vertexColors: THREE.FaceColors,
blending: THREE.NormalBlending
});
var material2 = new THREE.MeshLambertMaterial({
image: 'miscimage.jpg',
side: THREE.DoubleSide,
shading: THREE.FlatShading,
colors: THREE.FaceColors,
vertexColors: THREE.FaceColors,
blending: THREE.NormalBlending
});
var materials = [materials1, materials2];
The mesh is defined as:
var mesh = new THREE.Mesh(
geometry,
new THREE.MeshFaceMaterial(materials)
);
mesh.receiveShadow = true;
mesh.castShadow = true;
And the two spotlights:
var spotlight1 = new THREE.SpotLight(0xffffff);
spotlight1.position.set(-160, 300, -60);
spotlight1.shadowDarkness = 0.4;
spotlight1.intensity = 2;
spotlight1.castShadow = true;
scene.add(spotlight1);
var spotlight2 = new THREE.SpotLight(0xffffff);
spotlight2.position.set(160, 300, -60);
spotlight2.shadowDarkness = 0.4;
spotlight2.intensity = 2;
spotlight2.castShadow = true;
scene.add(spotlight2);
As mentioned, when one of the spotlights has shadowCameraVisible=true, then the shadows look like the first image, and when it is not set (i.e. to the default of false) you get the shadows in the second image. This makes it look as though shadowCameraVisible=true causes the shadow to honour the object's side setting of THREE.DoubleSide whereas having shadowCameraVisible=false, does not.
Update 3:
In fact, if I leave one of the cameras with shadowCameraVisible=true, and then go into three.js itself, and within the THREE.CameraHelper function and commented out all calls to addLine, the shadows work fine and you can't see the camera (of course). Further investigation is needed to find out just what within THREE.CameraHelper is allowing the shadows to work.
this is the link of my work : maison.whiteplay.fr
What i am trying to do is a 3D PacMan, but look at th code, i'm using mesh to build my level, except for bubbles (yellow circle), that you need to eat to win.
They are all different objects, but because they are a lot, it's lagging, can i use the same technologie (mesh i think) to the bubbles ? If yes, how ?
code:
var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );
var bille = function(x,z){
this.bille = new THREE.Mesh(
geometrySphere,
new THREE.MeshBasicMaterial( {color: 0xffff00} )
);
this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;
this.bille.position.z = (z-15.5)*100; scene.add(this.bille);
}
Thank your for reading, and if you have any suggestions about my code, don't hesistate :D
You can also reuse your material instead of making a new instance all the time:
var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );
var billeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var bille = function(x,z){
this.bille = new THREE.Mesh(
geometrySphere,
billeMaterial
);
this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;
this.bille.position.z = (z-15.5)*100; scene.add(this.bille);
}
Reusing materials has good influence on performance.
How do you duplicate your meshes/objects?
You're code is almost right.
In your specific case, with N equal balls, you must have N mesh but just one material.
In this way, if you want to colorize (just for example) only one ball, you have to apply it one new material, otherwise you will apply new color to all the balls.
In your case lagging may be due to the sphere construction.
You clearly copy and paste from the documentation without read it before.
var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );
Where, as explained in the documentation:
radius — sphere radius. Default is 50.
widthSegments — number of horizontal segments. Minimum value is 3, and the default is 8.
heightSegments — number of vertical segments. Minimum value is 2, and the default is 6.
32 * 32 is too much for your small-monocolor bubbles, doesn't have sense.
The higher are this values, the higher is the complexity for draw it for each frame.
I suggest you to create sphere with a minor number of vertical/horizontal segments (8*8 may be ok).
Take a look at this demo.
I've made a circle as follows:
material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
arcShape = new THREE.Shape();
arcShape.absarc( 0, 0, 20, 0, -Math.PI*2, true );
geometry = arcShape.makeGeometry();
circle = new THREE.Mesh(geometry, material);
scene.add(circle);
Like that, it is visible. But rotate it, and it disappears.
shadow.rotation.x = Math.PI / 2;
I've seen several other posts where this problem has not been solved. (So unless someone has a solution, I'll resort to making a flat cylinder instead. It's just a niggling problem).
I've set mesh.doubleSided = true and mesh.flipSided = false. I've also tried all 4 combinations of toggling the renderer's depthTest and the material's depthWrite properties.
Is there anything else I could try? If not, I'm guessing the code is sensitive to the order of some of my calls, in which case, I've had a long day so I'll stick with the cylinder!!
material.side = THREE.DoubleSide;