We Keep Coding

THREE.js camera following a specific path

I'm trying to make a game with THREE.js. I have a path with a lot of curves combined with some straight paths.
I found an example on Internet and tried to implement TrackballControls.js to make the camera follow a line, but the camera doesn't lookAt the front, it moves weird.
Here is the code:
var controls = new THREE.TrackballControls(camera, render.domElement);
var numPoints = 50;
spline = new THREE.CatmullRomCurve3([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(50, 0, 0),
new THREE.Vector3(0, 0, -100)
]);
var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(numPoints);
for (var i = 0; i < splinePoints.length; i++) {
geometry.vertices.push(splinePoints[i]);
}
line = new THREE.Line(geometry, material);
line.position.set(0, 0, 0);
scene.add(line);
var counter = 0;
if (counter <= 1) {
camera.position.copy( spline.getPointAt(counter) );
tangent = spline.getTangentAt(counter).normalize();
axis.crossVectors(up, tangent).normalize();
var radians = Math.acos(up.dot(tangent));
camera.quaternion.setFromAxisAngle(axis, radians);
counter += 0.005
} else {
counter = 0;
}
Thanks.

The following example shows how to create a camera that follows a spline curve. Just click on the button "Camera Spline Animation View" to see the effect. Maybe you can use the underlying code to solve your problem.

Creating shapes based on Sphere vertices ThreeJs

Here's what i am trying to do, i already have created the vertices based on a formula, and connected lines between these vertices using a threejs method, and now i want to create shapes based on these vertices and connect them together to use them as map tiles, my suggestion is to modify the shape's vertices y, x, z axis, but i'm not able to find the right formula for these vertices:
mesh1 = new THREE.Mesh(); // sphere container
mesh2 = new THREE.Mesh(); // sphere container
mesh3 = new THREE.Mesh(); // sphere container
var R = 5.6; // radius
var LON = 32; var LAT = 16; // approximation
var PILAT = Math.PI/LAT;
var PILON = 2 * Math.PI/LON;
var cos1,cos2,sin1,sin2,t1,t2;
var y1,y2,r1,r2,t1,t2;
var plotG = new THREE.PlaneGeometry(0.06, 0.06);
var lineColor = new THREE.LineBasicMaterial({color: 0xaaaaaa});
var geometry = new THREE.Geometry();
var oldLATCounter = 0;
var oldLONCounter = 0;
for (var i=0; i<LAT; i++){
t1 = Math.PI - i*PILAT;
t2 = Math.PI - (i+1)*PILAT;
oldT1 = Math.PI - oldLATCounter*PILAT;
oldT2 = Math.PI - (oldLATCounter+1)*PILAT;
y1 = Math.cos(t1); // 1 latitudes radius y-position;
y2 = Math.cos(t2); // 2 latitudes radius y-position;
oldY1 = Math.cos(oldT1); // 1 latitudes radius y-position;
oldY2 = Math.cos(oldT2); // 2 latitudes radius y-position;
r1 = Math.abs( Math.sin(t1) ); // 1 latitudes radius;
r2 = Math.abs( Math.sin(t2) ); // 2 latitudes radius;
oldR1 = Math.abs( Math.sin(oldT1) ); // 1 latitudes radius;
oldR2 = Math.abs( Math.sin(oldT2) ); // 2 latitudes radius;
for (var j=0; j<LON; j++) // walk longitudes segments
{
t1 = j*PILON;
t2 = (j+1)*PILON;
oldT1 = oldLONCounter*PILON;
oldT2 = (oldLONCounter+1)*PILON;
cos1 = Math.cos(t1);
cos2 = Math.cos(t2);
sin1 = Math.sin(t1);
sin2 = Math.sin(t2);
oldCos1 = Math.cos(oldT1);
oldCos2 = Math.cos(oldT2);
oldSin1 = Math.sin(oldT1);
oldSin2 = Math.sin(oldT2);
geometry.vertices.push(
new THREE.Vector3( r1*cos1, y1, r1*sin1 ),
new THREE.Vector3( r2*cos1, y2, r2*sin1 ),
new THREE.Vector3( r2*cos2, y2, r2*sin2 )
);
geometry.dynamic = true;
var m1 = new THREE.Mesh( plotG );
m1.position.set(r2*cos2, y2, r2*sin2);
// m1.geometry.vertices[0].y = 0;
// m1.geometry.vertices[0].x = 0;
// m1.geometry.vertices[0].z = 0;
// m1.geometry.vertices[1].y = 0;
// m1.geometry.vertices[1].x = (oldR2*oldCos2) - (r2*cos2);
// m1.geometry.vertices[1].z = -(oldR2*oldSin2);
// m1.geometry.vertices[2].y = oldTy2;
// m1.geometry.vertices[2].x = 0;
// m1.geometry.vertices[2].z = 0.1;
// m1.geometry.vertices[3].y = 0;
// m1.geometry.vertices[3].x = 0;
// m1.geometry.vertices[3].z = 0.1;
mesh2.add(m1.clone());
oldLONCounter = j;
}
oldLATCounter = i;
}
mesh2.add( new THREE.Line( geometry, new THREE.LineBasicMaterial({color: 0xaaaaaa}) ) );
scene.add(mesh2);
mesh2.scale.set(R,R,R);
mesh2.position.x = 0;
This is the sphere i'm working on

