We Keep Coding

Create a curved grid for threejs

I want to create a grid of, let's say 500x500, and I want it to be able to be curved in certain places (think of it as space-time plane that's curved due to gravity). I'm stuck at the start.
This is what I found on the documentation:
// Create a sine-like wave
const curve = new THREE.SplineCurve( [
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( -5, 5 ),
new THREE.Vector2( 0, 0 ),
new THREE.Vector2( 5, -5 ),
new THREE.Vector2( 10, 0 )
] );
const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
const splineObject = new THREE.Line( geometry, material );
I think this should be working but it doesn't. I don't know how to create a multiple lines from here. I tried to handle some array but I didn't know where or how. I have done my research but I can't make any headway.
I have another question: Is that this is a Vector2 I need to make it 3d for that work? There a lot of other classes like CatmullRomCurve3, CubicBezierCurve3, etc, but the problem still is that i need to make an array to create all the vectors and lines.
--
EDIT i created a code for the grid lines but the curve probleme still the same
let size = 12, step = 1;
const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = [];
for(var i = - size; i <= size; i += step) {
vertices.push( - size, - 0.4, i);
vertices.push( size, - 0.4, i);
vertices.push( i, - 0.4, - size);
vertices.push( i, - 0.4, size);
}
let positionAttribute = new THREE.Float32BufferAttribute(vertices, 3);
geometry.setAttribute("position", positionAttribute);
let lines = new THREE.LineSegments(geometry, new THREE.LineBasicMaterial());

How to remove an object from the scene

I want to remove some cylinders that are in scene so i can put new ones in another position.
This is how I place the cylinders (this works just showing so you understand what I am trying to do).
for (i = 0; i < aantalLangs; i++) {
var geometry = new THREE.CylinderGeometry( (langsDiameter * scale), (langsDiameter * scale) , langsLengte * scale , 20 );
var material = new THREE.MeshBasicMaterial( {color: 0xffe26f} );
var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );
cylinder.position.set( 0 , 0 ,onderRandRooster);
onderRandRooster -= (langsMaas * scale);
cylinder.rotation.z = Math.PI / 2;
}
And I use this function to remove them.
function ClearMesh(){
scene.remove(scene.getObjectByName(cylinder));
scene.remove(scene.getObjectByName(cylinder2));
}
I want to use this button to remove the cylinders.
<button onclick="ClearMesh();">Clear mesh</button>

If you want to use Object3D.getObjectByName(), it's necessary to apply a string as a parameter. To be more precise, Object3D.name which you currently don't set in your application. Something like this should work:
// in your for loop
var cylinder = new THREE.Mesh( geometry, material );
cylinder.name = 'cylinder' + i;
// in your ClearMesh() function
scene.remove( scene.getObjectByName( 'cylinder1' ) );
Besides, consider to reuse your material and geometry when creating your cylinder meshes if they have the same properties. Just declare them outside of the for loop. Otherwise you should use the respective .dispose() methods in order to free internal resources of the engine when you remove a cylinder. Have a look at https://stackoverflow.com/a/40730686/5250847 for more details.
three.js R103

Three.js Multiple Materials in Plane Geometry

I am trying to use a single plane to show multiple materials. I am currently using the MultiMaterial with the materials I plan to use inside of (textured).
The issue I am having is that the materials I use seem to get split across the entire plane into little chunks for each face. However I would like to have a material cover a 1 / n amount of the plane/mesh.
My current code (shortened):
var splitX = 2;
var splitY = 2;
var geometry = new THREE.PlaneGeometry(800, 800, splitX, splitY);
var materials = [
new THREE.MeshBasicMaterial({
map: preloaded texture..., side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
color: 0xff0000, side: THREE.DoubleSide
})
];
// set a single square inside the plane to the desired textured material
geometry.faces[0].materialIndex = 0;
geometry.faces[1].materialIndex = 0;
// set the other squares inside the plane to use the coloured material
for(var i = 1; i < geometry.faces.length / 2; i++) {
geometry.faces[i * 2].materialIndex = 1;
geometry.faces[i * 2 + 1].materialIndex = 1;
}
var mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
scene.add(mesh);
The output: http://prnt.sc/e8un2a
I marked each corner of the texture to see whether it would show the entire texture in the 2 faces I specified and it did not. Any help would be appreciated to resolve this! :)

Align BoxGeometry between two 3D Points

I make a game where you can add objects to a world without using a grid. Now I want to make a footpath. When you click on "Create footpath", then you can add a point to on the world at the raycaster position. After you add a first point you can add a second point to the world. When these 2 objects where placed. A line/footpath is visible from the first point to the second one.
I can do this really simple with THREE.Line. See the code:
var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push( new THREE.Vector3(x1,0,z1), new THREE.Vector3(x2,0,z2) );
lineGeometry.computeLineDistances();
var lineMaterial = new THREE.LineBasicMaterial( { color: 0xFF0000 } );
var line = new THREE.Line( lineGeometry, lineMaterial );
scene.add(line);
But I can't add a texture on a simple line. Now I want to do something the same with a Mesh. I have the position of the first point and the raycaster position of the second point. I also have the lenght between the two objects for the lenght of the footpath. But I don't know how I can get the rotation what is needed.
Note. I saw something about LookAt, is this maybe a good idea, how can I use this with a mesh?
Can anyone help me to get the correct rotation for the footpath object?
I use this code for the foodpath mesh:
var loader = new THREE.TextureLoader();
loader.load('images/floor.jpg', function ( texture ) {
var geometry = new THREE.BoxGeometry(10, 0, 2);
var material = new THREE.MeshBasicMaterial({ map: texture, overdraw: 0.5 });
var footpath = new THREE.Mesh(geometry, material);
footpath.position.copy(point2);
var direction = // What can I do here?
footpath.rotation.y = direction;
scene.add(footpath);
});
I want to get the correct rotation for direction.
[UPDATE]
The code of WestLangley helps a lot. But it works not in all directions. I used this code for the lenght:
var lenght = footpaths[i].position.z - point2.position.z;
What can I do that the lenght works in all directions?

You want to align a box between two 3D points. You can do that like so:
var geometry = new THREE.BoxGeometry( width, height, length ); // align length with z-axis
geometry.translate( 0, 0, length / 2 ); // so one end is at the origin
...
var footpath = new THREE.Mesh( geometry, material );
footpath.position.copy( point1 );
footpath.lookAt( point2 );
three.js r.84

Changing Sphere Colors independently three.js

In my scene I have 7 spheres in a flower petal formation (6 on the perimeter and 1 in the center). I want to change the colors of each of these spheres randomly. Here is the code I used to try to do this:
function changeSphereColors() {
var hex, color, len = spheres.length;
var change = function(i) {
var hex = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
color = new THREE.Color(hex);
spheres[i].material.color = color;
}
for (var i=0; i<len; i++) {
change(i);
}
}
var render = function() {
requestAnimationFrame(render);
rotateSpheres();
var num = Math.random();
if (num<0.1) {
changeSphereColors();
}
renderer.render(scene, camera);
}
render();
spheres is an array of length 7 that has each sphere in it. Since I loop through each sphere and assign a random hex color to each one, there should be 7 spheres of all different colors, but instead, all the spheres are the same color.
I looked at the output to see if each color was different and that the loop was going as expected, and everything seemed to be working fine. There was a different hex color generated on each iteration of the loop, and it was assigning the hex color to each sphere.
Why are all the spheres the same color?

It is likely because they are sharing the same material. Create a separate material for each.
Here's an example I created with 3 spheres. Two share the same material, one doesn't. If I set the colour of one of the spheres with the shared material the other changes too:
var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material1 = new THREE.MeshBasicMaterial();
var material2 = new THREE.MeshBasicMaterial();
var sphere = [new THREE.Mesh(geometry, material1), new THREE.Mesh(geometry, material1), new THREE.Mesh(geometry, material2)];
scene.add(sphere[0]);
scene.add(sphere[1]);
scene.add(sphere[2]);
var hex = "0x" + "000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
sphere[0].material.color.setHex(hex);
hex = "0x" + "000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});
sphere[2].material.color.setHex(hex);
// sphere[0] & sphere[1] now share the same colour, even though I didn't set for sphere[1].
// Sphere[2] colour is unique.
http://jsfiddle.net/ebnfsa5h/3/