Have you checked the THREE.Shape Class? It let you draw a shape/polygon based on some given points.
So my suggestion in your case is to loop through the vertices you need and draw a shape with them.
Here you can find out more about THREE.Shape
If you then want to create a geometry with that shape, to then add it to a mesh, then also have a look at THREE.ShapeGeometry

Create torus graph using three js

I'm trying to create a torus graph where there are different coloured segments of different widths (depending on the data size), basically a pie graph that looks nicer.
Is it possible to do this using torus geometry or would it be best to create the segments as shapes and use exctrudegeometry?
In wither case, what's the best way of doing this?
Edit
I have implemented this via torus geometry like:
var prevAngle = 0;
for(var i = 0; i < data.length; i++){
var mat = new THREE.MeshPhongmaterial({materialOptions});
var angle = 2* Math.PI * data[i].size //size is decimal
var geo = new THREE.TorusGeometry(500, 200, 8, 6, angle);
var mesh = new THREE.Mesh(geo, mat);
mesh.rotation.z = prevAngle;
scene.add(mesh);
prevAngle = angle;
}
But when I render this (with 4 objects in data with size 0.25) I only get the top half of the torus (semi-torus?).
is the rotation correct?

You can look at the example at https://github.com/josdirksen/learning-threejs/blob/master/chapter-05/07-basic-3d-geometries-torus.html
As you can see, the last argument to the TorusGeometry is the arc which you can use to directly map the segments of your pie graph to segments of a torus geometry.

Working solution
var prevAngle = 0;
var material = new THREE.MeshPhongmaterial({materialOptions});
var graphContainer = new THREE.Object3D();
graphContainer.castShadow = false;
for(var i = 0; i < data.length; i++){
var mat = material.clone();
mat.color = new THREE.Color(this.coloursArray[i]); //colorsArray = ['#46adad', ...]
var angle = 2* Math.PI * data[i].size //size is decimal
var geo = new THREE.TorusGeometry(500, 200, 8, 6, angle);
var mesh = new THREE.Mesh(geo, mat);
mesh.rotation.z = prevAngle;
graphContainer.add(mesh);
prevAngle += angle;
}
this.scene.add(graphContainer);

Can't color the vertices but if use faces the three.js works

I am trying to put some color on vertices but the colors do not appear. I am using Three.js library.
This is the function example I am using:
function parserExpose(arr) {
var geometry = new THREE.PlaneGeometry(60, 60, arr.x - 1, arr.y - 1);
for (var i = 0, l = geometry.vertices.length; i < l; i++) {
geometry.vertices[i].z = (arr.topo[i].topoValues / 65535 * 2470);
geometry.vertices[i].color = new THREE.Color(Math.random() * 0x00ffff);
}
geometry.colorsNeedUpdate = true;
geometry.needsUpdate = true;
geometry.__dirtyVertices = true;
geometry.__dirtyNormals = true;
geometry.computeBoundingSphere();
//vertexColors: THREE.VertexColors
//THREE.FaceColors
var plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors, wireframe: true, wireframeLinewidth: 3}));
scene.add(plane);
}
If I use geometry.faces[] I can change the color but I only want to change on vertices not the faces.
Thx in advance. :)

How to draw a 2d arc

I am trying to input some known acr values from another program and reproduce them in three.js
Right now I am using the following code I found on this site. It draw the arc fine, although it may not be the best option.
function DRAWarc(){
// smooth my curve over this many points
var numPoints = 100;
spline = new THREE.SplineCurve3([
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(0, 200, 0),
new THREE.Vector3(150, 150, 0)
]);
var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
var geometry = new THREE.Geometry();
var splinePoints = spline.getPoints(numPoints);
for(var i = 0; i < splinePoints.length; i++){
geometry.vertices.push(splinePoints[i]);
}
var line = new THREE.Line(geometry, material);
scene.add(line);
}
The following are the known variables.
Center point (X,Y) (if the are was a complete circle, the center of the circle)
radius (if it were a circle)
start angle (I'm not positive, but I think this is the degree, if it were a circle, going counter-clockwise, with 0 being to the right of the circle)
end angle (see above)
more code!
///////////
// SCENE //
///////////
scene = new THREE.Scene();
////////////
// CAMERA //
////////////
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
viewsize = 900;
camera = new THREE.OrthographicCamera(
SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2,
SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2,
1, 1e6 );
camera.position.z = 2000;
scene.add(camera);
camera.lookAt(new THREE.Vector3(2100, 3600, 0));
//////////////
// RENDERER //
//////////////
// create and start the renderer
if ( Detector.webgl ){
renderer = new THREE.WebGLRenderer();
//alert('no problem.');
}else{
renderer = new THREE.CanvasRenderer();
alert('problem.');
}
renderer.setClearColor("white", 1);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.body;
container.appendChild( renderer.domElement );
////////////
// EVENTS //
////////////
// automatically resize renderer
THREEx.WindowResize(renderer, camera);
// toggle full-screen on given key press
THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
///////////
// STATS //
///////////
// displays current and past frames per second attained by scene
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
///////////
// LIGHT //
///////////
// create a light
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);
var ambientLight = new THREE.AmbientLight(0x111111);
// scene.add(ambientLight);
//////////////
// GEOMETRY //
//////////////
// most objects displayed are a "mesh":
// a collection of points ("geometry") and
// a set of surface parameters ("material")
doWork();
}
function animate()
{
requestAnimationFrame( animate );
render();
update();
}
function update()
{
// delta = change in time since last call (in seconds)
var delta = clock.getDelta();
// functionality provided by THREEx.KeyboardState.js
if ( keyboard.pressed("1") )
document.getElementById('message').innerHTML = ' Have a nice day! - 1';
if ( keyboard.pressed("2") )
document.getElementById('message').innerHTML = ' Have a nice day! - 2 ';
//controls.update();
stats.update();
}
function render()
{
renderer.render( scene, camera );
}`

You can draw arc with the circle geometry
// compute angle between p1 and p2
var angle = Math.acos(p1.dot(p2)/(p1.length()*p2.length()));
// create arc
var geometry = new THREE.CircleGeometry(radius, nbSegments, 0, angle);
// remove center vertex
geometry.vertices.splice(0,1);
// TODO: move the arc to the good place in the scene
// add arc to the scene
scene.add(new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff00f0 }));

So after a little research I found the following post.
How do I calculate a point on a circle’s circumference?
which led me to this bit of math that can be adapted to any language:
x = cx + r * cos(a)
y = cy + r * sin(a)
Where r is the radius, cx,cy the origin, and a the angle from 0..2PI radians or 0..360 degrees.
and heres some fun reading material!
http://en.wikipedia.org/wiki/Circle#Equations
EDIT: just completed the rough draft for this project. enjoi!
i does not draw a spline, instead it draws a line with 102 points. the start of the arc, the end, and 100 evenly spaced points in between. it works well, and i will add a variable to the number of lines to reduce memory if needed.
function getARC(x, y, r, a){
a = a * (Math.PI/180);
var ax = +x + +r * Math.cos(+a),
ay = +y + +r * Math.sin(+a),
res = [];
res['x'] = ax,
res['y'] = ay;
return res;
}
function DRAWarc(cx, cy, ra, sa, ea){
var cx = '2473.5737';
var cy = '3145.1300';
var ra = '47.5538';
var sa = '2';
var ea = '91';
var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
var geometry = new THREE.Geometry();
var s = getARC(cx, cy, ra, sa);
geometry.vertices.push(new THREE.Vector3(s['x'], s['y'], 0));
var step = (ea - sa)/100;
for(var i=1;i<=100;i++){
var t = getARC(cx, cy, ra, (+sa + (+step * +i)));
geometry.vertices.push(new THREE.Vector3(t['x'], t['y'], 0));
//alert((+sa + (+step * +i)));
}
var f = getARC(cx, cy, ra, ea);
geometry.vertices.push(new THREE.Vector3(f['x'], f['y'], 0));
var line = new THREE.Line(geometry, material);
scene.add(line);
}